@import url('https://fonts.googleapis.com/css?family=Karma:500,600|Slabo|Merienda');
@charset "utf-8";
/* CSS Document */
.fbox { 
       display: flex;
	   max-width: 95%;
	   left: 2em;
	   top:9.1em;
	   position:absolute;
	   justify-content:space-between;
	   flex-wrap:wrap;
	   align-items: center;
      }

.lrpanelbox {
	   display: flex;
       position:absolute;
	   justify-content:flex-end;
	   align-items:center;
	   flex-wrap:wrap;
	   flex-direction:column;
	  } 
	
.blpanelbox {
	   display: flex;
       position:absolute;
	   left:0px;
	   top:3px;
	   flex-direction:row;
	   justify-content:flex-start;
	   align-items:center;
	  }
	  	  
.brpanelbox {
	   display: flex;
       position:absolute;
	   top:3px;
	   flex-direction:row;
	   justify-content:flex-end;
	   align-items:center;
	  }
	  
.slotbox{
	   display:flex;
	   justify-content:center;
	   position:relative;
	   align-items:center;
	   margin-bottom:5px;
	  }
	  
.ltbox{
	   display:block;
	   position:absolute;
	   }
	   
.rtbox{
	   display:block;
	   position:absolute;
	   }	   
	  
.lrtimage
      {
		border-radius:7px;
		position:absolute;
	  }	  
	
.indic	
     {
	   position:absolute;
	   display:block;
	  }	
.indic:hover {opacity: 0.6;}	
		  
.itemnum
      {
	   position:absolute;
	   display:block;
	  }	
.itemnum:hover {opacity: 0.6;}	     	  
.itemnumback
      {
	   position:absolute;
       top: 0px;
	   left: -5%;
	   width:110%;
	   height:110%;
	   border-radius:30%;
	   /* specify background,opacity */
	   z-index:1;
	  }	  
.itemnumtext
      {
	   display:flex;
	   position:absolute;
       top: -13%;
	   left:0px;
	   width:inherit;
	   height:inherit;
	   opacity:1;
	   align-content:center;
	   justify-content:center;	
	   font-family:Karma,'Slabo', sans-serif;
	   z-index:2;
	}
	  
	  
.itemtit:hover {opacity: 0.4;}	     	  

.itemtit
      {
	   display:flex;
	   position:absolute;
	   align-content:center;
	   justify-content:left;	
	  /* font-family:Karma,'Slabo'; */
	   z-index:2;
	   white-space: nowrap;
	}
	
	
	
.subtit
      {
	   position:absolute;
	   display:block;
	   z-index:2;
	   /* top,left,width,height,font-size:specify */
	  }	
.subtit:hover {opacity: 0.6;}	     	  
.subtitback
      {
	   position:absolute;
       top: -5%;
	   left: -2%;
	   width:101%;
	   height:101%;
	   border-radius:20%;
	   /* specify background,opacity */
	   z-index:2;
	  }	  
.subtitext
      {
	   display:flex;
	   position:absolute;
       top: -18%;
	   left:-1%;
	   width:inherit;
	   height:inherit;
	   opacity:1;
	   align-content:center;
	   justify-content:center;	
	   font-family:'Berkshire Swash',"Comic Sans MS", cursive, sans-serif;
	   z-index:3;
	}
	  
	
	
	
	
		
.slotimage
      {
		border-radius:5px;
		margin-top:6px;
	  }

	  
.thumb
 {  height:150px; 
    margin: 0px;
	padding: 0;
	border-radius:7px;
	white-space:nowrap;
  }	
  .thumb:hover {opacity: 0.7;} 
  
.anotherthumb
 { 
    margin: 0px;
	padding: 0;
	opacity: 0.8;
	border-radius:5px;
  }	
  .anotherthumb:hover {opacity: 0.92 ; z-index:8; border-width:1px 1px 2px 2px;border-color:black;border-style: solid; 
  }  
  
.clickdiv
  { 
    position: absolute;
    margin: 0px;
	padding: 0;
	background-color:gray;
    border-width:2px;
	border-color:black;
	border-style:solid;
    opacity: 0;
  }	
  .clickdiv:hover {opacity: 0.3;}  
 
.oilthumb {
    height:150px;
	border-style: inset;
    border-width: 7px;
	border-color:#FFD500;
    margin: 0px;
	padding: 0px;
 	 }
	 .oilthumb:hover {opacity: 0.7;}
	 
.notethumb {
    height:150px;
	border-width:0px;
    margin: 0px;
	padding: 0px;
 	 }
	 .notethumb:hover {opacity: 0.7;}

.barethumb {
    height:150px;
	border-width:0px;
    margin: 0px;
	padding: 0px;
 	 }
	 .barethumb:hover {opacity: 0.7;}

	 
.jwthumb {
    height:150px;
	border-width:0px;
    margin: 0px;
	padding: 0px;
 	 }
	 .jwthumb:hover {opacity: 0.7;}
	 
.leafthumb {
    height:160px;
	width:337px;
    box-sizing: border-box;
    margin: 0px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
 	 }
	 .leafthumb:hover {opacity: 0.7;}

		
 .thumbox
  {
	 margin:25px;
	 height:166px;
	 position:relative;
  }


.slide
 {
	 background-color:black;
	 border-width:8px;
	 border-color:black;
	 border-style:solid;
	 height:150px;
	 width:auto;
	 position:relative;
 }
 
 .woodframe
   { border: 10px solid /* transparent*/;
     border-image: url("/images/oilframe.png") 46 round;
	 /*height:164px;*/
	 width:auto;
   }
   
   .noteframe
   { border: 15px solid /* transparent*/;
     border-image: url("/images/boatwheel.png") 50 round;
	 /*height:164px;*/
	 width:auto;
   }
   
   .noframe
   { /*border: 1px solid transparent;  */
     border-width: 0px;
	 width:auto;
   }
 
 .jwframe
    { border: 15px  solid;
     border-image: url("/images/jwframe.png") 49 round;
	 width:auto;
   }
   
    
 .leaframe
    { border: 15px solid;
     border-image: url("/images/leaframe.png") 55 round;
	 width:auto;
   }

 
.thitle
 { 
   color:#320C90;
   text-align:left;
   text-indent: 5px;
   position:absolute;
   display: inline-block;
   white-space: nowrap;
   /*font-size: 22px;*/
   Letter-spacing: 3px;
   line-height: 0.4;
   /*font-family:; */
 }
 
  
/* The Modal (background) */
.framodal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 1; /* Sit on top */
    /* padding-top: 50px; Location of the box */
    left: 0;
    top: 0;
    /*width: auto; 
    height: 95%;*/
    overflow: visible; 
}

.clockwise {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
	transform-origin:(center center);
	
}
/*
.woimodal {
    display: none; 
    position: absolute; 
    z-index: 1; 
    padding-top: 50px; /
    left: 0;
    top: 0;
    width: 40%; 
    height: 40%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.5); 
}*/

/* Modal Content (image) */
/*  .modal-content {
    margin:auto;
    display: block;	
	max-width:100%;
	max-height: 95%;
}*/
.modal-content {
    position:absolute;
    display: block;	
    border-radius:9px;
}

/* Caption of Modal Image */
.caption {
    display: block; 
	top: 2px;
	position: absolute;
	/*flex-direction: column;
	specify font-family: Karma,'Slabo', sans-serif;	
    text-align: left;
	justify-content: center;
	/*color:rgba(247,247,247,1.00);*/
}
.Sameline
{
Display: Inline-Block;
}

.linktemp
{
position:absolute;
top: 10px;
left: 0px;
}

.tobigicon {
    -webkit-animation-name: scaleup;
    -webkit-animation-duration: 0.37s;
    animation-name: scaleup;
    animation-duration: 0.4s;;
}	

.tosmallicon {
    -webkit-animation-name: scaledown;
    -webkit-animation-duration: 0.37s;
    animation-name: scaledown;
    animation-duration: 0.4s;;
}	

.iconlink:hover {transform: scale(1.8, 1.8);}	

@-webkit-keyframes scaleup {
    from {-webkit-transform:scale(1)} 
    to {-webkit-transform:scale(2.2)}
}
@keyframes scaleup {
    from {transform:scale(1)} 
    to {transform:scale(2.1)}
}

@-webkit-keyframes scaledown {
    from {-webkit-transform:scale(2.1)} 
    to {-webkit-transform:scale(1)}
}

@keyframes scaledown {
    from {transform:scale(2.1)} 
    to {transform:scale(1)}
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Add Animation */
.modal-content, .caption{    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
	opacity:1;
}

/* The Close Button */
.close {
    position: absolute;
    color: #f1f1f1;
    /*font-size: 36px;*/
	width:  38px;
	height: 38px;
	background:rgba(240,200,200,0.6);
    font-weight: bold;
	z-index: 9;
    transition: 0.3s;
}

.closeim{
	position:relative;
	width:34px;
	height:34px;
	left:2px;
	top:2px;
}

.close:hover,
.close:focus {
    /*color: #bbb;
    text-decoration: none;*/
	background:rgba(207,16,19,1.00);
    cursor: pointer;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
  	
p.jp {
font-size:1.6em;
}