@charset "utf-8";
/* CSS Document */

/* html element style ====================== */

body, html {
	font-family: 'Lato', sans-serif;
	font-size:20px;
	height: 100%;
	margin:0;
	padding:0;
}

/* font style ====================== */

.colorwhite{
	color:white;
}
.fontperm{
	font-family: 'Permanent Marker', cursive;
}
.firstletter{
	font-size:50px;
	/*color:white;*/
	/*text-shadow:2px 2px 5px black;*/
}
.textcenter{
	text-align:center;
}
.textfooter, .textreturntotop{
	font-size:20px;
}
.textfooter a, .textreturntotop a{
	text-decoration:none;
	color: darkslategray;
}
.textfooter a:hover, .textreturntotop a:hover{
	text-decoration:underline;
}
.textreturntotop a{
	color: lightgray;
}

/* general purpose class styles ========== */

.accordion{
	width:100%;
	color:white;
	background-color:red;	
	margin:0 auto;
	text-align:center;
	font-size:36px;
	padding:10px;
	border:2px solid white;
}
.artistcontent, .parallax{
	/* Set a specific height */
	height:fit-content; 
	width:100%;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding:0;
	
	position:relative;
	overflow:hidden;
}
a.artistsitelink{
	text-decoration:none;
	color:white;
	
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
  
}
a.artistsitelink:hover{
	text-decoration:underline;
	color:lightgray;
}
a.artistsitelink:visited{
	color:lightgray;
}

.artistname{
	font-size:50px;
	color:white;
	text-shadow:2px 2px 5px black;
}
.artistquote, .pullquote{
	font-style:italic;
	font-size:24px;
	/*width:80%;*/
	margin:0 auto;
}
.artwork_piece{
	/*float:left;*/
	width:200px;
	display:inline-block;
	margin:0 16px;
	vertical-align:top;
}
.artwork_piece img{
	width:200px;
	box-shadow:2px 2px 5px black;
}
.artwork_piece img:hover{
	/*box-shadow:0 0 3px white;*/
	/*opacity:0.5;*/
	-webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
    filter: brightness(200%);
}
.audioholder{
	position: relative;
    height: 400px;
    width: 400px;
    /*border: 1px solid red;*/
    margin: 0 auto;
}
.audioplayer{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}

.content{
	/*width:800px;*/
	width:50%;
	margin:0 auto;
	padding:25px 0;
}
.content p{
	/*text-indent:20px;*/
	font-size:24px;
	line-height:1.5em;
	color:darkslategray;
}
.contentartist{
	color:white;
	/*width:60%;*/
}
.contentartist p{
	color:white;
}
.contentartwork{
	width:60%;
	display:block;
	margin: 0 auto;
	text-align:center;
}
.contenttext{
	background-color:white;
}
.errors{
	color:red;
	font-size:16px;
	font-weight:bold;
}
.floatclear{
	clear:both;
}

#header{
	margin-top:50px;
	/*height:400px;*/
}

#img00{
	margin-top:40px;
	background-attachment:scroll;
	background-position:top center;
	background-size:contain;
}

.img_mobile{
	visibility:hidden;
}

#img_tp_home, #img_tp_wade{
	height:800px;
}
#img_tp_home{	background-image: url("../pics/thomasproject_home.jpg"); }
#img_tp_wade{	background-image: url("../pics/thomasproject_wade.jpg"); }

/*
#img_tp_cucinotta{	background-image: url("pics/cucinotta/artist_bg.jpg"); }
#img_tp_fennell{	background-image: url("pics/fennell/artist_bg.jpg"); }
#img_tp_halpern{	background-image: url("pics/halpern/artist_bg.jpg"); }
#img_tp_herbert{	background-image: url("pics/herbert/artist_bg.jpg"); }
#img_tp_hollingsworth{	background-image: url("pics/hollingsworth/artist_bg.jpg"); }
*/

.img_tp_bg00 { background-color: rgba(0, 0, 0, 0.65);}
.img_tp_bg01 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg02 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg03 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg04 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg05 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg06 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg07 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg08 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg09 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg10 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg11 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg12 { background-color: rgba(0, 0, 0, 0.5);}
.img_tp_bg13 { background-color: rgba(0, 0, 0, 0.5);}

.img_tp_site00 { background-image: url("../pics/backgrounds/site00.jpg"); }
.img_tp_site01 { background-image: url("../pics/backgrounds/site01.jpg"); }
.img_tp_site02 { background-image: url("../pics/backgrounds/site02.jpg"); }
.img_tp_site03 { background-image: url("../pics/backgrounds/site03.jpg"); }
.img_tp_site04 { background-image: url("../pics/backgrounds/site04.jpg"); }
.img_tp_site05 { background-image: url("../pics/backgrounds/site05.jpg"); }
.img_tp_site06 { background-image: url("../pics/backgrounds/site06.jpg"); }
.img_tp_site07 { background-image: url("../pics/backgrounds/site07.jpg"); }
.img_tp_site08 { background-image: url("../pics/backgrounds/site08.jpg"); }
.img_tp_site09 { background-image: url("../pics/backgrounds/site09.jpg"); }
.img_tp_site10 { background-image: url("../pics/backgrounds/site10.jpg"); }
.img_tp_site11 { background-image: url("../pics/backgrounds/site11.jpg"); }
.img_tp_site12 { background-image: url("../pics/backgrounds/site12.jpg"); }
.img_tp_site13 { background-image: url("../pics/backgrounds/site13.jpg"); }

.img_center{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color:red;
	color:white;
	font-weight:bold;		
	font-size:36px;
	padding:10px;
}

.nomargincenter{
	margin:0 auto;
}

#page{
	/*width:100%;*/
	position:relative;
}

.parallax{
	/*height: 800px;*/
}
.partners{
	width:30%;
	margin-left:2%;
}
.pullquote{
	font-size: 30px;
}

.quote-close, .quote-open, .quote-close-k, .quote-open-k{
	display:inline-block;
	width:40px;
	height:40px;
	background-image: url("../pics/quote-close.png");
	vertical-align:text-top;
}
.quote-open, .quote-open-k{
	background-image: url("../pics/quote-open.png");
	vertical-align:text-bottom;
}
.quote-close-k{
	/*background-image: url("../pics/quote-close-k.png");*/
	filter: invert(100%);
}
.quote-open-k{
	/*background-image: url("../pics/quote-open-k.png");*/
	filter: invert(100%);
	vertical-align:text-top;
}


.report{
	color:green;
	font-size:16px;
	font-weight:bold;
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
}

#siteheader{
	font-size:90px;
	color:white;
	text-shadow:2px 2px 5px black;
}

#sitetitle{
	/*z-index:-10;*/
	/*color:white;*/
	position: absolute;
	bottom:0;
	
	width:100%;
	/*height:100px;*/
	margin:0;
	padding:0;
	
	background-color: rgba(0,0,0,0.5);
}

/* menu styles ============== */

#menu{		
	position:relative;
	width:100%;
	height:50px;
	z-index:3;
	text-align:center;
}

#menu a{
	color:white;
	text-decoration:none;
	font-size:18px;
	padding-left:5px;
	padding-right:5px;
	
	text-shadow:2px 2px 5px black;
}
#menu a:hover{
	text-decoration:underline;
}

@media only screen and (max-width: 600px){
	/*.subdiv { font-size: 16px; }*/
	.artistquote{
		line-height:1.8em;
	}
	.artistname{
		font-size:30px;
	}
	.artwork_piece{
		margin:10px 0;
	}
	.content{
		width:80%;
	}
	.content p {
		font-size:20px;
		line-height:1.8em;
	}
	.img_mobile{
		visibility:visible;
		width:100%;
	}
	#img_tp_home{
		height:auto;
	}
	#img_tp_wade{
		height:auto;
	}
	#menu{
		height:auto;
		line-height:2.5em;
	}
	#menu a{
		font-size:24px;
	}
	.menuartist{
		display:block;
		margin:0 auto;
	}
	#siteheader	{
		font-size:50px;
	}
	#sitetitle{
		position:relative;
	}
	.textfooter{
		font-size:16px;
	}
}

@media only screen and (max-width: 1200px){
	/*.subdiv { font-size: 16px; }*/
}
@media only screen and (max-width: 952px){
	/*.menu-left{ display:none; }
	.subdiv { font-size: 14px; }*/
}
@media only screen and (max-width: 700px){
	/*.menu-left{ display:none; }
	.subdiv { font-size: 12px; }*/
}

@media only screen and (max-width: 480px){
	/*.menu-left{	display:none; }
	.menu-right{ 
		font-size:12px;
		width:50%;
		overflow:hidden;
	}
	.subdiv { font-size: 10px; }*/
	
}