/*
Theme Name:  Amp
Description: TSW theme, Amp, is a novelty theme replicating a classic electric guitar amplifier. Theme options include, Upload logo which sits in top of each article; Upload footer background image; Upload background image; Select colors for site links, background of content, text color and whole site background color. Also a header image can be uploaded. Top menu is volume, tone controls and is very basic but no worries as this theme has a mobile-type navigation for menu two and a menu in the footer for menu three. So you will be able to make the top menu work without losing overall site navigation. Sidebar for widgets is in footer. Demo at: https://leadspilot.com/amp/
Author:      Tradesouthwestgmailcom
Author URI:  http://tradesouthwest.com
Tags:        one-column, custom-background, custom-header, editor-style, translation-ready, classicpress
Copyright:   Larry Judd 2015 Tradesouthwest, http://tradesouthwest.com
Version:     1.0.0
Tested up to: 5.9.3
Requires PHP: 5.4 
Theme URI:   http://themes/tradesouthwest.com/ 
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amp
*/
h1, h2, h3, h4, h5, h6, p { word-wrap: break-word; }
h1{ font-size: 190%; }
h2{ font-size: 160%; }
h3{ font-size: 120%; }
h4{ font-size: 110%; }
h5{ font-size: 100%; }
h6{ font-size: 70%;  }
p {
    line-height: 1.333; 
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    color: #2a2a2a;
    text-align: justify;
    margin: 0 1px 9px 0;
}
a { 
    font-weight: 400; 
    text-decoration: none; 
}
a:visited {
    font-weight: normal;
}
a:hover {  
    text-decoration: underline; 
}
a img {  
    outline: none;
}
i {
font-family: 'FontAwesome';
  font-style: normal;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
blockquote {
    border-left: 4px solid #bbb;
    padding: 5px 15px;
    margin: 3px 30px;
}
img { max-width: 100% !important; }
/* ie 8 img max-width */
@media \0screen {
  img { width: auto;}
}
/*  =Initial Sturcture
------------------------------------------------- */
body{
    font-size:  100%;
    line-height: 1.2;
    width: 90%; 
    margin: 0 auto;
    font-size: 16px;
    line-height: 24px;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    background-color: #f6f6f6;
    overflow-x: hidden;
    margin-top: 20px;
}

img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
}
hr {
    background-color: #f6f6f6;
    border: 0;
    height: 1px;
}
.credits {
    visibility: visible;
    color:#aaa;
}
/*  =Structure
------------------------------------------------- */

.c3{ width:25%;    float: left; box-sizing:border-box; margin-bottom: 10px}
.c4{ width:33.33%; float: left; box-sizing:border-box; margin-bottom: 10px}
.c5{ width:41.66%; float: left; box-sizing:border-box; margin-bottom: 10px}
.c6{ width:50%;    float: left; box-sizing:border-box; margin-bottom: 10px}
.c8{ width:66.66%; float: left; box-sizing:border-box; margin-bottom: 10px}
.c12{width:100%;   float: left; display:block; margin-bottom: 10px}
.end {float: right !important;}
.wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.amp{
    position: relative;
    display: block;
    background: url('assets/cloth-11.jpg'); 
    background-size: 10%; 
    width:90%; 
    margin: 0 auto; 
    border: 20px solid black; 
    border-radius: 12px; 
    height: 200px;
}
.feet {
    display: block;
    position: relative;
    padding: 0;
    width: 76%;
    height: 12px;
    margin: 0 auto;
    border-left: 50px solid #282828;
    border-right: 50px solid #282828;
}
.speaker{
    position: relative;
    background: url('assets/cloth-11.jpg'); 
    background-size: 10%; 
    width: 90%; 
    margin: 0 auto; 
    border: 20px solid black; 
    border-radius: 12px; 
    min-height: 800px;
    height: auto;
}
.site-nav {
    position: relative;
    display: block;
    width: 97.75%;
    background: #2e2d2f;
    color: silver;
    margin: 1px;
    border: 1px solid silver;
    padding: 10px;
    height: 50px;
}
.site-header {
    position: relative;
    padding: 0 20px;
    overflow: hidden;
}
.site-header {
    position: relative; 
    left: 0;
    height: 125px;
    width: 95%;
    margin: 0;
    overflow: hidden;
    z-index: 10;
}
.site-header .hgroup {
    width: 80%;
    position: relative;
    left: 0;
}
.logo {
    float: right;
    position: relative;
    right: 20px;
    top: -132px;
    max-height: 102px;
    width: auto;  
    display: block;
}
.logo #header-img {
    max-height: 100px;
    width: auto;
    margin-top: .5em;
}
.logo:after {
    content: "";
    clear: both;
}
.site-title a {
    color: #e8edf3;
    text-shadow: 2px 2px 5px #000000;
    font-weight: 700;
    font-size: 32px;
}
.site-description {
    text-shadow:    1px 1px 2px #eafdfe;
}
#access ul li {
    display:        inline;
    float:          left;
}
#access li a {
    color:          #fafafa;
    font-size:     1em;
    position:       relative;
    left:            -5%;
    top:             0;
}
#access li a:before {
    content:         "\2742";
    font-size:       2.885em;
    position:        relative;
    top:             -.1218em;
}
.select-menu {
    width:           240px;
    float:           right;
    text-align:      left;
    height:          45px;
    position:        relative;
    top:             -72px;
    padding:         0;
}
#content {
    position:         relative;
    margin:           20px auto;
    width:            98.8992%;
    padding:          0;
}
.entry-header {
    display:          block;
    width:            92%;
    margin:           0 auto;
    padding:          10px;
    border-radius:    10px 10px 0 0;
    box-shadow:       1px -1px 3px #888, -1px 0 2px #999;
}
.entry-title {
    transform:        rotate(-4deg);
    position:         relative;
    top:              -.222em;
    left:             1em;
    text-shadow:      0 1px 1px rgba( 0, 0, 0, .4);
    z-index:          98;
}
.branding {
    float:            right;
    position:         absolute;
    right:            62px;
    top:              32px;
    z-index:          100; 
}
.site-logo img {
    width:            auto;
    height:           89px;
    padding:          0;
    margin:           0;
    z-index:          99;
}
article.entry {
    display:          block;
    width:            88.66667%;
    overflow:         hidden;
    height:           auto;
    position:         relative;
    opacity:          .9;
    padding:          20px;
    margin:           40px auto 40px auto;
    border:           thin solid #bbb;
    border-radius:    15px;
}
.no-thumb {
    margin:           0;
    padding:          0;
}
.content {
    display:          block;
    width:            92%;
    margin:           0 auto;
    padding:          10px;
    box-shadow:       0 1px 3px #888;
    min-height:       150px;
    overflow:         hidden;
}
.entry-container {
    width:            90%;
    margin:           0 auto;
    padding:          10px 25px;
}
.hentry {
    margin-top:       20px;
    margin-bottom:    20px;
}
.metadata {
    padding-left:     15px;
}
.meta-footer {
    display:          block;
    width:            92%;
    padding:          10px 0;
    margin:           40px auto;
    box-shadow:       0 1px 3px #888;
    min-height:       20px;
    overflow:         hidden;
    background:       rgba( 255, 255, 255, .7);
    border-radius:    10px;
}
#navigation p {
    text-align:       center;
    background:       #fafafa;
    margin-left:      2.5%;
    border:           thin solid #999;
    border-radius:    5px;
}
#navigation {
    height:           24px;
    margin:           0 auto;
    width:            95.5%;
    border-radius:    5px;
    display:          inline-block;
}
body.blog #navigation p {
    margin-left:      4%;
}
body.blog #navigation {
    width:            96.5%;
}
.site-footer {
    width:            100%;
    padding:          10px;
    margin:           0;
    box-shadow:       0 -1px 2px rgba( 0, 0, 0, .4);
    overflow:         hidden;
}
.site-footer .nav-footer ul li {
    display:          inline-block;
    position:         relative;
    list-style:       none;
    margin:           0;
    padding:          0;
}
.site-footer .nav-footer li a {
    width:            100px;
    display:          inline-block;
    height:           auto;
    line-height:      1.248;
    padding:          7px 5px 7px 11px;
    border-radius:    20px 20px 20px 20px;
    background:       #edf1f1;
    margin:           2px;
    font-size:        .938em;
    border:           1px solid #999;
    box-shadow:       1px 2px 3px #777, 7px 10px 8px 10px rgba( 145, 145, 145, .45) inset;;
}
.nav-footer li.menu-item-has-children > a:after {
    content:          '\25bc';
    position:         relative;
    top:              0;
    right:            -1em;
    color:            #777;
}
.nav-footer li.menu-item-has-children > a {
    box-shadow: 12px 22px 12px 12px rgba( 0, 0, 0, .65), 7px 10px 8px 10px rgba( 145, 145, 145, .45) inset;
}
.nav-footer li li {
    position:         relative;
}
.footer-right {
    position:         relative;
    right:            1.33336em;
    float:            right !important;
    margin:           .75em;
    padding:          10px;
    width:            45%;
    opacity:          .9;
    border-radius:    5px;
}
.footer-left {
    position:         relative;
    float:            left;
    margin:           .75em;
    padding:          10px;
    width:            45%;
    opacity:          .9;
    border-radius:    5px;
}
.copyright,
.credits {
    padding-left: 37px;
}
.no-menu ul li {
    display:          inline;
}
.sidebar-container {
    display:          block;
}
#led {
    position:         relative;
    left:             240px;
    top:              -12px;
    width:            20px;
    height:           20px;
    border:           5px solid #c1c7cc;
    border-radius:    95px;
    background:       #df3500;
    box-shadow:       .5px 1px 4px 5px #ffa37a inset;
}

.led-glow {
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: glow;
          animation-name: glow; }
@-webkit-keyframes glow {
  from {
    -webkit-box-shadow: inset .5px 1px 4px 5px #d38a4a;
            box-shadow: inset .5px 1px 4px 5px #d38a4a; }

  75% {
    -webkit-box-shadow: inset .5px 1px 4px 5px #f5a34a;
            box-shadow: inset .5px 1px 4px 5px #f5a34a; }

  to {
    -webkit-box-shadow: inset .5px 1px 4px 5px #d38a4a;
            box-shadow: inset .5px 1px 4px 5px #d38a4a; } }
@keyframes glow {
  from {
    -webkit-box-shadow: inset .5px 1px 4px 5px #d38a4a;
            box-shadow: inset .5px 1px 4px 5px #d38a4a; }

  75% {
    -webkit-box-shadow: inset .5px 1px 4px 5px #f5a34a;
            box-shadow: inset .5px 1px 4px 5px #f5a34a; }

  to {
    -webkit-box-shadow: inset .5px 1px 4px 5px #d38a4a;
            box-shadow: inset .5px 1px 4px 5px #d38a4a; } }

/* =mobile menu
-------------------------------------------------------------- */
.span.toggle {
    display:          none;
    position:         absolute;
    top:              5px;
    left:             0;
    margin:           0; 
    padding:          0;
    z-index:          9999;
}
.toggleline .span {
    display:          block;
}
button.t-button {
    position:         relative;
    top:              59px;
    right:            105px; 
    font-size:        1.25em;
    color:            black;
    display:          block;
    padding:          10px 15px;
    background-color: #e8e8e8;
    background:       linear-gradient(#f2f2f2, #c0c0c0);
    border: 0 none;
    border-radius: 3px;
    text-shadow: 1px -1px 0 #fff;
    cursor: pointer;
}
button.t-button:hover {
    cursor: pointer;
}
.button-glow {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: glowing;
          animation-name: glowing; }
  .button-glow:active, .button-glow.active, .button-glow.is-active {
    -webkit-animation-name: none;
            animation-name: none; }
@-webkit-keyframes glowing {
  from {
    -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3);
            box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); }

  75% {
    -webkit-box-shadow: 0 0 10px 5px rgba(122, 154, 239, 0.9);
            box-shadow: 0 0 10px 5px rgba(122, 154, 239, 0.9); }

  to {
    -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3);
            box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); } }
@keyframes glowing {
  from {
    -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3);
            box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); }

  75% {
    -webkit-box-shadow: 1px 1px 10px 4px rgba(122, 184, 239, 0.9), -1px 1px 10px 4px rgba(122, 184, 239, 0.9);
            box-shadow: 1px 1px 10px 4px rgba(122, 184, 239, 0.9), -1px 1px 10px 4px rgba(122, 184, 239, 0.9); }

  to {
    -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3);
            box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); } }

#nav {
    position: relative;
    top: 0;
    height: 100%;
    display: block;
    overflow: visible;
}
#nav ul {
    width: 256px;
    max-width: 256px;
    position: relative;
    top: 0;
    left: -68px;
    word-wrap: break-word;
}
#nav ul li { 
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav li a {
    background: linear-gradient(#ffffff, #efefef, #bababa);
    display: block;
    font-size: 120%;
    width: 100%;
    padding: 2px 10px;
    border-radius: 3px;
    margin: 0;
    border: thin solid #bbb;
}
#nav li {
    margin-left: 0;
}
#nav ul li > ul {
    position: relative;
    left: 1%;
    background: none;
    width:82%;
}
#nav li.current_page_item a {
    color: black;
    font-weight: 700;
}
/* =Social block
-------------------------------------------------------------- */

.button {
  background-color: #eeeeee;  
  font-weight: 300;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 10px;
  margin: 0;
border: thin solid #999;
border-radius: 5px;
box-shadow: 0 1px 1px #888;
  display: inline-block;
  appearance: none;
  cursor: pointer;
  border: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}
ul#social-block li{
 display: inline;
list-style: none;
float: left;
margin-right: 20px;
}
#social-block i {
font-size: 48px;
background: transparent;
}
/* =WordPress Core
-------------------------------------------------------------- */
.sticky {color: inherit;}
.bypostauthor {color: inherit;}
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.attachment-post-thumbnail,
.post-thumb {
    position: relative;
    left: -.33336em;;
    float: left;
    margin-right: 1.75em;
    margin-bottom: .575em;
    /* background: rgba( 245, 245, 245, .999999); */
    border-radius: 3px;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
    left: -999em;
}
.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}
/* =Gallery
-------------------------------------------------------------- */

.entry-content img,
img[class*="align"],
img[class*="wp-image-"],
div[class*="attachment_"] {
    height:     auto; /* Make sure images height and width are scaled */
    max-width:  98.8992%;
    margin:     0 auto;
}
.alignnone, img.alignnone, .alignnone img {
    max-width:       98.8992%;
}

.gallery { display: block; clear: both; overflow: hidden; margin: 0 auto; }
.gallery .gallery-row { display:block; clear: both; overflow: hidden; margin: 0; }
.gallery .gallery-item { overflow: hidden; float: left; margin: 0; text-align: center;
    list-style: none; padding: 0; position: absolute; bottom: 0 }
.gallery .gallery-item img, .gallery .gallery-item img.thumbnail {
  max-width: 89%; 
  height: auto; 
  padding: 1%; 
  margin: 0 auto; 
}
.gallery-caption { margin-left: 0; }
.gallery dl {color: inherit;}
.gallery dt {color: inherit;}
.gallery dd {color: inherit;}
.gallery dl a {color: inherit;}
.gallery dl img {color: inherit;}

/* formatting for custom posts
--------------------------------------------- */
 
   
 
.format-aside header h2 { 
    display:         none; 
}
.single.format-standard {color: inherit;}
.single.format-aside {color: inherit;}
.format-gallery article.entry img { 
    border-top:      2px solid #ccc;
    border-right:    2px solid #aaa;
    border-bottom:   2px solid #aaa;
    border-left:     2px solid #ccc;
}
.format-gallery article.entry:after {
    clear:           both;
    margin:          0;
}
body.blog .format-gallery img {
    display:         none;
    border:          none;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){
    body{
        font-family: initial;
    }
}

body.single-format-image .content .entry-container {
    background: #ffffff !important;
}
@media all and (max-width: 480px) {
  .gallery .gallery-item {
    width: 100%;
    margin-bottom: 20px;
  }
}
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width:          100%;
    height:             auto;
    opacity: 1;
}
.entry .size-auto, 
.entry .size-full,
.entry .size-large,
.entry .size-medium,
.entry .size-thumbnail {color: inherit;}
form .form-allowed-tags code,
form .form-allowed-tags p {
    max-width:         98.8992%;
    height:            auto;
    margin:            0 auto;
    font-size:         0.888em;
    color:             #777;
}
/* =Posts misc.
------------------------------------------------- */
.content .date-link,
.content .authorlinks {
   font-weight: 700;
    border-bottom: thin dotted #bbb;
}
.linkcat {color: inherit;}
.taglink{color: inherit;}
.authorlinks{font-weight: normal}
.metadata p:first-child {
margin-top: 8px;
}
/* =Comments
------------------------------------------------- */
#comments {
    width: 88%;
    background: #fafafa;
    margin: 0 auto;
padding: 20px 0;
}
.comment-body ul {
    list-style: inside;
}
.comment-body ul li,
.comment-body ul li ul {
   margin-left: 0.612em;
}
#respond {
    width: 88%;
    display: block;
    margin: 3px auto;
}
.responses {
    float: right;
}
h3#reply-title {
    font-size:       small;
    color:           green;
    margin-left:     0;
}

#respond form textarea,
#respond form input[type='text'] {
    border:          thin solid #ddd;
    width:           68%;
}
#respond form textarea {
    height:          100px;
    margin-top:      1px;
}
#commentform p {
    margin:          1px 0;
    line-height:     1.3852;
    font-size:       93.8%;
}
.comment-notes,
#email-notes,
#commentform label {
    color:           #888;
}
#commentform label {
    min-width:       124px;
    width:           auto;
    max-width:       124px;
    border-bottom:   thin dotted #bbb;
    display:         inline-block;
    padding-left:    1px;
}
.required {
    color:           red;
}
form .form-allowed-tags code {
    display: block;
    position: relative;
    left: 0;
    max-width:         100%;
    font-size: .75em;
    margin-bottom: .75em;
    color:             #888;
}
p.form-allowed-tags {
    height:            auto;
    position: relative;
    left: 0;
    font-size:         0.75em;
    color:             #777;
}
.form-allowed-tags code:before {
    content: "";
    margin: .5em 0;
    display: block;
}
#form-allowed-tags {
    width: 97%;
    margin-left: 2px;
}
/*  =Widget Styles
------------------------------------------------- */
.widgettitle {
 	background: rgba(255, 255, 255, .7);
	padding: 3px 10px;
	border-radius: 10px 10px 0 0;
	margin: 25px auto 0 auto;
	box-shadow: 1px -1px 3px #888, -1px 0 2px #999;
}
.sidebar-container .widget-container {
    display: block;
    min-width: 90%;
    width: auto;
    max-width: 90%;
    margin: 10px auto;
}
.widget-container ul li {
    list-style: none;
    box-shadow: 0 1px 0 #ddd;
    position: relative;
    left: 0;
}
/* ==========================================================================
   Print styles Inlined to avoid required HTTP connection
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  th, tr {border-bottom: 0px solid white; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
/* =bbPress
-------------------------------------------------------------- */
#bbpress-forums .avatar {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
/* =Media query for smaller width screens
-------------------------------------------------------------- */

@media screen and (max-width: 960px) {
body{font-size:90%}
.row{margin: 0;margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{
display:block;width:100%;margin-right:5px;margin-left:5px;margin-bottom:20px}
#access ul {width: auto;}
#access li, #access li a {width: 320px;}
#access ul ul {left: 10%; top: 90%;}
#access ul ul li:hover > ul {left: 10%; top: 90%;}
#respond form input[type="text"] {width: 62%;margin-right: 25%;}
button#toggle { position: relative; top: -.333em; left: 1em;}
#led {position: relative; top: -5.222em; }
.logo {position: relative; left: 3em; top: -8.125em; z-index: 99999; }
}

@media screen and (max-width: 768px) {

button#toggle { position: relative; top: -4em;}
#led {position: relative; top: -12.222em; }
.logo {position: relative;  }
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{width:100%;margin-right:0;margin-left:0;margin-bottom:20px}
#access ul {width: auto;}
#access li, #access li a {width: 320px;}
#access ul ul {left: 10%; top: 90%;}
#access ul ul li:hover > ul {left: 10%; top: 90%;}
#respond form input[type="text"] {width: 60%;margin-right: 22%;}

}
/* =Media query for iPhone and smaller handheld devices
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px){
	
}
/* Smartphones (portrait and landscape) --  --  --  --  -- - */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */
.row{margin: 0;margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{
display:block;width:100%;margin-right:5px;margin-left:5px;margin-bottom:20px}
#access ul {width: auto;}
#access li, #access li a {width: 320px;}
#access ul ul {left: 10%; top: 90%;}
#access ul ul li:hover > ul {left: 10%; top: 90%;}
#respond form input[type="text"] {width: 62%;margin-right: 25%;}
 
}
/* Smartphones (landscape) --  --  --  --  -- - */
@media only screen
and (min-width : 321px) and (max-device-width : 540px) { 
/* Styles */
.row{margin: 0;margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{
display:block;width:100%;margin-right:5px;margin-left:5px;margin-bottom:20px}
#access ul {width: auto;}
#access li, #access li a {width: 320px;}
#access ul ul {left: 10%; top: 90%;}
#access ul ul li:hover > ul {left: 10%; top: 90%;}
#respond form input[type="text"] {width: 62%;margin-right: 25%;}
} 
 
/* Smartphones (portrait) --  --  --  --  -- - */
@media only screen
and (max-width: 321px) and (orientation:portrait) { 
/* Styles */
.row{margin: 0;padding: 0;}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 {clear: both;
display:block;width:100%;margin-right:5px;margin-left:5px;margin-bottom:20px}
#access ul {width: auto;}
#access li, #access li a {width: 310px;}
#access ul ul {left: 10%; top: 90%;}
#access ul ul li:hover > ul {left: 10%; top: 90%;}
#respond form input[type="text"] {width: 62%;margin-right: 25%;}
}