/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* This is the minified normalize.css so we can save a request. There is no need to change anything here.
   It simply sets some default options.
*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:active,a:focus,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/*	==========================================================================
 *	Add Fonts here. These are just opensource sample fonts.
 *	========================================================================== */
@font-face {
	font-family: 'NeuzeitSLTStdBook';
	src: url('../fonts/nuezeit/neuzeitsltstd-book-webfont.eot');
	src: url('../fonts/nuezeit/neuzeitsltstd-book-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/nuezeit/neuzeitsltstd-book-webfont.woff') format('woff'),
	url('../fonts/nuezeit/neuzeitsltstd-book-webfont.ttf') format('truetype'),
	url('../fonts/nuezeit/neuzeitsltstd-book-webfont.svg#NeuzeitSLTStdBook') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'NeuzeitSLTStdBookHeavy';
	src: url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.eot');
	src: url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.woff') format('woff'),
	url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.ttf') format('truetype'),
	url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.svg#NeuzeitSLTStdBookHeavy') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
    font-family: 'BeaufortRegular';
    src: url('../fonts/beaufort/beaufort-webfont.eot');
    src: url('../fonts/beaufort/beaufort-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/beaufort/beaufort-webfont.woff') format('woff'),
         url('../fonts/beaufort/beaufort-webfont.ttf') format('truetype'),
         url('../fonts/beaufort/beaufort-webfont.svg#BeaufortRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*CONTROLS THE COLOR OF THE FONTS ON MOBILE DEVICES - MAKE SURE TO GIVE THEM SPAN TAGS FIRST*/
          
		.appleLinks a {color:#fff;
		text-decoration: none;
		font-family: 'NeuzeitSLTStdBookHeavy';
		}
	
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
	/*position: relative;*/ /*1 OF 3 STICKY FOOTER */
    min-height: 100%;
}

*{ 
-moz-box-sizing: border-box; 	
box-sizing: border-box;	
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   START - THOMAS DROTAR - ANY SCREEN LAYOUT
   These rules here apply to ANY screen!
   ========================================================================== */

body {
	background-color: #111;
	overflow-x: hidden;
	padding-top: 1px;
	margin-top: -1px;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.4;
	font-family: 'NeuzeitSLTStdBook', sans-serif;
	/*border: 20px solid #000000;*/
	/*margin: 0 0 50px;*/ /* bottom = footer height 2 OF 3 STICKY FOOTER*/
	}


h1, h2, h3, h4, h5, h6, * {
	font-weight: normal;
}

/*CONTROLS H2 SUBJECT TITLES*/
.title {
	font-size: 1.5em;
	font-weight: 100;
	text-transform: uppercase;
	font-family: 'NeuzeitSLTStdBook', sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,1.00);
	color: #000;
	text-align: center;
	letter-spacing: 1px;
	margin-top: -0px;   /*CONTROLS THE DISTANCE BETWEEN THE H2 & BACKGROUND PLATE*/	
	border-bottom: 1px solid white;	
}


p {
	font-size: 1em;
	color: #000;
	font-weight: 300;
	/*text-transform: uppercase;*/
	/*font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;*/
	font-family: 'NeuzeitSLTStdBook', sans-serif;
	letter-spacing: .05em;
	text-shadow: 1px 1px 1px #666;	
}

.list {
	font-size: 1.1em;
	color: #000;
	font-weight: 300;
	/*text-transform: uppercase;*/
	/*font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;*/
	font-family: 'NeuzeitSLTStdBook', sans-serif;
	letter-spacing: 0em;
	text-shadow: 1px 1px 1px #666;	
	padding-top: 0px;
	list-style-position: outside;
	list-style-type: square;
}



input[type=checkbox].mobileMenuButton {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

input.mobileMenuButton ~ *,
input.mobileMenuButton ~ header h1,
input.mobileMenuButton ~ footer p {
	-webkit-transition: left 300ms;
	transition: left 300ms;
	left: 0;
}


input.mobileMenuButton:checked ~ *,
input.mobileMenuButton:checked ~ header h1,
input.mobileMenuButton:checked ~ footer p {
	left: 200px !important;
}

input.mobileMenuButton ~ .pageContent {
	position: relative;
}

input.mobileMenuButton:checked ~ label.mobileMenuCloseButton {
	left: 0 !important;
}

label.mobileMenuButton {
	display: block;
	position: fixed;
	color: #32B0D4;
	font-size: 45px;
	line-height: 0;
	background: #000;
	height: 60px;
	width: 60px;
	cursor: pointer;
	z-index: 10000;
}

label.mobileMenuButton:after {
	position: absolute;
	top: 25px;
	left: 16px;
	content: "\2261";
}

label.mobileMenuCloseButton {
	display: block;
	position: fixed;
	color: white;
	font-size: 20px;
	line-height: 0;
	background: #000;
	height: 60px;
	width: 60px;
	cursor: pointer;
	z-index: 10000;
	left: -200px;
}

label.mobileMenuCloseButton:after {
	position: absolute;
	top: 33px;
	left: 23px;
	content: "X";
}
/*header {
	position: absolute;
	top: 0;
	height: 60px;
	width: 100%;
	z-index: 9999;
}*/

header {
	position: fixed;
	top: 0;
	height: 60px;
	width: 100%;
	z-index: 9999;
	font-family: "NeuzeitSLTStdBookHeavy", sans-serif;	
}

/* the background of the header */
header:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,.7); /*CONTROLS COLOR OF MOBILE HEADER*/
	opacity: 0.5;
	content: "";
	z-index: -1;
}

header nav {
	position: absolute;
	width: 200px;
	left: -200px;background-color: black;
}

header nav ul {
	margin: 0;
	width: 200px;
	padding: 0
}

header nav li {
	display: inline-block;
	width: 100%;
	border-bottom: solid 1px #ccc;
}

header nav a {
	display: block;
	padding: 8px 30px;
	text-decoration: none;
	color: white;
	background-color: #000;
}

header nav a:hover,
header nav .active a {
	background: #333;
	text-decoration: none;
}

header h1 {
	margin: 15px auto;
	width: 144px;
	height: 29px;
	/*background: url( '../img/logo.png') no-repeat 0 0;*/
}

.phone {
		/*position: absolute;*/		
		font-size: 1.5em;
		font-weight: 100;
		text-transform: uppercase;
		font-family: 'BeaufortRegular', sans-serif;
		letter-spacing: .15em;
		text-shadow: 1px 1px 4px rgba(0,0,0,.00);
		color: rgba(0,0,0,1);	
		margin-top: -45px;
		/*right: 40px;	*/
		text-align: center;
		margin-left: 55px;
	}

footer {
	clear: both;
	position: relative;
	padding: 1em 0;
	z-index: 9998;
	bottom: 0;
	width: 100%;
	height: 1em;
	color: white;
	text-align: center;
	
	/*position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;*/
	/*1 OF 3 STICKY FOOTER */

}

footer p {
	margin: 0;
}

.footerLeft {
	width: 35%;
	color: white;
	float: left;
	font-size: .9em;
	margin-left: 15px;
	margin-top: -8px;
	text-align: left;
	text-transform: uppercase;
	}
	
	.footerLogo {
	display:none;
	}
	
	.footerPhone {
		float: right;
		width: 35%;
		color: white;
		font-size: 1em;
		margin-right: 15px;
		margin-top: -8px;
		text-align: right;				
	}


/* the background of the footer */
footer:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.5;
	content: "";
	z-index: -1;
}

.indexContent {
	clear:both;
	margin: 20px 10px 0px 10px;	
	display: block;
}

.indexPageLeft {
	float: left;
	display: block;
	width: 2%;
	background-color: rgba(255,0,0, .0);
	height: 20px;	
}

.indexPageCenter {	
	float: left;
	width: 95%;
	background-color: rgba(255,227,0,.0);
	height: 20px;	
}

.thomasdrotardesign {
		text-align: center;
		font-size: 1em;
		font-weight: 100;
		text-transform: uppercase;
		font-family: 'BeaufortRegular', sans-serif;
		font-family: 'NeuzeitSLTStdBook', sans-serif;
		letter-spacing: .1em;
		text-shadow: 1px 1px 4px rgba(0,0,0,.00);
		color: rgba(255,255,255,1);	
		margin-top: 0px;
	
}

.indexPageRight {
	float: right;
	display: block;
	width: 2%;
	background-color: rgba(255,0,0, .0);
	height: 20px;
	
}

/****************************************MUSIC PAGE*/


.musicContent {
	clear:both;
	margin: 20px 10px 0px 10px;	
	display: block;
}

.musicPageLeft {
	float: left;
	display: block;
	width: 2%;
	background-color: rgba(255,0,0, .0);
	height: 20px;	
}

.musicPageCenter {	
	float: left;
	width: 95%;
	background-color: rgba(255,227,0,.0);
	height: 20px;	
	}

.musicPageRight {
	float: right;
	display: block;
	width: 2%;
	background-color: rgba(255,0,0, .0);
	height: 20px;
}






/* START OF SECOND PAGE WITH BJOIN FILMS ANIMATION CENTERED FOR SMART PHONES */
.indexContent.secondary {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 30px 10px 20px 10px;	
	display: block;
}

.indexPage2Left {
	float: left;
	display: block;
	width: 1%;
	background-color: rgba(255,0,255, .0);
	height: 20px;	
}

.indexPage2Center {
	display: inline-block;
	float:left;
	width: 1%;
	height: 20px;
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(255,125,255,.0);
}
	
	.indexPage2Right {
	float: right;
	display: block;
	width: 98%;
	background-color: rgba(255,255,0, .0);
	height: 250px;
	
}

#indexAnimation {
	width: 100%;
	height: 100%;
		
	}
	
	
/****************************************MUSIC PAGE SECONDARY*/	


/* START OF SECOND PAGE WITH BJOIN FILMS ANIMATION CENTERED FOR SMART PHONES */
.musicContent.secondary {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 30px 10px 20px 10px;	
	display: block;
}

.musicPage2Left {
	float: left;
	display: block;
	width: 1%;
	background-color: rgba(255,0,255, .0);
	height: 20px;	
}

.musicPage2Center {
	display: inline-block;
	float:left;
	width: 1%;
	height: 20px;
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(255,125,255,.0);
}
	
	.musicPage2Right {
	float: right;
	display: block;
	width: 98%;
	background-color: rgba(255,255,0, .0);
	height: 250px;
	
}
		

/*ABOUT MONICA*/

.indexContent.third {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 0px 10px 20px 10px;	
	display: block;
}


.indexPage3Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.indexPage3Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 10px;
}
	
	.indexPage3Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}


.h2h {
	color: white;
	border-bottom: 1px solid white;
	text-align: center;
	font-height:1;
	text-transform: uppercase;
	font-size: 2em;
	font-family: 'NeuzeitSLTStdBookHeavy';
	font-weight: 100;
	text-shadow: 1px 1px 2px rgba(0,0,0,.50);
}

.pp{
	font-height:1.25;
	color: white;
	/*text-transform: uppercase;*/
	font-size: 1.25em;
	font-family: 'NeuzeitSLTStdBook';
	font-weight: 100;
	text-shadow: 1px 1px 1px rgba(0,0,0,.50);
	padding: .0em 30px .35em 30px;	
	/*text-align: center;*/
}

.ppp{
	font-height:1.25;
	color: white;
	/*text-transform: uppercase;*/
	font-size: 1.25em;
	font-family: 'NeuzeitSLTStdBook';
	font-weight: 100;
	text-shadow: 1px 1px 1px rgba(0,0,0,.50);
	padding: .0em 0px .0em 30px;	
	/*text-align: center;*/
}

.ppT{
	font-height:1.55;
	color: red;
	/*text-transform: uppercase;*/
	font-size: 1.25em;
	font-family: 'NeuzeitSLTStdBookHeavy';
	font-weight: 100;
	text-shadow: 1px 1px 1px rgba(0,0,0,.50);
	padding: .0em 30px .0em 30px;	
	/*text-align: center;*/
}

.ppC{
	font-height:1.25;
	color: white;
	/*text-transform: uppercase;*/
	font-size: 1.25em;
	font-family: 'NeuzeitSLTStdBook';
	font-weight: 100;
	text-shadow: 1px 1px 1px rgba(0,0,0,.50);
	padding: .0em 30px .35em 30px;	
	text-align: center;
}

.ppConcert {
	font-height:1.25;
	color: white;
	/*text-transform: uppercase;*/
	font-size: 1.25em;
	font-family: 'NeuzeitSLTStdBook';
	font-weight: 100;
	text-shadow: 1px 1px 1px rgba(0,0,0,.50);
	padding: .0em 30px .35em 30px;	
	text-align: center;
}
	
	
	
	


/****************************************MUSIC PAGE THIRD*/	


.musicContent.third {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 0px 10px 20px 10px;	
	display: block;
}


.musicPage3Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.musicPage3Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 10px;
}
	
	.musicPage3Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.musicOne {
	width: 100%;
	float: left;	
	/*border-radius: 15px;*/
	padding: 10px;
	background-color: rgba(0,0,0,.50);
	
}

.musicTwo {
	width: 100%;
	float: left;	
	/*border-radius: 15px;*/
	padding: 10px;
	background-color: rgba(0,0,0,.50);
}

.musicThree {
	width: 100%;
	/*border-radius: 15px;*/
	float: right;	
	padding: 10px;
	background-color: rgba(0,0,0,.50);	
}

.musicFour {
	width: 100%;
	/*border-radius: 15px;*/
	float: left;	
	padding: 10px;
	background-color: rgba(0,0,0,.50);	
}

.musicFive {
	width: 100%;
	/*border-radius: 15px;*/
	float: left;	
	padding: 10px;
	background-color: rgba(0,0,0,.50);	
}

.musicSix {
	width: 100%;
	/*border-radius: 15px;*/
	float: left;	
	padding: 1px;
	background-color: rgba(255,0,0,.0);	
}


#amazingaudioplayer-1 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(255,0,0,.50);
	border-radius: 15px;*/
}

#amazingaudioplayer-2 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(0,0,0,.50);
	border-radius: 15px;*/
}

#amazingaudioplayer-3 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(0,255,0,.50);
	border-radius: 15px;*/
}

#amazingaudioplayer-4 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(0,0,0,.50);
	border-radius: 15px;*/
}

#amazingaudioplayer-5 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(0,0,0,.50);
	border-radius: 15px;*/
}


#amazingaudioplayer-6 {
	box-sizing: content-box;
	/*padding: 10px;
	background-color: rgba(0,0,0,.50);
	border-radius: 15px;*/
}



/****************************************CONTACT PAGE THIRD*/	


.contactContent.third {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 0px 10px 20px 10px;	
	display: block;
}


.contactPage3Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.contactPage3Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .6);
	border-radius: 10px;
}
	
	.contactPage3Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.webColor  {
	color: orange;
	text-decoration: none;
}

.webColor:hover{
	color: red;
	text-decoration: none;
}

.contactLeft {
	border-top: 1px solid white;	
	border-bottom: 1px solid white;	
float: left;
width:  100%;	
padding: 5px;
	
}

.contactCenter {
border-top: 1px solid white;	
border-bottom: 1px solid white;	
float: left;
width:  100%;	
padding: 5px;
	
}

.contactRight {
	border-top: 1px solid white;	
	border-bottom: 1px solid white;	
float: left;
width:  100%;	
padding: 5px;
	
}






/***************************INDEX CONTENT FOUR */

.indexContent.four {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 10px 10px 20px 10px;	
	display: block;
}


.indexPage4Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.indexPage4Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 15px;
}


/*ALBUM ARTWORK*/
.gallery {
	width: 32%;
	width: 49%;
	display: inline-block;
	padding:10px;		
}
	.gallery img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

.caption {
	text-align: center;
		font-size: .8em;
		font-weight: 100;
		text-transform: uppercase;
		font-family: 'BeaufortRegular', sans-serif;
		/*font-family: 'NeuzeitSLTStdBook', sans-serif;*/
		letter-spacing: .0em;
		text-shadow: 1px 1px 4px rgba(0,0,0,1.0);
		color: rgba(255,255,255,1);	
		margin-top: 5px;	
		width:100%;
}

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}


img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
	
	.indexPage4Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}



/****************************************MUSIC PAGE FOUR*/	


.musicContent.four {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 10px 10px 20px 10px;	
	display: block;
}


.musicPage4Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.musicPage4Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 15px;
}

	.musicPage4Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}


/*AFTER ALBUM ARTWORK*/


.indexContent.five {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 10px 10px 20px 10px;	
	display: block;
}


.indexPage5Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.indexPage5Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 15px;
}
	
	.indexPage5Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}





/*ANIMATION BOTTOM IS CENTER*/

.pageContent.bottom {
	margin: 0px 10px 20px 10px;
	clear: both;
}
  
 .indexPageBottomLeft {
	display: block;
	float: left;
	width: 1%;
	/*background-color: red;*/
	background-color: rgba(255,0,4, 0);
	height: 100px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION & FOOTER*/	
} 

.indexPageBottomCenter {
	display: block;
	float: left;
	width: 97%;
	/*background-color: blue;*/
	background-color: rgba(0,211,254, 0);
	height: 200px;	
}
#indexAnimation{
		display: block;
		width: 100%;
		height: 100%;		
	}

.indexPageBottomRight {
	display: block;
	float: left;
	width: 1%;
	background-color: rgba(255,191,0, 0);
	/*background-color: orange;*/
	height: 100px;	
}

/****************************************MUSIC PAGE FIVE*/	


.musicContent.five {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 10px 10px 20px 10px;	
	display: block;
}


.musicPage5Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.musicPage5Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 15px;
}
	
	.musicPage5Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}


/****************************************CONTACT PAGE FIVE GUESTBOOK*/	


.contactContent.five {
	position: relative;  /*ALLOWS DIV TO MOVE RIGHT WHEN PHONE MENU OPENS*/
	clear:both;
	margin: 10px 10px 20px 10px;	
	display: block;
}


.contactPage5Left {
	display: block;
	float:left;
	width: 1%;
	background-color: rgba(14,254,0,.0);
	height: 200px;
}

.contactPage5Center {
	display: block;
	float:left;
	width: 97%;
	/*height: 500px;*/
	margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
	background-color: rgba(0,0,0, .3);
	border-radius: 15px;
}
	
	.contactPage5Right {
	display: block;
	float:right;
	width: 1%;
	background-color: rgba(255,0,0,.0);
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.contacLeftGB {
	background-color: rgba(222,34,87,0.53);
	width: 100%;
	float: left;
}

.contactRightGB {
	background-color: rgba(54,220,23,0.28);
	width: 100%;
	float: left;
}






/* ==========================================================================
   END - THOMAS DROTAR - ANY SCREEN LAYOUT
   ========================================================================== */






/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.contact-page .musicContent.four{margin: 0px auto !Important; overflow: hidden;}
.contact-page .musicContent.four .swap-inner{margin-top: 0 !important;}
.contact-page form.panel{padding-bottom: 10px;}


/* ==========================================================================
   START - THOMAS DROTAR - iPHONE 6 SCREEN LAYOUT
   This ONLY applies to screens that have a width of 450 pixels or more.
   If you want to invalidate rules from the any screen layout, you HAVE
   to overwrite them here.
   ========================================================================== */
/* Screens bigger than 376px will switch to desktop layout */
@media only screen and (min-width: 375px) {
	
	/*****
	Carl Guestbook
	*****/
	.contacLeftGB {
		background: rgba(255,255,255,.40) !important;
		border-right: solid 1px white;
		padding: 30px 15px;
	}
	.contactPage5Center > div > .contactRightGB {
		background: white;
		border-left: rgba(255,255,255,.40);
		padding: 30px 15px;
		overflow: scroll;
	}
	#guestbook > div {
		clear: both;
		margin-bottom: 10px;
	}
	#guestbook > #messages {
		text-align: center;
		font-style: italic;
		padding: 10px 5px;
	}
	#guestbook > input[type="submit"] {
		display: block;
		margin: 0 auto;
	}
	#guestbook > div > label {
		float: none;
		width: auto;
		padding: 0;
		display:block;
	}
	#guestbook > div > input, #guestbook > div > textarea {
		max-width:auto;
		display:block;
	}
	.contactRightGB > div > div:last-of-type {
		overflow:scroll;
	}
	.contactRightGB h3 {
		margin-top: 0;
		border-bottom: solid;
	}
	.contactRightGB > div > div.panel-body > div > p {
		margin-bottom: 0;
	}
	.contactRightGB > div > div.panel-body > div > em {
		font-size:small;
	}
	/***** end guestbook *****/
	
	/*ALBUM ARTWORK*/
.gallery {
	width: 49%;
}
	
	/*ALBUM CAPTIONS*/
	.caption {
		font-size: 1em;
	}
	
	
	
	
	
}


/* ==========================================================================
   START - THOMAS DROTAR - iPHONE 6 PLUS SCREEN LAYOUT
   This ONLY applies to screens that have a width of 450 pixels or more.
   If you want to invalidate rules from the any screen layout, you HAVE
   to overwrite them here.
   ========================================================================== */
/* Screens bigger than 414px will switch to desktop layout */
@media only screen and (min-width: 414px) {
	
	.gallery {
	width: 49%;
}
	
	
	
	/*ALBUM CAPTIONS*/
	.caption {
		font-size: 1em;
	}
	
	
	
	
}

/* ==========================================================================
   START - THOMAS DROTAR - LARGE MOBILE AND TABLET SCREEN LAYOUT
   This ONLY applies to screens that have a width of 450 pixels or more.
   If you want to invalidate rules from the any screen layout, you HAVE
   to overwrite them here.
   ========================================================================== */
/* Screens bigger than 768px will switch to desktop layout */
@media only screen and (min-width: 450px) {
	
	
	.phone {
		font-size: 2em;
		margin-top: -50px;
		right: 20px;	
	}
	
	.thomasdrotardesign {
		text-align: center;
		font-size: 1.7em;
		font-family: 'NeuzeitSLTStdBook', sans-serif;
		letter-spacing: .1em;
		text-shadow: 1px 1px 4px rgba(0,0,0,.00);
		color: rgba(255,255,255,1);	
		margin-top: 0px;
	}



.indexPageLeft {
	width: 5%;
}

.indexPageCenter {
	width: 90%;
}

.indexPageRight {
	width: 5%;
	}
	
	
.musicPageLeft {
	width: 5%;
}

.musicPageCenter {
	width: 90%;
}

.musicPageRight {
	width: 5%;
	}
		

.indexPage2Center {
	height: 3px;
}

.indexPage2Right {
	height: 300px;
}

.musicPage2Center {
	height: 3px;
}

.musicPage2Right {
	height: 300px;
}


.pageContent.third {
	 margin: 10px 10px 20px 10px;		
}

.musicContent.third {
	 margin: 10px 10px 20px 10px;		
}

.contactContent.third {
	 margin: 10px 10px 20px 10px;		
}


/*ALBUM ARTWORK DIV*/

.indexContent.four {
	margin: 50px 10px 20px 10px;
}

.musicContent.four {
	margin: 50px 10px 20px 10px;
}

/*ALBUM ARTWORK*/
.gallery {
	width: 32%;
	display: inline-block;
	padding:10px;		
}

.caption {
		font-size: 1em;
		letter-spacing: .0em;
}

.indexContent.five {
	margin: 10px 10px 20px 10px;	
}

/*ANIMATION BOTTOM IS CENTER*/

.indexPageBottomCenter {
	height: 350px;	
}

.musicContent.five {
	margin: 10px 10px 20px 10px;	
}		


.footerLeft {
	width: 35%;
	color: white;
	float: left;
	font-size: 1.2em;
	margin-left: 15px;
	margin-top: -8px;
	text-align: left;
	text-transform: uppercase;
	}
	
	
	
	.footerPhone {
		float: right;
		width: 35%;
		color: white;
		font-size: 1.2em;
		margin-right: 15px;
		margin-top: -8px;
		text-align: right;				
	}
	
}






/* ==========================================================================
   START - THOMAS DROTAR - LARGE SCREEN LAYOUT
   This ONLY applies to screens that have a width of 769 pixels or more.
   If you want to invalidate rules from the any screen layout, you HAVE
   to overwrite them here.
   ========================================================================== */
/* Screens bigger than 768px will switch to desktop layout */

@media only screen and (min-width: 769px) {
	/*****
	Carl Guestbook
	*****/
	.contacLeftGB {
		background: rgba(255,255,255,.40) !important;
		border-right: solid 1px white;
		padding: 30px 15px;
	}
	.contactPage5Center > div > .contactRightGB {
		background: white;
		border-left: rgba(255,255,255,.40);
		padding: 30px 15px;
		overflow: scroll;
	}
	#guestbook > div {
		clear: both;
		margin-bottom: 10px;
	}
	#guestbook > #messages {
		text-align: center;
		font-style: italic;
		padding: 10px 5px;
	}
	#guestbook > input[type="submit"] {
		display: block;
		margin: 0 auto;
	}
	#guestbook > div > label {
		float: none;
		width: auto;
		padding: 0;
		display:block;
	}
	#guestbook > div > input, #guestbook > div > textarea {
		max-width:100%;
		display:block;
	}
	.contactRightGB > div > div:last-of-type {
		overflow:scroll;
	}
	.contactRightGB h3 {
		margin-top: 0;
		border-bottom: solid;
	}
	.contactRightGB > div > div.panel-body > div > p {
		margin-bottom: 0;
	}
	.contactRightGB > div > div.panel-body > div > em {
		font-size:small;
	}
	/***** end guestbook *****/
	
	/*FRAME AROUND FULL SCREEN*/
	body{
	border: 21px solid #808080;
	}
	
	input.mobileMenuButton ~ * {
		-webkit-transition: none;
		transition: none;
	}

	input.mobileMenuButton ~ * h1,
	input.mobileMenuButton ~ * p {
		-webkit-transition: none;
		transition: none;
	}

	input.mobileMenuButton,
	label.mobileMenuButton {
		display: none;
	}
	

	header {
	margin-top: -2px;
	height: 5px;
	background-color: rgba(255,255,255,.30);
	clear: both;
	position: relative;
	padding: 1em 0;
	z-index: 9998;
	bottom: 0;
	width: 100%;
	/*height: 1.1em;*/
	color: white;
	text-align: center;	
	}
	
	
	.phone {
		font-size: 1.7em;
		margin-top: -75px;
		margin-left: 0px;
	}

	header nav {
	display: inline-block;
	/*position: absolute;*/
	position: fixed;  /*KEEPS NAVIGATION GLUED SO IT DOES NOT SCROLL*/
	margin-top: 8px;
	width: 170px;
	left: 21px;
	top: 100px; /*CHANGED HERE TO MOVE NAV UP FOR IPAD LANDSCAPE FOR MORE ROOM*/
	background-color: rgba(255,255,255,.40);
	padding: 10px 0px 20px 10px; 
	border-radius: 0px 15px 15px 0px;
	/*WHITE BOX UNDER SIDE BUTTONS*/		
	}

	header nav ul {
	text-align: left;
	width: auto;
	font-size: 16px;
	}

	header nav li {
		margin-left: 0;
		width: auto;
		border-bottom: 0;
		 background: rgba(255, 255, 255, 0.0);
	   /*-moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  border-radius: 10px; 
	  -khtml-border-radius: 10px;*/
	  margin-top: 1px; /*DISTANCE BETWEEN BUTTONS THEMSELVES*/
	  margin-bottom: 5px;
	  z-index: 111;
	}

	header nav li:first-child {
	margin: 0;
	font-size: 16px;
	}

	header nav a {
		/*text-shadow: 1px 1px 2px #ccc;*/
		background: none;
		border-radius: 6px;
		padding: 5px 0px;
		font-size: 1.5em;
		font-weight: 100;
		text-transform: uppercase;
		font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;
		letter-spacing: .0em;
		/*text-shadow: 1px 1px 1px rgba(0,0,0,1.00);*/
		color: black;	
	}

	header nav a:hover {
	background-color: rgba(255,255,255,.0);
	color: rgba(215,255,0,1);
	text-decoration: none;
	text-shadow: 1px 1px 2px #000;
	font-size: 1.5em;
	}
		/*ACTIVE LINK*/
	
	header nav .active a  {	
	display: inline-block;
	font-size: 1.6em;
	outline: none;
	text-transform: uppercase;
	font-family: 'NeuzeitSLTStdBookHeavy';
	letter-spacing: 0.em;
	color: white;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
	background-color: rgba(255,0,4, .0);
  }
	
	header nav .active a:hover {
	 color: white;	
 	 
	 /*font-size: 2.2em;*/
	/* letter-spacing: 0.25em;*/
}


.right { /*RIGHT SIDE BLOCK PUSH OVER*/
	  display: inline-block;
		position: absolute;
		margin-top: 8px;
		width: 100px;
		width: 10px;
		right: 0px;
		top: 80px; /*CHANGED HERE TO MOVE NAV UP FOR IPAD LANDSCAPE FOR MORE ROOM*/
		background-color: rgba(255,0,255,.0);
		padding: 10px 0px 20px 10px; /*WHITE BOX UNDER SIDE BUTTONS*/
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px; /* future proofing */
		-khtml-border-radius: 10px; /* for old Konqueror browsers */	
}


/*THIS PLACES THE FOOTER AT THE BOTTOM OF THE PAGE AND YOU SCROLL UNDER IT*/
	/*footer {
		position: fixed;
		bottom: 0;
	}
*/
/*NEVER CHANGE THE LEFT AND RIGHT MARGINS FOR VIDEO/MUST BE CONSITENT THROUGHTOUT!!!!!!!!!!*/
	/*.pageContent {
		margin: 80px 10px 20px 10px;
	}*/
	
	
	.indexContent {
	/*margin: 50px 110px 0px 180px;*/
	margin: 0px 110px 0px 180px;
}

	.indexPageLeft {
	width: 3%;
	background-color: rgba(255,5,9,.0);
	height: 20px;	
}

.indexPageCenter {
	width: 95%;
	background-color: rgba(255,239,0,.0);
	height: 20px;
	margin-bottom: 0px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
}

.indexPageRight {
	width: 2%;
	background-color: rgba(35,255,0,.0);
	height: 20px;	
}


/***************************************MUSIC PAGE*/

	.musicContent {
	/*margin: 50px 110px 0px 180px;*/
	margin: 0px 110px 0px 180px;
}

	.musicPageLeft {
	width: 3%;
	background-color: rgba(255,5,9,.0);
	height: 20px;	
}

.musicPageCenter {
	width: 95%;
	background-color: rgba(255,239,0,.0);
	height: 20px;
	margin-bottom: 0px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
}

.musicPageRight {
	width: 2%;
	background-color: rgba(35,255,0,.0);
	height: 20px;	
}




.indexContent.secondary {
	margin: 0px 10px 220px 180px;	
}

.indexPage2Left {
	height: 3px;
	width: 25%;
	/*background-color: green;*/
	background-color: rgba(21,255,0,0.0);
}

.indexPage2Center {
	height: 3px;
	width: 25%;
	/*background-color: orange;*/
	background-color: rgba(255,143,0,0.0);
}

.indexPage2Right {
	height: 250px;
	/*background-color: blue;*/
	background-color: rgba(50,176,212,0.0);
	float: right;
	
	width: 50%;
}


/***************************************MUSIC PAGE SECONDARY*/

.musicContent.secondary {
	margin: 0px 10px 220px 180px;	
}

.musicPage2Left {
	height: 3px;
	width: 25%;
	/*background-color: green;*/
	background-color: rgba(21,255,0,0.0);
}

.musicPage2Center {
	height: 3px;
	width: 25%;
	/*background-color: orange;*/
	background-color: rgba(255,143,0,0.0);
}

.musicPage2Right {
	height: 250px;
	/*background-color: blue;*/
	background-color: rgba(50,176,212,0.0);
	float: right;
	
	width: 50%;
}


/*ABOUT MONICA*/

.indexContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.indexPage3Left {
	width: 20%;
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.indexPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/
	
}
	
	.indexPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);
	
}



/***************************************MUSIC PAGE THIRD*/

.musicContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.musicPage3Left {
	/*width: 20%;*/
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.musicPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/	
}

.musicOne {
	width: 50%;
}

.musicTwo {
	width: 50%;
}

.musicThree {
	width: 50%;
}

.musicFour {
	width: 50%;
}

.musicFive {
	width: 50%;
}

.musicSix {
	width: 50%;
}



	
	.musicPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);
	
}

/***************************************CONTACT PAGE THIRD*/

.contactContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.contactPage3Left {
	/*width: 20%;*/
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.contactPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/	
}

.contactPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);
	
}

.contactLeft {
float: left;
width:  50%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}

.contactCenter {
float: left;
width:  50%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}

.contactRight {
float: left;
width:  50%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}




.contactContent.five {
	margin: 50px 110px 0px 260px;	
}




.contacLeftGB {
	/*background-color: rgba(222,34,87,0.53);*/
	width: 50%	
}

.contactRightGB {
	/*background-color: rgba(54,220,23,0.28);*/
	width: 50%	
}





/*ALBUM ARTWORK*/

.indexContent.four {
	clear: both;
	margin: 50px 110px 0px 180px;
	
	
}

.indexPage4Left {
	width: 2%;
	background-color: rgba(255,0,0,.0);
	height: 250px;
}

.indexPage4Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	background-color: rgba(0,0,0,.2);
		
}

.gallery {
	width: 19%;
	display: inline-block;
	padding:10px 0px 10px 20px;
	
}
	
	
	.gallery img {
	display: block;
	margin: 0 auto;
	width: 100%;  /*ALWAYS STAYS 100%*/
}

.caption {
		font-size: .5em;
		/*color:red;*/
}
	
	.indexPage4Right {
	width: 2%;
	height: 250px;
	background-color: rgba(255,0,255,.0);
	
}

/***************************************MUSIC PAGE FOUR*/

.musicContent.four {
	clear: both;
	margin: 50px 110px 0px 180px;
	
	
}

.musicPage4Left {
	width: 2%;
	background-color: rgba(255,0,0,.0);
	height: 250px;
}

.musicPage4Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	background-color: rgba(0,0,0,.2);	
}

	.musicPage4Right {
	width: 2%;
	height: 250px;
	background-color: rgba(255,0,255,.0);	
}



.indexContent.five {
	margin: 50px 110px 0px 180px;	
}
	
	
.indexPage5Left {
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.indexPage5Center {
	float: left;
	width: 96%;
	margin-bottom: 100px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	background-color: rgba(0,0,0,.2);	
}
	
	.indexPage5Right {
	width: 2%;
	height: 250px;
	background-color: rgba(255,0,0,.0);	
}

/***************************************MUSIC PAGE FIVE*/

.musicContent.five {
	margin: 50px 110px 0px 180px;	
}
	
	
.musicPage5Left {
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.musicPage5Center {
	float: left;
	width: 96%;
	margin-bottom: 100px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	background-color: rgba(0,0,0,.2);	
}
	
	.musicPage5Right {
	width: 2%;
	height: 250px;
	background-color: rgba(255,0,0,.0);	
}


/*ANIMATION IS CENTER*/
	.pageContent.bottom {
	margin: 100px 10px 0px 10px;	
}


	.indexPageBottomLeft {
	display: inline-block;
	float: left;
	
	width: 18%;
	/*background-color: red;*/
	/*background-color: rgba(255,0,4,0.5);*/
	height: 300px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
} 

.indexPageBottomCenter {
	display: inline-block;
	float: left;
	width: 61%;
	/*background-color: blue;
	background-color: rgba(0,0,0,0.00);*/
	height: 350px;
	text-align:center;	
}
	

.indexPageBottomRight {
	display: inline-block;
	float: left;
	width: 20%;
	/*background-color: orange;*/
	/*background-color: rgba(255,178,0,0.50);*/
	height: 200px;	
}



}


/* ==========================================================================
   START - THOMAS DROTAR - LARGER SCREEN LAYOUT
   This ONLY applies to screens that have a width of 1024 pixels or more.
   If you want to invalidate rules from the any screen layout, you HAVE
   to overwrite them here.
   ========================================================================== */
/* Screens bigger than 1024px will switch to desktop layout */

@media only screen and (min-width: 1024px) {
	
body{
	border: 20px solid #156073;
	}	
	
	/*ABOUT MONICA*/

.indexContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.indexPage3Left {
	width: 20%;
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.indexPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/	
}
	
	.indexPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);	
}


/***************************************MUSIC PAGE THIRD*/

.musicContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.musicPage3Left {
	width: 20%;
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.musicPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/	
}

.musicOne {
	width: 33%;
}

.musicTwo {
	width: 33%;
}

.musicThree {
	width: 34%;
}

.musicFour {
	width: 33%;
}

.musicFive {
	width: 33%;
}

.musicSix {
	width: 33%;
}
	
	.musicPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);	
}




/***************************************CONTACT PAGE THIRD*/

.contactContent.third {
	margin: 450px 110px 0px 180px;	
}
	
	
.contactPage3Left {
	width: 20%;
	width: 2%;
	background-color: rgba(255,255,255,.0);
	height: 250px;
}

.contactPage3Center {
	width: 96%;
	margin-bottom: 30px;  /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
	/*background-color: rgba(0,0,0,.4);
	border-radius: 20px;*/	
}


.contactPage3Right {
	width: 2%;
	height: 250px;
	background-color: rgba(0,100,255,.0);	
}

.contactLeft {
float: left;
width:  33%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}
/*****
Carl Guestbook
*****/
.contactPage5Center > div {
	display:flex;
}
.contactPage5Center > div > article {
	height:auto;
}
.contacLeftGB {
	background: rgba(255,255,255,.40) !important;
    border-right: solid 1px white;
    padding: 30px 15px;
    flex: 1;
    position: relative;
}
.contactPage5Center > div > .contactRightGB {
	background: white;
    border-left: rgba(255,255,255,.40);
    padding: 30px 15px;
    flex: 1;
    position: relative;
    overflow: scroll;
}
#guestbook > div {
	clear: both;
    margin-bottom: 10px;
}
#guestbook > #messages {
    text-align: center;
    font-style: italic;
    padding: 10px 5px;
}
#guestbook > input[type="submit"] {
	display: block;
    margin: 0 auto;
}
#guestbook > div > label {
	float: left;
    width: 40%;
    padding: 0;
}
#guestbook > div > input, #guestbook > div > textarea {
	max-width:60%;
}
.contactRightGB > div > div:last-of-type {
	overflow:scroll;
}
.contactRightGB h3 {
	margin-top: 0;
    border-bottom: solid;
}
.contactRightGB > div > div.panel-body > div > p {
    margin-bottom: 0;
}
.contactRightGB > div > div.panel-body > div > em {
	font-size:small;
}
/***** end guestbook *****/


.contactCenter {
float: left;
width:  33%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}

.contactRight {
float: left;
width:  33%;	
padding: 5px;
border-top: 1px solid rgba(222,34,87,0.00);
border-bottom: 1px solid rgba(222,34,87,0.00);
	
}







/*ALBUM ARTWORK*/

.indexContent.four {
	clear: both;
	margin: 0px 110px 0px 180px;
}

.caption {
		font-size: .6em;
		/*color:rgba(50,176,212,1.00);*/
}
		
.indexContent.five {
	margin: 0px 110px 0px 180px;	
}	


/***************************************MUSIC PAGE FOUR*/

.musicContent.four {
	clear: both;
	margin: 0px 110px 0px 180px;
}
		
.musicContent.five {
	margin: 0px 110px 0px 180px;	
}	


}

@media only screen and (min-width: 1280px) {
	
	body{
	   border: 20px solid #000000;
	}
	
	
	
	

.right {		
		width: 20px;
}

	.footerLeft {
	width: 35%;
	color: white;
	float: left;
	font-size: 2em;
	margin-left: 15px;
	margin-top: -12px;
	text-align: left;
	text-transform: lowercase;
	}
	
	.footerLogo {
	display:none;
	}
	
	.footerPhone {
		float: right;
		width: 35%;
		color: white;
		font-size: 2em;
		margin-right: 15px;
		margin-top: -12px;
		text-align: right;				
	}
	
	.indexContent {
	margin: 50px 210px 0px 213px;
}

	.musicContent {
	margin: 50px 210px 0px 213px;
}

.indexContent.secondary {
	margin: 0px 210px 20px 213px;
	margin: 0px 0px 20px 213px;	
}

.indexPage2Center {
	height: 50px;
	background-color: rgba(255,0,255,.0);
}

.indexPage2Right {
	height: 600px;
	background-color: rgba(255,0,255,.0);
}


/**************************MUSIC CONTENT SECONDARY*/

.musicContent.secondary {
	margin: 0px 0px 20px 213px;	
}

.musicPage2Center {
	height: 50px;
	background-color: rgba(255,0,255,.0);
}

.musicPage2Right {
	height: 600px;
	background-color: rgba(255,0,255,.0);
}




.indexContent.third {
	margin: 0px 210px 20px 213px;	
}


/**************************MUSIC CONTENT THIRD*/

.musicContent.third {
	margin: 0px 210px 20px 213px;	
}


.indexContent.four {
	margin: 0px 210px 20px 213px;	
}

/**************************MUSIC CONTENT FOUR*/

.musicContent.four {
	margin: 0px 210px 20px 213px;	
}


.caption {
		font-size: .8em;
}

.indexContent.five {
	margin: 0px 210px 20px 213px;	
}

/**************************MUSIC CONTENT FIVE*/ 

.musicContent.five {
	margin: 0px 210px 20px 213px;	
}  


/*BOTTOM ANIMATION IS CENTER*/
	.pageContent.bottom {
	margin: 100px 10px 100px 10px;	
}


	.indexPageBottomLeft {
	display: inline-block;
	float: left;
	
	width: 18%;
	/*background-color: red;*/
	background-color: rgba(255,0,4,0.0);
	height: 450px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
} 

.indexPageBottomCenter {
	display: inline-block;
	float: left;
	width: 61%;
	/*background-color: blue;
	background-color: rgba(0,0,0,0.00);*/
	height: 350px;
	text-align:center;	
}
	

.indexPageBottomRight {
	display: inline-block;
	float: left;
	width: 20%;
	/*background-color: orange;*/
	/*background-color: rgba(255,178,0,0.50);*/
	height: 200px;	
}






   
   
}


@media only screen and (max-width: 1590px){
    .contact-page .contactContent.five {
        margin: 50px 65px 0px 68px;	
    }
}
@media only screen and (max-width: 1100px){
    .contact-page .contactContent.five {
        margin: 0 auto;	
    }
}
@media only screen and (max-width: 480px){
    .contact-page .contact-flex {
        display: block !Important;
    }
    .contact-page .contactPage5Center .contactPage5Right{display: none !important;}
    .contact-page .contacLeftGB{
        float: none;
        width: 100%;
        flex: 0 !important;
    }
    .contact-page .contactPage5Center > div > .contactRightGB{
        float: none;
        width: 100%;
        flex: 0 !important;
        height: 290px;
    }
}
   
/* ==========================================================================
   END - THOMAS DROTAR - LARGEST SCREEN LAYOUT
   ========================================================================== */
   
   
   
   
   
   
   
   
   
   
   
   

/* ==========================================================================
   START - RETINA IMAGE REPLACE
   ========================================================================== */

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

	header h1 {
		background: url( '../img/logo@2x.png') no-repeat 0 0;
		background-size: 144px 29px;
	}
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}