body {font-family: Verdana, Arial,Nimbus Sans,sans-serif;
font-size: 1.1em; margin: auto; 
width: 100%; color: #fff;
background: #000;   }

a:link{color: white; text-decoration: none;}
a:visited{color: white; text-decoration: none;}
a:hover{ color: gold;}
a:active{ color: white;}

 a[href^="tel:"]:before { content: "\260e";  margin-right: 10px; } /*  add phone icon */

.topnav a:link{color: white; text-decoration: none;}
.topnav a:visited{color: white; text-decoration: none;}

.shadow { font-size: 30px; color: #ff11b3; padding: 20px 0; text-shadow: 3px 3px 4px black }

button { background-color: black; border: none;}
.announce { margin-left:auto; margin-right:auto; 
width: 50%; border: 1px solid yellow; }
.large {color: #eacc7f; font-size: 2em; }

@font-face        /* user specified font in url */
{ font-family: script; src: url(misc/amadeus.ttf); }
.script { font-family:script; color: #000; font-size: 1.7em; }

.script_gold { font-family:script; color: #eacc7f; font-size: 2em; } /*40px */
.script_red_sm { font-family:script; color: red; font-size: 25px }
.script_gold_med { font-family:script; color: #eacc7f; font-size: 30px }
.script_gold_sm { font-family:script; color: #eacc7f; font-size: 25px }
.script_sm  { font-family:script; color: #262626; font-size: 30px }


/* CSS rules over-riden top to bottom (bottom has highest precedence)  */

/* start mobile rules */
@media screen and (min-width:200px) and (max-width:500px) {
body { width: 100%; font-size: 1em; }
#wrapper2{ width: 100%;}
#nav1 {visibility: hidden;}	
#headergold { background: url(misc/logo320.png) no-repeat center center; height: 100px;} 
#headergold > .script_gold_sm, .tr {display:none; } //descendant selector
#leftcol{ width: 90px; }   /* for main */
#leftcol.span.script_gold{font-size: 1em;}
 	div.flexe {width: 100%;}	
	#wrapper2 { width: 100%;}
  .script_gold { font-family:script; font-size: 1.5em; }
  div.rotabg {width: 95%; padding: 0.5em;}
  .rotabg p.rotabg {width: 95%; padding: 0.5em;}
  table.rota {width: 95%;}
  
.gallery { width: 100%; margin-bottom: 2em;}
.gallery ul{width: 100%; padding:0; display: inline-table; }
.gallery li  { width: 140px;  height: 200px;     }  
#sysdate, #time {font-family: Ubuntu; font-size: 1.4em;}
 div.gothbg p.script_gold { font-family: Ubuntu; font-size: 1em;}
/*.flexitem {margin: 0.5em;} */
#g1, #g2, #g3, #g4, #g5 img {width: 22%; height: 190px; margin: 0.2em;}
#n1,#n2,#n3,#n4, #n5 { font-size: 1.1em; }	

#center {width: 100vw; margin-left:-20%; margin-bottom: -10%;}	
#left {position: relative; top: 500px; left: 50px; width:30%; }
#right{position: relative; float:left;  width:100%; margin:2em; top: 500px; }
#right img {opacity: 1.0;}
.bio{position: relative; top:340px; }
	} 	  /* end mobile media queries */

@media screen and (min-width:501px) and (max-width:640px){
body { width: 100%; font-size: 1em; }
#wrapper2{ width: 100%;}
#nav1 {visibility: hidden;}	
#headergold { background: url(misc/kmrlogo600.png) no-repeat center center; height: 100px;} 
#headergold > .script_gold_sm, .tr {display:none; }
#nav1 {visibility: hidden;}
	}
	

/* large screen rules */
@media screen and (min-width:641px) {
	#headergold {height: 150px; background: url(misc/kmrgold.png) no-repeat center center;} 
		.topnav {visibility: hidden;}
.gallery li{ width: 150px; height: 210px;}
#left {width: 25%;}
}


@media screen and (min-width:501px) {
	.rotabg{ width: 75%; padding: 1em;}
}
	

#left {
	float: left; 
	/*width: 25%;*/
	margin: 3em 0 0 0;
   padding: 0px;
   
  border-radius: 10px;
  /* background-color: #111;*/
}

#center {float: left; width: 50%;
   text-align: center;}
      
#center .name {
font-family: script; color: #eacc7f; font-size: 2em;
text-align: center;
padding-left: 0;}
      
@media (min-width:500px){
#right {
	float: right;
	width: 25%;	
	height: 400px;
	margin: 3em 0 0 0;
	padding-bottom: 1em;
   text-align: center;
   border-radius: 10px;
   background-color: #111;
   }
}
#right img { transition: all .2s ease-in-out; } 
#right img:hover {transform: scale(1.3);
border-radius:5px;
 }  

.topnav {
  float: right;
  overflow: hidden;
  z-index: 1;
  background-color: #2a2529;
  position: absolute; right: 0; top: 0; 
  width: auto; }

.topnav #myLinks {display: none;}

.topnav a {  color: white;
  padding: 17px 17px;
  text-decoration: none;
  font-size: 17px;
  display: block;}

.topnav a.icon {  background: #000;
  display: block;
  position: absolute;
  right: 0;  top: 0;}

.topnav a:hover {  background-color: #505457;
  color: black;}

.active {  background-color: #000;  color: white;}


#g1, #g2, #g3, #g4, #g5, #g6 img {width: 140px; height: 190px; border: 2px solid gold; border-radius: 10px;}
#n1,#n2,#n3,#n4, #n5 { display: block; position:relative; top:5px;  left:0px; margin-bottom:1em;  }		
 /*#n1,#n2,#n3,#n4 a:link, a:visited {text-decoration: none;}	*/	
      
.flexe {	display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;			
			/*align-content: space-around;*/
			}

.flexitem{ margin: 0.5em 0.32em 1.5em 0.32em;
padding-top:0.5em; 
width: 140px;
height: 190px;	}

.flexitem img { width: 140px; border-radius: 1em; }

.flexname{ /*position: relative; left: -40%;*/
width: 140px; height: 20px;
font-family:Ubuntu;  font-size: 1em;
 text-shadow: 3px 3px 4px black;}


#gallerycontainer {  position: relative;   }

.gallery  {	width: 80%;	margin: auto;}
.gallery ul{width: 100vw; margin-left: -10%; }


.gallery li  {
	display: inline-table;
	 background-color: #333;
	 color: #fff;
	 margin: 10px;
    padding: 5px;
   /* width: 150px;
    height: 210px;*/
    border-radius: 8px;
    list-style-type: none; }





.gallery li img {
opacity: 1;
width: 140px;
height: 190px;
border: 3px solid #000;
}

.gallery li a img:hover {
	 animation: rotateY 1s linear 2s 1;
    -webkit-animation: rotateY 1s linear 2s 1;
	 border: 3px solid #eacc7f;
	 color:blue; }

.gothbg {
margin: auto;
display: block;
text-align: center;
background: #111; opacity: 0.8;
width: 85%;
height: auto;
border-radius: 20px;
padding: 0.5em;
border-radius:5px;
color: white;
}


#wrapper2 {
  width: 90%;
  background: url(misc/back.jpg) no-repeat top center; opacity:0.2; min-height:1000px; 
  position: absolute; top: 0; 
  z-index: -1;
  border-bottom-right-radius: 90px;
  padding: 11em 10px 0 10px;
}



#headergold .tr{
float: right;
font-family:script; color: #eacc7f; font-size: 25px;
}

.pic {
float: left;
width: 310px;
height: 365px;	
text-align: left;
}	

.scale {  max-width: 100%; height: auto; }  
	
	.buttons {
width: 70px;	float: left;
margin:  1em; font-size: 1.5em;
 background-color: lightgray;
 text-align: center;
 color: #000; padding: 5px;
 border-radius: 20px;		
		}

.buttons a:link, a:visited {
  text-decoration: none;
  color: #333; }

.buttons a:hover,  .buttons a:focus {  color: white; }

/* Required for pages that need active links */
#wrapper1 {
	margin: auto;
	float: left;
  width: 880px;
 border-radius: 15px;
        }

.notice {
	width: 70%;
	text-align: left;
	padding-left: 1em;
border: solid red 2px;
font-size: 1.2em;
}


.center { margin-left: auto;
			margin-right: auto;
			text-align: center;} 
         

h1 { font-family: script;
     color: #eacc7f;
     font-weight: normal;
     text-align: center;}
   
   
.stat {  margin: auto; margin-bottom: 2em;  }

table.stat {
  width: 90%;
  border-collapse: collapse;
  padding: 2px;
  background-color: #111;
}

table.stat td {	border: 1px solid #000; padding: 5px;  }  
table.stat img { width: 40px; height: 25px;} 
/*  End girls pages */
             
           




#leftcol {
float: left;
	margin-top:  4em;
   margin-right: 1em;
   padding: 10px;
  /* width: 90px;*/
  border-radius: 20px;
   background-color:  #111;
   text-decoration: none;
	}

#leftcol li { list-style-type:  none; 
margin:  0.5em 0; }

#leftcol img {
	height: 80px; width: 60px; 
	border-radius: 10px; }


#leftcol a:link, #leftcol a:visited {
  text-decoration: none;
  color: #fff;
}

#leftcol a:hover {
text-decoration: none;
color: white;	
	}

.hideimg span {
  position: absolute;
  visibility: hidden;	
	}
	
.hideimg:hover  span {
	visibility:  visible; 
	}



#nav1 {
	margin: 0 0 0 4em;
	text-align: center;
	position: absolute; top: 150px; 
	width: 70%;
	color: white;
	font-size: 1.3em;
	/*vertical-align: middle;*/
	height: 32px;
	border-bottom: 2px solid black;
		}

#nav1 li {
	position: relative; top: -20px;
	list-style-type: none;
	display: inline;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
		}	


#nav1 a:link, #nav1 a:visited {
  text-decoration: none;
  color: white;
}

#nav1 a:hover, #nav1 a:focus {
color: #eacc7f;
}


.small {
	font-size: 0.8em;
	color: black;
}

.highlight {
	margin 1em;
	font-size: 1.5em;
   border: 1px double blue;
   padding: 5px;
   color: #ff35b4;
   background-color: #fff;
   border-radius: 15px;
	}



.bio {
	   margin-left: auto;
	   margin-right: auto;
	   margin-top: 5em;
	  	width: 75%;
   	height: 150px;
   	/*background: #111; opacity: 0.8;*/
   	border-radius: 15px;
   	padding: 20px;
	}



.rotabg {margin: auto;
background: #111; opacity: 0.8;
border-radius: 20px;}

.rota {margin: auto;
background: #111; opacity:0.8; 
border-collapse: collapse;
border-radius: 10px; }
  
  .rota td {
  	word-spacing: 1em;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid #000;
     }

.td1 { border: 1px solid #000;  }

.rota th {
	color: #eacc7f;
	font-weight: normal;
	font-size: 0.9em;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 2px; 
   }


 .rotY { 
  width: 20px;
  animation: rotateY 1s linear 2s 1;
  -webkit-animation: rotateY 1s linear 2s 1;
   }
 
 @keyframes rotateY {
  from { transform: rotateY(0deg);   }
  to   { transform: rotateY(360deg); }
  }

 @-webkit-keyframes rotateY {
  from  { -webkit-transform: rotateY(0deg);   }
  to    { -webkit-transform: rotateY(360deg); }
  }



.slide1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }
    
    @-moz-keyframes slidein {
      from {  color: blue; margin-left:80%;  width:900px; }
      to { margin-left:20%; width:900px;  }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:80%;
        width:900px;
      }
      
      to {
        margin-left: 20%;
        width:900px;
      }
    }

.pstn10 { position: relative;
         margin-left: 20%; }

.slide {
	position: relative;
 -webkit-animation: slide 5s; /* Chrome, Safari, Opera */
    animation: slide 5s;
     }

/* Chrome, Safari, Opera */
@-webkit-keyframes slide {
    0%   {left:0px; top:0px;}
    50%  {color:yellow; left:200px; top:0px;}
    100%  {color:yellow; left:200px; top:0px;}
        }

/* Standard syntax */
@keyframes slide {
    0%   {left:0px; top:0px;}
    50%  {color:yellow; left:200px; top:0px;}
    100%  {color:yellow; left:200px; top:0px;}    
    }

.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate (90deg);
}

.rot90  { vertical-align: middle;  text-align: center; }

.vert {
	color: #fff;
	float: right;
	padding: 0 0 0 0;
	margin-left: 15px;
	vertical-align: middle;;
	transform: rotate(90deg);
	transform-origin: right top 0;
}
	
@keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-moz-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% { background-position: 500px 1000px, 400px 400px, 300px 300px;}
          }


@-ms-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

#snow {
		background-image: url(snow_a.png), url(snow_b.png);
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}


#enlarge {	margin: 0;
	border: solid 2px gold;
   border-radius: 20px;}