
/* WEB FONTS */

@font-face {
	font-family: 'Jokerman';
	src: url('/css/fonts/Jokerman-Regular.eot');
	src: url('/css/fonts/Jokerman-Regular.eot?#iefix') format('embedded-opentype'),
		url('/css/fonts/Jokerman-Regular.woff') format('woff'),
		url('/css/fonts/Jokerman-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Tempus';
	src: url('/css/fonts/TempusSansITC.eot');
	src: url('/css/fonts/TempusSansITC.eot?#iefix') format('embedded-opentype'),
		url('/css/fonts/TempusSansITC.woff') format('woff'),
		url('/css/fonts/TempusSansITC.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'AmadeusRegular';
    src: url('/css/fonts/Amadeus-webfont.eot');
    src: url('/css/fonts/Amadeus-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/Amadeus-webfont.woff2') format('woff2'),
         url('/css/fonts/Amadeus-webfont.woff') format('woff'),
         url('/css/fonts/Amadeus-webfont.ttf') format('truetype'),
         url('/css/fonts/Amadeus-webfont.svg#amadeusregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


.Amadeus { font-family: AmadeusRegular; }
.Jokerman { font-family: Jokerman; }
.Tempus { font-family: Tempus,sans-serif; }
.Tahoma { font-family: Tahoma,sans-serif; }


html { font-size: 1.25rem; }
a { 
  color:cyan; 
  font-weight:bold;
  text-decoration:none; 
}
a:hover, a:focus { 
/*   color:yellow; */ 
  text-decoration:underline;
  text-shadow:0 0 3px black;
}
body, body.bg-lynda { 
	background-color: #fd404e;
	padding: 9rem 1rem 1rem;
	font-family: Tempus,sans-serif;  
	height: 100%;
	margin: 0;
}

body.bg-black { 
  background-color: black;
  padding-top: 0;
}

header, header img {
  margin:0;
  padding:0;
  width: 100%;
}
h1 {font-size: 1.5rem;}
h2 {font-size: 1.2rem;}
h3 {font-size: 1.1rem;}
h4 {font-size: 1.0rem;}
h5 {font-size: 0.9rem;}
h6 {font-size: 0.7rem;}

h1,h2,h3,
h4,h5,h6 {font-family: Tempus;}

a.skiptocontent {
	padding: 6px;
	position: absolute;
	top: -40px;
	left: -10000px;
	color: white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	border-bottom-right-radius: 8px;
	background: #BF1722;
	-webkit-transition: top 1s ease-out;
	transition: top 1s ease-out;
	z-index: 100;
}
a.skiptocontent:focus
{
position:static;
width:auto;
height:auto;
}

#container {
 background-color:black;
 height: 100%;
 width: 100%;
}
#theGIF {
  height: 9rem; 
  left: 0;
  position:absolute;
  top: 0;
  width: 100%; 
  }
#title-header {
  color: cyan;
  font-family: Tempus,sans-serif;
  font-size: .79rem;
  text-align:center;
}
.artist-header {
  font-size:0.1rem;
  left:-1000px; position: relative;
}
.page { 
  display: grid;
  grid-gap: 0;
  max-width: 1200px;
  margin: 0 auto 13rem 0;
}
.cell {
  color: white;
  display: grid;
  font-family: Tempus,sans-serif;
  padding: 1rem;
  height: 100%;
  width: 100%;
  justify-self:center;
  justify-content:center;
}
.cell img.thumb {  cursor:pointer; }
#topMenu {
  display: grid;
  font-size:0.67rem;
  grid-gap: 1.125rem;
  margin: 0 0 0.3rem 0;
  width: 100%;
}

#wildly {
	z-index: 99;
	position: absolute;
	width: 18%;
	margin: 1rem 0 0 -3rem;
}
.links-cyan a, .links-cyan a:visited,
#topMenu a, #topMenu a:visited { 
  color: cyan;
  text-decoration: none; 
}
.links-cyan a:hover,
#topMenu a:hover { 
  color: cyan;
  text-decoration: underline;
  text-shadow:0 0 3px white; 
}
.red a, .red a:visited { 
  color: red;
  text-decoration: none; 
}
.red a:hover { 
  color: red;
  text-decoration: underline;
  text-shadow:0 0 1px yellow; 
}
.top-menu-link {
  color: cyan;
  font-family: Tempus,sans-serif;
  font-weight: bold;
  text-align:center;
  width: 99%; 
  /* border: 1px solid white; */
}
.top-menu-link span {display:inline-block;margin:00.3rem; 0 1rem;}
.top-menu-link.last-link { width:10%;margin:0; }
.bg-light {
 background-color:#FC7865;
}
.this-link, .this-link a {
  color:white;
  text-shadow:0 0 3px white; 
}

.black { color: black; }
a.black:hover, a.black:focus { color: #333; text-shadow: 0 0 15px #FFF; }
.all-caps {
  text-transform: uppercase;
}
.bold { font-weight: bold; }
.italics { font-style:italics; }
.centered-text, .centered { text-align:center; }
.cyan {color:#0ff;}
.red {color:red;}
.smallest {font-size: 60%; }
.smaller {font-size: 75%; }
.small {font-size: 85%; }
.larger { font-size: 110%; }
.large { font-size: 200%; }
.shadow01{text-shadow:0 0 1px #333;}
.shadow02{text-shadow:0 0 2px #333;}
.shadow03{text-shadow:0 0 3px #333;}
.hidden {
 display: none;
}
.pink-box {
	background-color: #FF464E;
	margin: 3% auto;
	padding: 0 2% 0.8rem;
	width: 64%;
}
.pink-box#dazzle {
        padding:0;
        width:99%;
}
.pink-box img {
	margin-top:1rem;
}
.pink-box#dazzle  img {
	margin-top:0;
}

.red-bg-box {
	background-color: #ff0000;
}
.redbox {
	border:1px solid red;
	margin: 3% auto;
	padding: 0 2% 0.8rem;
	width: 54%;
}
.redbox.wide {
	width: 72%;
}
.thumb-caption, .sold {
  display:block;
  font-size:0.7rem; 
  margin:0 auto;
  text-align: center; 
}
img.home-layout-left {
 width:100%;
 height:100%;
}
img.thumb:hover { opacity: 0.7; }

  .sold { 
    color:red; 
    text-transform:uppercase; 
}
.dimensions {
  display: none;
}
/* img.thumbnail {
 max-width:100%
}
img.thumbnail.landscape{
 height: 150px;
}
img.thumbnail.portrait{
 width: 150px;
}
img.thumbnail {
  cursor: pointer;
  transition: 0.3s;
}

.thumb-caption, .sold {
  display:block;
  font-size:0.6rem; 
  margin:0 auto;
  text-align: center; 
}
.thumb-caption strong {
  font-size:0.75rem;
  vertical-align:bottom;
}
.thumb-caption .dimensions {
 font-size: initial;
 margin: 3px;
 padding: 0;
}
#caption, #workNavigation {
  position:absolute;
  top:35%;
  
}
#caption {
  left: 6%;
}
#workNavigation {
  right: 6%;
}
/* .nextImg, .previousImg {
  position:absolute;
  top: 21%;
  display:inline-block;
  font-size:3rem;
  font-weight:bold;
  text-align:center;
  margin: 0 auto;
} */
.nextImg > a, .previousImg > a {
	text-decoration:none;
	vertical-align:middle;
}
.nextImg > a:hover, .previousImg > a:hover {
	color:#00fefe;
	text-decoration:underline;
	text-shadow:  rgba(0, f, f, 0.9) 0, 0, 3;
}
/* .previousImg {
  right: 80%;
  float: left;
}
.nextImg {
  left: 80%;
  float: right;
} */
.wide-margins {
  margin: 0 16%;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .page { html { font-size: 24px; } grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .page { html { font-size: 28px; } grid-template-columns: repeat(3, 1fr); }
}
/* MENU */
@media (min-width: 270px) {
  .top-menu { grid-template-columns: repeat(2, 1fr);}
  #workNavigation, #caption, .close {
    	font-size: x-small !important;
    }
#caption {
    	left: -22% !important;
    }    	
}

@media (min-width: 479px) {
  .top-menu { grid-template-columns: repeat(3, 1fr);}
  #workNavigation, #caption, .close {
    	font-size:0.5rem  !important;
    }
    #caption {
    	left: -18% !important;
    }
  /*  .close {right:-6%;} */
}

@media (min-width: 600px) {
  .top-menu { grid-template-columns: repeat(5, 1fr);}
  #workNavigation, #caption, .close {
    	font-size: small !important;
  }
  #caption {
    	left: -15% !important;
    }
   /* .close {right:0;} */

}
@media (min-width: 900px) {
  #topMenu {  grid-template-columns: repeat(9, 1fr);}
  #workNavigation, #caption, .close {
    	font-size: initial !important;
  }
  #caption {
    	left: -3% !important;
    }
  /*  .close {right:6%;} */
}
