@charset "utf-8";

/* =============================================================================
============================================================#19141D=========#030202===== */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body {
	margin: 0;
  font-size: 14px; line-height: 1.231;
  background:#000000;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);     }

#wrapper{ height: max-content;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(0,0,0) 8%, rgb(119,31,31) 43%, rgb(188,58,58) 66%, rgb(255,66,63) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,rgb(0,0,0)), color-stop(43%,rgb(119,31,31)), color-stop(66%,rgb(188,58,58)), color-stop(100%,rgb(255,66,63))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(0,0,0) 8%,rgb(119,31,31) 43%,rgb(188,58,58) 66%,rgb(255,66,63) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(0,0,0) 8%,rgb(119,31,31) 43%,rgb(188,58,58) 66%,rgb(255,66,63) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(0,0,0) 8%,rgb(119,31,31) 43%,rgb(188,58,58) 66%,rgb(255,66,63) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(0,0,0) 8%,rgb(119,31,31) 43%,rgb(188,58,58) 66%,rgb(255,66,63) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ff423f',GradientType=0 ); /* IE6-9 */}


.mobileonly {visibility:hidden;}
.desktoponly {visibility:visible}

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover, a:hover.menuheader, a:hover.menuheader span.small, a:hover.Footnav { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */

a:hover, a:active { outline: 0; }

.clearfix, .clearfix:before, .clearfix:after{
  clear:both;
}
.clearfix:before, .clearfix:after{
  content:"";
}
 
/* =============================================================================
TEXT
   ===============================#F7EEDF=========================================== */
body, button, input, select, textarea { font-family: Times, Times New Roman, serif; color: #ffffff; }

.text { font-family: Arial, helvetica, sans-serif; color:#000000; font-size:18px;}

.texthead{font-family: Arial, helvetica, sans-serif; color:#000000; font-size:20px; margin-bottom:12px; }
	 
.textinfo{ font-family: Arial, helvetica, sans-serif; color:#bbada4; font-size:20px; }

h1{ font-size:100px; padding-bottom: 12px; padding-top:12px; margin-top:0px; margin-bottom:0px;} 

h2{ font-size:22px; margin-top:-30px; margin-bottom:35px;}

h3{ font-size:24px; }

h4{ font-size:22px;}

.phone{font-size:16px; text-decoration:none; color:#bbada4;  margin-left:12%;  margin-right:12%; }
.larger{ font-size:20px;}
.about, p.about{color:#000000; text-align:left; line-height: 20px; font-size:20px;}


/* =============================================================================
   HOME PAGE
   ======================================================================

body.home #sidenav{
	z-index:4;
	margin-top: -60px;
}==== */
body.home .album {
	min-height:775px;
	position:relative;
} 
body.home .album .image-wrapper-h{
	height:auto;
	position:absolute;
	margin:20;
	padding-top:6px;
	padding-bottom:20px;
	padding-right:24px;
	}
body.home .album .image-wrapper-h .shadow{
	height:auto;
	max-width:360px;
	margin:0 auto;
	box-shadow: 6px 8px 16px hsla(0,0%,0%,0.90);
	} 
body.home .album #imageONE{height: 314px; max-width: 190px; z-index: 2; top: 240px; left: 40px;} 
body.home .album #imageTWO{height: 343px; max-width: 269px; z-index: 3; top: -15px; left: 600px;} 
body.home .album #imageTHREE{  height:386px; max-width:258px; z-index:0; top:-16px; left:856px;} 
body.home .album #imageFOUR{  height:188px; max-width:253px; z-index:2; top:360px; left:574px;} 
 body.home .album #imageFIVE{  height:260px; max-width:203px; z-index:4; top:250px; left:300px;} 
 body.home .album #imageSIX{  height:246px; max-width:332px; z-index:1; top:540px; left:10px;}
 body.home .album #imageSEVEN{  height:386px; max-width:247px; z-index:1; top:220px; left:1120px;} 
 body.home .album #imageEIGHT{  height:246px; max-width:314px; z-index:4; top:550px; left:1080px;}
 body.portraits #imageEIGHT .shadow{max-width:352px;} 
 body.home .album #imageNINE{  height:272px; max-width:215px; z-index:0; top:400px; left:858px;}
 body.home .album #imageTEN{  height:383px; max-width:256px; z-index:2; top:-40px; left:300px;} 
 body.home .album #imageELEVEN{  height:224px; max-width:329px; z-index:2; top:570px; left:510px;} 
 body.home .album #imageTWELVE{  height:242px; max-width:359px; z-index:1; top:-30px; left:1070px;} 

body.portraits #imageFIFTEEN, body.portraits #imageSIXTEEN{max-width:390px;} 
 body.portraits #imageFIFTEEN .shadow, body.portraits #imageSIXTEEN .shadow{max-width:352px;}
/* =============================================================================
   STRUCTURE  top down
  ================================== =====#FFFEFA=================================== 
*/
  
 .doublewide{margin-left:auto; margin-right:auto; text-align:center; max-width:1430px; }
 body.home #textblock {margin-top:60px!important;}
 
/*=========================== HEADER ====================#441046================= */

	header {
  position: fixed;
	margin-top: 0;
	margin-bottom:0;
  top:0;
  width:100%;
  alignment-baseline:middle;
  z-index:1000;
  background:#000000;
  height: 5vw;
  display: inline;
  overflow: visible;
} 
   
div#logos{
	alignment-baseline:middle;
	align: center;
	}
#logos{
	line-height: 3vw!important;
	margin-top:3vh;

	}
#folio, #wrapper {
	margin-top:8vw;

	vertical-align:top;
	min-height: 1200px;
	}		 


a.MainnavTitle{
	font-size: 4.2vw!important;
	letter-spacing: .05em;
	margin-bottom: -12px;
	}
a.MainnavSubTitle {
	font-size: 1.7vw!important;
	margin-left: 15%;
	margin-bottom:1.5%;
	letter-spacing: .05em;
	color:#879eb5;
	}
a.MainnavTitle, a.MainnavSubTitle {
	vertical-align: middle;
	text-decoration: none;
	font-family: Times, Times New Roman, serif;
	font-weight: normal;
	font-style: normal;
	}

a.MainnavTitle, a:visited.MainnavTitle, a:hover.MainnavTitle { color: #37104c; -webkit-text-stroke: 1px #fef1d1; }
a:hover.MainnavSubTitle { color: MediumSlateBlue;}
a:hover.MainnavTitle {text-shadow: -6px 3px 8px MediumSlateBlue, 2px -1px 4px Gold;}

  /* ==++++++++ HEADER +++++++++== */

a.Mainnav{
	color: #ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b6975+0,92bedb+100 */
background: #879eb5;/* Old browsers */
background: -moz-linear-gradient(top, #4b6975 0%, #86a8c9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4b6975 0%,#86a8c9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4b6975 0%,#86a8c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b6975', endColorstr='#86a8c9',GradientType=0 ); /* IE6-9 */}
a:visited.Mainnav{ color: #fef1d1;}
a.pTWO {text-decorcation: none!important;}


a:hover.Mainnav { color: #000000; opacity:1; background: #f2f0e1;}
a:link.Mainnav, a:visited.Mainnav, a.Mainnav, a:hover.Mainnav {
	display: block;
	width: 265px;
	text-align: justify;
	padding: 4px;
	padding-left: 1vw;
	text-decoration: none;
	margin-left:2vw;


	}


.Mainnav {
	font-size: 26px;
	box-shadow: 6px 8px 16px hsla(0,0%,0%,0.90);
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	border-width:0px;
	font-family: Times, Times New Roman, serif;
	color:#ffffff;
	text-decoration:none;
	  font-weight:normal;
	}

ul { list-style-type: none; margin: 0; padding: 0; }




=============================================================================
   Main Side Navigation
   ========================================================================== */

#sidenav{

	width: 250px;
margin-left:2vw;
	position:absolute;
	margin-top:-1vh;

	}
	
.navbutton li{margin-bottom: .4vh;}

body.home #homelink2, body.studio #studiolink, body.exhibitions #forceslink, body.architectural #architecturallink, body.art #artlink, body.forces #forceslink, body.marine #marinelink, body.music #musiclink, body.photo #forceslink, body.portraits #portraitslink, body.special #speciallink, body.about #aboutlink {
		background:hsla(358,89%,93%,0.30);
		}
/*- ==================== end main side navigation ==================   -*/

/*- ============================  CONTENT / PAGES =========	box-shadow: 6px 6px 10px #000000;=================================  -*/

/* ====================== Album and continued CONTENT ================ */
	.album{
	max-width:1200px;
	min-width:300px;
	padding: 10px;
	float:left;
	text-align: left;
	vertical-align:top;
	min-height:700px;
	padding-left:300px;
	}
/*
  figure {
  border: 1px;
	position: relative;
	display: inline-block;
	margin:.2vw;
	width: fit-content;
	vertical-align: top; 
}
figure img {
	vertical-align: top;
	border-radius: 14px;
	object-fit: contain;
	width: 100%;
	height: 300px;   
}
figure figcaption {
	  contain: inline-size;
    border: 1px;
    text-align: center;
		font-size: 10px; 
		font-family: Verdana, Arial, sans serif;
		padding-top: 4px;
		overflow-wrap: normal;
		max-width: 100%;
		color: #fef1d1;
		text-shadow:2px 2px 3px Black;
		}
figure .shadow, .shadow{
	min-height:300px;
	width: auto;
	border-radius: 14px;
	box-shadow: 12px 18px 28px #000000;
	}
#wordbox{
	border: 1px;
  justify-content: center;
	width: auto;
	vertical-align: top;
  flex: 1;     
  overflow-wrap: normal;
	position: relative;
	display: inline-block;
	margin:.2vw;
	width: fit-content;
}
#fakeblock{
	vertical-align: top;
	border-radius: 14px;
	width: auto;
  padding: 30px;
	background: #fdeab4;
  writing-mode: horizontal-tb;
  contain: inline-size;
	min-height:240px;
}
#fakeblock p{}
	*/
/* =================================TEXT================================ */


/*
.album .image-wrapper-h{
	height:auto;
	max-width:290px;
	position: relative;
	margin: 20;
	display: inline-block;
	padding-top:6px;
	padding-bottom:20px;
	padding-right:24px;
	}
.album .image-wrapper-h .shadow{
	height:auto;
	max-width:252px;
	margin:0 auto;
	box-shadow: 6px 8px 16px hsla(0,0%,0%,0.90);
	} 
.album .image-wrapper-v{
	width:auto;
	max-height:290px;
	max-width:290px;
	position: relative;
	margin:10;
	display: inline-block;
	}
.album .image-wrapper-v .shadow{
	width:auto;
	max-height:252px;
	max-width:252px;
	margin:0 auto;
	box-shadow: 6px 8px 16px hsla(0,0%,0%,0.90);
	}
	*/

#textblock {  width:80%; position:relative; margin-top:-10px; color:#000000; text-align:justify; background: #f2f0e1; height:auto;  position: relative;   margin-bottom:20px ;  padding-top:6px; padding-left: 3%; padding-bottom:10px; padding-right:3%; height:auto;     box-shadow: 6px 8px 16px hsla(0,0%,0%,0.90);}

#textblock p{line-height: 18px; font-size:18px;}

#textblock p.emph{line-height: 20px; font-size:20px;}

/* =============================================================================
   FOOTER
   ========================================================================== */
	/* ============== Footer Navigation +++++++++++++++++ */
	.copy1{font-size:12px; font-weight: bold; padding-right:3vw; padding-bottom: 12px;}

.copy2{font-size:12px; font-weight: bold; padding-bottom: 12px;}

.copy3{font-size:8px; line-height: 12px; }

.copy4, footer .nonmobile{font-size:14px; font-weight: bold;}

a .copy4{color: #fef1d1;}

.album .footer {
	text-align:center;
	width: 156px;
	padding-top: 7px;
	padding-bottom:7px;
	border-top: solid 1px #333;
  color: #fef1d1;
	font-weight:bold;
	}
.album .footer a.gallerylinks{
	font-size:14px;
	color: #fef1d1!important;
	}
footer{
	position:fixed;
	bottom: 0;
	height: 20px;
	width: 100%;
	margin-top: 0;
	margin-bottom:0;
	background: #37104c; 
	font-color:#F7EEDF;
  font-family: Arial, Helvetica, sans-serif;
	z-index:2000;
	padding-top:8px; padding-bottom:8px;
	}
footer a{	color:#879eb5;}

 .br-mobile { display: none; }
 .nonmobile { display: inline-block; padding-right: 2vw; }
 
.left{text-align:left; padding-right:20%;}

.right{text-align:right; padding-left:20%;}

body.home #homelinkFOOT, body.map #maplinkFOOT, body.foodmenu #menulinkFOOT,body.contact #contactlinkFOOT , body.videoslist #videoslinkFOOT, body.about #aboutlinkFOOT{color:#4F5388; text-decoration:overline; text-decoration:underline;}


/* =============================================================================
   Embedded content
   ========================================================================== */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }


/* =============================================================
 MOBILE and such Structure
+++++++++++++++++++=============================----- */

@media only screen and (max-width: 1480px){
   }
   
/*------------ IPAD 1024 ----------------*/
.navbutton li{margin-bottom: .4vh;}


@media only screen and (max-device-width: 1024px){
	
	body{ -webkit-tap-highlight-color: transparent;
        -webkit-overflow-scrolling: touch;
	}
header { height: 15.5vw;}
#logos{
	line-height: 5.6vw!important;
	margin-top: 2.8vw;
	margin-left: 0;
	}

a.MainnavTitle{
	font-size: 8vw!important;
	margin-bottom: 0;
	}
a.MainnavSubTitle {
	font-size: 3.3vw!important;
	margin-left: 0;
	}
	body.home .album #imageONE{height: initial; max-width: initial; z-index: initial; top: initial; left: initial; } 
body.home .album #imageTWO{height: initial; max-width: initial; z-index: initial; top: initial; left: initial; margin-top: 40vh;} 
body.home .album #imageTHREE{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
body.home .album #imageFOUR{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
 body.home .album #imageFIVE{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
 body.home .album #imageSIX{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;}
 body.home .album #imageSEVEN{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
 body.home .album #imageEIGHT{  height:initial; max-width:initial; z-index:initialinitial; top:initial; left:initial;}
 body.portraits #imageEIGHT .shadow{max-width:initial;} 
 body.home .album #imageNINE{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;}
 body.home .album #imageTEN{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
 body.home .album #imageELEVEN{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
 body.home .album #imageTWELVE{  height:initial; max-width:initial; z-index:initial; top:initial; left:initial;} 
}

}

/*------------------------ max-width: 800px -------------------*/
@media  only screen and (max-width: 800px) {
}

/*----------------------max-width: 680px ------------------*/
@media  only screen and (max-device-width: 680px) {
.mobileonly {visibility:visible;}
.desktoponly {visibility:hidden;}
.br-mobile { display: block; }
.nonmobile { display: none; }

	/*
a.MainnavSubTitle { margin-left: 25%; margin-top:-18px; margin-bottom:1.5%; letter-spacing: .05em;}     	top: 5vh;
*/
.Mainnav {
	margin-right:2.5%;
	margin-bottom:0;
	
  font-size: 5vw;
	}
	

a:link.Mainnav, a:visited.Mainnav {
	width: 90%;
  text-align: center;
	padding: 0px;
	text-decoration: none;
	  opacity: 0.8;
	}
.sidenav-content {
  min-width: 220px;
  padding: 12px 16px;
  }
#sidenav{

  padding-left: 4vw;
  padding-right: 4vw;
  width: 92vw;
		height:auto;
	position:relative!important;
	margin-top:0px;
	display: inline-block;
  }


 body.home #sidenav{ margin-top:1vh; position:relative!important; inline-block; }
 body.home .album .image-wrapper-h{ position: static!important;  display: inline-block!important; }
 #folio {
	margin-top:0px;
	text-align: left;
	vertical-align:top;
	min-height: 400px;
	}
.album{
  padding-left:2vw;
  padding-right:2vw;
	padding-top: 8.1vw;
		gap: 2vw;
  display: flex;
	flex-direction: column;
  flex-wrap: wrap;	
  max-width:100%;
  min-width:300px;
  text-align: justify;
  min-height:70vh;
	  flex-wrap: wrap;
		  vertical-align:top;
  }

   figure {
	position: relative;
	display: inline-block;
  border: 1px;
	margin:.2vw;
	width: fit-content;
	vertical-align: top; 
	padding-top:.2vw;
	padding-bottom:.3vw;
	padding-left:0;

  }
figure img {
	vertical-align: top;
	object-fit: contain;
	height: auto;
	width: 95vw; 
	}
figure figcaption {
	  contain: inline-size;
    border: 1px;
    text-align: center;
		font-size: 10px; 
		font-family: Verdana, Arial, sans serif;
		padding-top: 4px;
		overflow-wrap: normal;
		max-width: 100%;
		color: #fef1d1;
		text-shadow:2px 2px 3px Black;
		}
figure .shadow, .shadow{
	width: auto;
	border-radius: 14px;
	box-shadow: 12px 18px 28px #000000;
	height: auto;
	min-width:300px;
	}
#wordbox{
	border: 1px;
  justify-content: center;
	width: auto;
	vertical-align: top;
  flex: 1;     
  overflow-wrap: normal;
	position: relative;
	display: inline-block;
	margin:.2vw;
	width: 100%;
}
#fakeblock{
	vertical-align: top;
	border-radius: 14px;
	width: auto;
  padding: 25px;
	background: #fdeab4;
  writing-mode: horizontal-tb;
  contain: inline-size;
	min-height:240px;
}

footer{
	height: 40px;
	margin-top: 0; margin-bottom:0;
	padding-top:8px; padding-bottom:8px;
	}


/*------------	max-width: 480px ----------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
}
/*--------------	max-width: 450px ----------------------*/
@media (max-width: 450px) {
	    }
/*--------------- max-width: 350px --------------------*/
@media (max-width: 350px) {
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { }

/* ==|== print styles ======================================================= */
 
 @media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .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; } 
  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; }
  .mobileonly {visibility:hidden;}
.desktoponly {visibility:hidden;}
}
/*------------------------------------*\
	IPHONE
	
.home
.doublewide
	#logos
.center
	#homelink
.MainnavTitle
	#aboutlink
.MainnavSubTitle
	#folio
.doublewide
	#sidenav
.navbutton
	#studiolink
	#portraitslink
	#journalismlink
	#architecturallink
	#musiclink
	#artlink
	#marinelink
	#speciallink
	#forceslink
	#aboutlink
.Mainnav
    #contact
.copy
.phone
.textinfo
.album
.image-wrapper-h
.image-wrapper-v
   #imageONE
   #imageTWO
.textblock
.center
    #footernav
.navbutton
    #studiolinkFOOT
.Footnav
    #portraitslinkFOOT
    #journalismlinkFOOT
    #architecturallinkFOOT
    #musiclinkFOOT
    #artlinkFOOT
    #marinelinkFOOT
    #eventlinkFOOT
    #forceslinkFOOT
    #aboutlinkFOOT
\*------------------------------------*/