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


#slider {display:none;}	
progress {
  width: 40%;
  display: block;
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;
}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 	
/* Center the loader */
#loader {
  position: absolute;
  left: 52%;
  top: 470px;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}





body {
background-image: url("images/BG_Top.jpg"), url("images/BG_Btm.jpg");
background-repeat: no-repeat, repeat-y;
background-color: #000;	
background-position: center top, center top;
}

#Hello {
width: 100%;
left: 0px;
right: 0px;
top: 0px;
}

#top_page {
width:100% !important;
height: 50px;
}

#Header {
width:100% !important;
height:719px;
left: 0px;
top: 0px;	
}

#title {
padding: 1px;
color:whitesmoke;
font-size: 56px;
font-family: "Constantia", "Lucida Bright", "DejaVu Serif", "serif";
font-style: italic;
text-align:center;
margin-top:-80px;
height:100px;
text-shadow: 2px 3px 10px black;
}

#Content {
width:868px;
height:1100px;
margin: auto;
padding-left:0px;
}

#Content2 {
}

.nav {
height:100px;
z-index:25;
}

.portfolio {
color:whitesmoke;
font-size: 18px;
font-weight: 100;
font-family: Droid Sans;
text-align: left;
float:left;
width:115;
height:80px;
padding-top:40px;
padding-right:55px;
}

.contact {
color:whitesmoke;
font-size: 18px;
font-weight: 100;
font-family: Droid Sans;
text-align: left;	
float:left;
width:155;
height:80px;
padding-top:40px;
}

.mid_nav {
background-image: url("images/spot.png");
background-repeat: no-repeat;
background-position: center bottom;
float:left;
width:308;
height:65px;
}

.jmdms {
text-align: right;	
float:right;
height:80px;
}

#copy {
width: 868px;
height: 566px;
position:relative !important;

}

#copy_text{
width:420px;
height: 566px;
float:left;
}


#copy_video{
width:420px;
height: 566px;
float:right;
z-index: 0;
}

.video  {
height: 100%;
width: 100%;
}  

#thumbs { 
width:868px;
height: 600px;
poistion: absolute;
}

#top_thumbs {
width:868px;
height:255px;
}


#ShowFunButton {
float:left;
width:420px;
height:255px;
margin:auto;
}


#ShowFunButtonText{
z-index:50;
position:absolute;
width:420px;
height:255px;
}


#ShowFunButtonThumb {
height:255px;
width:420px;
margin-top:0;
background-image: url("images/ShowFun.png");
background-repeat: no-repeat;
}

#YourWorldsButton {
float:right;
margin-top:-55px;
height:310px;
width:420px;
}

#YourWorldsButtonText{
z-index:50;
position:absolute;
height:310px;
width:420px;
}

#YourWorldsButtonThumb {
height:310px;
width:420px;
margin-top:0;
z-index:1;
background-image: url("images/YourWorlds.png");
background-repeat: no-repeat;
}

#CraftingImpactButton {
width:420px;
height:255px;
margin-left:0px;
}

#CraftingImpactButtonText{
z-index:50;
position:absolute;
width:420px;
height:255px;
margin-left:0px;
}


#CraftingImpactButtonThumb {
height:255px;
width:420px;
margin-top:0;
margin-left:0px;
background-image: url("images/CraftingImpact.png");
background-repeat: no-repeat;
}


#TheFansButton {
width:420px;
height:255px;
margin-right:0px;
float:right;
margin-top:-255px;
}

#TheFansButtonText{
z-index:50;
position:absolute;
}


#TheFansButtonThumb {
height:255px;
width:420px;
z-index:1;
background-image: url("images/TheFan.png");
background-repeat: no-repeat;
}


#btm_thumbs {
padding-top:28px;
width:868px;
}

/*
#slashREF {
height: 719px;
width:100%;
background-image: url("images/slashBG1.png");
background-repeat: no-repeat;
background-position: center top;
position:relative;
opacity:.5;
z-index:0;
margin-top:-35px;
}*/


/***** 
//////////////////////////////////////////////////////////////////////////////////////
/****** FOOTER AND REFERNCES ********/


.somePad {
height:28px;
}

#footer {
width:100% !important;
height:100px;
position:relative;
}

#footerNAV {
width:100%;
position:relative;
}

#footerNAV2{
padding-left:70px;
position:relative;
width:350px;
height:80px;
margin:auto;
}
#btmPage {
position:absolute;
width:100%;
height:300px;	
}

#quoteROW {
position:relative;
left:0px;
width:100%;
z-index:2;
height:111px;
padding-bottom:250px;
}

#refButtons {
width:400px;
height:100px;
margin-top:-110px;
}

#refRight {
float:right;
width:10px;
}
#refLeft {
float:left;
width:10px;
}

.w3-button {
opacity:.5;
width:40px;
height:40px;
}

.myRefs {
width:950px;
height:111px;
}

/***** 
//////////////////////////////////////////////////////////////////////////////////////
/****** PORTFOLIO SECTION ********/

#gallHeader{
height: 745px;
width:100%;
background-image: url("images/GallHeader.png");
background-repeat: no-repeat;
background-position: center top;
position:relative;
margin:0;
margin-top:-38px;
}
           
.gallCopy {
width:868px;
float:left;
}

#ShowFun {
width:868px;
margin: auto;
height:690px;
}

#YourWorlds {
width:868px;
margin: auto;
height:650px;
}

#CraftingImpact {
width:868px;
margin: auto;
height:710px;
}

#TheFan {
width:868px;
margin: auto;
height:450px;
position:absolute;
}

#jm2023_Gallery { 
height:40px;
border: 5px solid #FC0C10;
}

.Folio {
width:868px;
height:2450px;
margin:auto;
margin-top:50px;
}

#sf_gallThumbs, #yw_gallThumbs, #ci_gallThumbs, #tf_gallThumbs {
	width:868px;
	height:255px;
	position:relative;
	float:left;
	padding-bottom: 75px;
}

#sf_gallTopThumbs,#yw_gallTopThumbs, #ci_gallTopThumbs, #tf_gallTopThumbs {
	position:relative;
	width:868px;
	height:255px;
}

#sf_gallMidThumbs, #yw_gallMidThumbs {
	position:relative;
	width:868px;
	height:267px;
}

#sf_gallBtmThumbs, #yw_gallBtmThumbs {
	position:relative;
	width:868px;
	height:267px;
}

.yw_gallThumb1 {
float:left;
height:267px;
width:420px;
margin-top:0;
background-image: url("images/Gallery/Thumbs/yw_thumb1.jpg");
background-repeat: no-repeat;
cursor: pointer;
}

.yw_gallThumb2 {
float:right;
height:267px;
width:420px;
margin-top:0;
background-image: url("images/Gallery/Thumbs/yw_thumb2.jpg");
background-repeat: no-repeat;
cursor: pointer;
}

.sf_gallThumb {
float:right;
height:267px;
width:868px;
background-image: url("images/Gallery/Thumbs/sf_thumb.jpg");
background-repeat: no-repeat;
cursor: pointer;

}






.ci_gallThumb1 {
float:left;
height:267px;
width:420px;
margin-top:0;
background-image: url("images/Gallery/Thumbs/ci_thumb1.jpg");
background-repeat: no-repeat;
cursor: pointer;
}

.ci_gallThumb2 {
float:right;
height:267px;
width:420px;
margin-top:0;
background-image: url("images/Gallery/Thumbs/ci_thumb2.jpg");
background-repeat: no-repeat;
cursor: pointer;
}

.tf_gallThumb {
float:right;
height:267px;
width:868px;
background-image: url("images/Gallery/Thumbs/tf_thumb.jpg");
background-repeat: no-repeat;
cursor: pointer;
}




#copyright{
margin-bottom:0px;
position: relative;
text-align: center;
margin: auto;
width: 90%;
color:darkgrey;
font-size: 12px;
font-weight: 100;
font-family: Droid Sans;
line-height: 1;
}

#backUp {
	text-align:center;
	padding-bottom:25px;
}


/***** 
//////////////////////////////////////////////////////////////////////////////////////
/****** THUMB HOVERS ********/

#ShowFunButtonText:hover + #ShowFunButtonThumb, #YourWorldsButtonText:hover + #YourWorldsButtonThumb, #CraftingImpactButtonText:hover + #CraftingImpactButtonThumb, #TheFansButtonText:hover + #TheFansButtonThumb, .sf_gallThumb + .sf_gallThumb:hover, .yw_gallThumb1 + .yw_gallThumb1:hover, .yw_gallThumb2 + .yw_gallThumb2:hover, .ci_gallThumb1 + .ci_gallThumb1:hover, .ci_gallThumb2 + .ci_gallThumb2:hover   {
    -webkit-filter: brightness(23%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;

}


#YourWorldsButtonText:hover, #ShowFunButtonText:hover, #CraftingImpactButtonText:hover, #TheFansButtonText:hover, .sf_gallThumb:hover, .yw_gallThumb1:hover, .yw_gallThumb2:hover, .ci_gallThumb1:hover, .ci_gallThumb2:hover  {
    -webkit-filter: brightness(100%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


#YourWorldsButtonText, #ShowFunButtonText, #CraftingImpactButtonText, #TheFansButtonText {
    -webkit-filter: brightness(95%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}



#YourWorldsButtonThumb, #ShowFunButtonThumb, #CraftingImpactButtonThumb, #TheFansButtonThumb, .sf_gallThumb, .yw_gallThumb1, .yw_gallThumb2, .ci_gallThumb1, .ci_gallThumb2 {
    -webkit-filter: brightness(70%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
	
}




/***** 
//////////////////////////////////////////////////////////////////////////////////////
/****** MISC ********/


a:link, a:visited, a:hover, a:active { 
text-decoration: none;
color:whitesmoke;
}



h101 {
color:whitesmoke;
	text-shadow: 2px 2px 5px black;
font-size: 64px;
font-weight: 100;
font-family: Droid Sans;

line-height: 1;
}

h201 {
color:whitesmoke;
font-size: 32px;
font-weight: 100;
font-family: Droid Sans;
text-shadow: 2px 2px 5px black;

}

h301 {
color:whitesmoke;
font-size: 20px;
font-weight: 100;
font-family: Droid Sans;
	line-height: .5;
	text-shadow: 2px 2px 5px black;
}

p {
color: #CDCDCD;
font-size: 24px;
font-family: Droid Sans;	
	line-height: 1.2;
	text-shadow: 1px 1px 8px black;
}

/* 
Thanks CodePen Home
CSS Smooth Scroll Demo
Chris Ferdinandi
*/

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}