*  { box-sizing: border-box; 
}
body { background-color: #000033;
       color: #ffffff;
       font-family: Verdana, Arial, sans-serif; 
}
#wrapper  { background-color: #ffffff96;/* #ec9acd7c; /* #2167e9; #ffffff96*/
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
            width: 80%;
            box-shadow: 5px 5px 3px #828282;
}  
header {  background-color: #FF0000; 
}
h1 { font-family: Georgia,"Times New Roman", serif;
     padding-top: 10px; 
     padding-bottom: 10px; 
     margin-bottom: 5px;
     text-align: center;
     font-size: 3.0em; 
}
h2  { text-align: center;
      font-family: Monotype Corsiva, Lucida Calligraphy, Harrington, sans-serif;
      font-weight: bold; 
      margin-left: 10px;
      font-size: 2.0em;
}
h4  { text-align: center; 
      font-family: Georgia, 'Times New Roman', Times, serif;  
      padding-left: 10px;
}
nav { text-align: center; 
}
nav ul {list-style-type: none; 
}
nav li { display: inline; 
}
nav a { border: 2px inset #CCCCCC;
	width: 6em;
        display: inline;
	padding: 3px 25px;
	color: #FFFFFF;
	background-color: #000033;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	text-decoration: none; 
}
nav a:link { color : #FFFFFF; }
nav a:visited { color : #FF0000; }
nav a:hover { color : #33FF99;
              border: 2px outset #33FF99;
}           


.fotorama img { height: auto; margin-left: auto; margin-right: auto;
                max-width: 100%;
                display: block;
}  
.lessons img { float:right; 
               padding-left: 5px; 
               margin-right: 20px;
               box-shadow: 6px 6px 1px #828282; 
               padding-top: 5px; 
               margin-bottom: 14px;
               max-width: 100%; 
               height: auto; 
}
.center  { display: block; width: 90%;
           margin-left: auto;
           margin-right: auto;
           box-shadow: 6px 6px 1px #828282; 
}

p  { text-indent: 1.5em; 
     margin-top: 5px; 
     margin-left: 50px; 
}
#us  { float: left;  
       margin: 10px; 
       max-width: 100%;
       height: auto;
       box-shadow: 6px 6px 1px #828282;
}
#gallery  { margin-left: 8em;
}
#gallery ul { list-style-type: none; 
}
#gallery li { box-shadow: 6px 6px 3px #828282;
              display: inline-block;
              margin-bottom: 20px; 
              max-width: 100%;
              height: auto; 
}
#mobile {  font-family: arial narrow; 
            font-size: 30px; 
            text-align: center;
            display: none;
            margin-left: -45px; 
            margin-right: auto; 
            margin-top: 5px;
            margin-bottom: 10px;
            clear: both;
}
#desktop { display: block; 
           font-family: arial narrow; 
            font-size: 30px; 
            text-align: center;
            margin-left: auto; 
            margin-right: auto; 
            margin-top: 5px;
            margin-bottom: 10px;
            clear: both; 
}
#emailcontact { font-size: 15px;
                text-align: center;
                display: block;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 10px;
}
footer { background-color: #FF0000;
         color: #000000;
         font-style: italic;
         text-align: center; font-weight: bold;
         font-size: .60em;
         padding-top: 25px; 
         height: 90px; 
         clear: both; 
}
img { margin-left: 20px; /* Coding for FB,Group-On, Knot, YouTube pictures */
}
video  { margin-top: 20px;
         box-shadow: 5px 5px 1px #828282;
         margin-bottom: 20px; padding-left: 0;
         width: 275px; 
}
audio {  margin-left: auto;
         margin-right: auto;
         display: block;
         margin-bottom: 5em;
          width: 275px; 
}
.services {  margin-left: 10em; } 
           
.shop  { width: 50%;
         float: left;
         padding: 1em;
}
header, nav, main, footer,p, dl, dt { display: block; }
.color { width: 90%;
         margin-left: auto; margin-top: 0;
         margin-right: auto; 
         display: block;
         padding-top: 10px;
         padding-bottom: 10px; 
         background-color:  #f82f2f;  }
.color1 { width: 90%;
         margin-left: auto; margin-top: 0;
         margin-right: auto; margin-bottom: 0;
         display: block;
         padding-top: 10px;
         padding-bottom: 10px; 
         background-color: #f54949; }



@media only screen and (max-width: 1024px) {
body  { margin: 0; padding: 0; 
}
#wrapper  { width: auto; 
            min-width: 0; 
            margin: 0; 
}
h1  { margin: 0; font-size: 1.8em; line-height: 200%; 
}
nav ul  { text-align: center; padding: 0; margin: 0; 
}
nav li  { display: inline-block; 
} 
nav a  { padding: 2px 10px; font-size: 1.2em; 
}
main  { font-size: 90%; 
        margin: 0; 
        padding-left: 2em; 
        padding-left: 2em; 
}
.fotorama img  { max-width: 100%;
                height: auto; 
}
#desktop  { text-align: center; 
            margin-right: auto; 
            display: block;
            margin-left: auto;
            margin-bottom: 10px;
}
#mobile { display: none; }

#emailcontact { display: block;
                margin-right: auto;
                margin-left: auto;
}
video  { margin-left: auto;
         margin-right: auto; 
         display: block;
         float: right; 
}
.specials { margin-left: auto; margin-right: auto; 
             max-width: 100%; height: auto;  
}
#gallery  { margin-left: 5em; }
#gallery li img { max-width: 100%;
                  height: auto; 
}
.center  { display: block;
           margin-left: auto;
           margin-right: auto; }
}


@media only screen and (max-width: 768px) 
{
h1  {  font-size: 1.5em; 
       line-height: 120%; 
}
h2  { font-size: 1.0em; 
}

h4  { text-align: center;
      display: block;
}
nav ul  { text-align: center; 
}
nav li  { display: inline-flex; 
}
nav a  { display: block; 
         padding: 0.2em; 
         font-size: 1.2em; 
         border-bottom: 2px outset #330000;
 }
main  { padding-left: 0; 
}
#us  {  display: block; 
        margin-left: auto; 
        margin-right: auto;
        float: none;
}               
.lessons img { padding-left: 0.5em; 
           margin-right: 5px; 
           max-width: 100%;
           height: auto; 
}
#mobile  {  margin-left: auto; 
            margin-right: auto;
            display: block;
}
#desktop  { display: none; }

#emailcontact { display: block;
                text-align: center; 
                margin-right: auto;
                margin-left: auto;
                padding-bottom: 20px; 
}
#gallery  { margin-left: -10px;
}
#gallery img { padding-right: 20px; 
               margin-left: 0; 
}
p  { margin-left: 0.75em; 
     margin-right: 0.75em;
}
.center { display: block;
          margin-left: auto;
          margin-right: auto;
          max-width: 100%;
          height: auto; }  

video  { margin-left: auto; 
         margin-right: auto;
         display: block; 
         float: none;
}
.fotorama img  { margin-left: 0;
}
.services { margin-left: 5px; 
}
#wrapper  { width: auto; 
        min-width: 0; 
        margin: 0; 
}
}

 /* End @media only screen and (max-width: 768px)*/