@media screen and (min-width: 801px) {
    .menu-toggle { display: none; }
    .main-navigation ul {display: block}
    .main-navigation .menu {opacity: 1}
}
@media only screen and (max-width: 980px) {
    #page {width: 100%}
    #slider-wrapper {width: 100%}
    #add-navigation-wrapper {width: 100%}
    #main-content-wrapper {width: 100%}
    .site-info {width: 100%}
    .site-header {width: 100%}
    .site-branding {width: 70%; min-height: 121px; height: 121px}
    #sidebar {width: 25%}
    #content {width: 70%}
    
    .widget_calendar table {width: 70%}
    
    .main-navigation {width: 75%}
    #search-wrapper {width: 25%; display: block}
    
    #search-wrapper input[type="search"] {width: 64%}
    
    #slider .slide img {width: 100%}
    .page-content .search-form input[type="search"] {width: 90%}
}
@media only screen and (max-width: 800px) {
    .main-navigation .menu {opacity: 0; max-height: 0; overflow: hidden}
    .main-navigation.toggled .menu {display: block; opacity: 1; position: relative; top: 45px; background: #49842d; width: 133.5%; transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; max-height: none; overflow: visible}
    .main-navigation .menu ul, .main-navigation .menu ul ul {max-height: none; overflow: visible}
    
    #logosPAD ul {background-color: #31352f}
    #logosPAD p {width: 45%; background-color: #31352f; margin-top: 15px}
    
    #sidebar .search-form input[type="search"] {width: 65%}
    
    .site-description {margin-top: 10px}
    
    .goto-top {display: block; margin: 0; position: fixed; right: 10px; bottom: 15px; z-index: 10000}
    .goto-top a {background-color: #49842d; padding: 7px 10px}
    .goto-top a:after {content: "▴"; color: #fff; text-shadow: 0 1px 0 #274818}
    
    .page-content .search-form input[type="search"] {width: 88%}
    
    .entry-meta {margin: 0}
    .posted-on {display: block}
    .posted-on:before {display: none}
}
@media only screen and (max-width: 640px) {
    #sidebar {width: 100%; float: none; padding: 20px; margin: 0}
    #content {width: 100%; float: none; padding: 10px 20px; margin: 0}
    
    .main-navigation.toggled .menu {width: 100%; overflow-x: hidden}
    
    #add-navigation {width: 100%}
    #add-navigation ul {display: block; height: auto}
    #add-navigation ul li {display: block; height: auto; width: 100%; border: none; border-top: 1px solid #337613}
    
    .widget_calendar table {width: 88%}
    .site-branding {width: 65%}
    
    .menu-toggle {padding: 0; width: 46px; height: 46px}
    .menu-toggle:after {display: none}
    .menu-toggle .btnText {clip: rect(1px, 1px, 1px, 1px); position: absolute; display: block}
    
    .menu-toggle .icon,
    .menu-toggle .icon:after,
    .menu-toggle .icon:before {display: block; height: 4px; width: 20px; background-color: #fff; position: absolute; left: 12px; content: ""; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; text-shadow: 0 1px 0 #274818}
    
    .menu-toggle .icon {top: 20px}
    .menu-toggle .icon:before {top: -7px; left: 0px}
    .menu-toggle .icon:after {top: 7px; left: 0px}
    
    .menu-toggle.active .icon {background: transparent !important}
    .menu-toggle.active .icon:before {transform: rotate(45deg); top: 0}
    .menu-toggle.active .icon:after {transform: rotate(-45deg); top: 0}    
    
    #logosPAD p {width: 40%; margin-top: 10px}
    
    .main-navigation.toggled ul {border-bottom: 5px solid #31352f; width: 100%}
    
    .main-navigation ul li {display: block; background: none}
    
    .main-navigation ul li ul {position: static !important; width: 100% !important; display: none !important; opacity: 1 !important; border: none}
    .main-navigation ul li.hover ul {display: block !important}
    
    .main-navigation ul li ul li ul {left: 0}
    .main-navigation ul li.hover ul ul {position: static !important; width: 100% !important; display: none !important}
    .main-navigation ul ul li.hover ul {left: 0; display: block !important}
    
    #sidebar ul.menu li ul {position: static; width: 100% !important; display: none; opacity: 1 !important}
    #sidebar ul.menu li.hover ul {display: block}
    #sidebar ul li.hover ul ul {position: static !important; width: 100% !important; display: none !important}
    #sidebar ul ul li.hover ul {left: 0; display: block !important}
    
    #add-navigation ul.menu li ul {position: static; width: 100% !important; display: none; opacity: 1 !important}
    #add-navigation ul.menu li.hover ul {display: block}
    #add-navigation ul li.hover ul ul {position: static !important; width: 100% !important; display: none !important}
    #add-navigation ul ul li.hover ul {left: 0; display: block !important}    
    
    .entry-meta {width: 90%}
    
    #crumbpath {display: none}
    
    .gallery-item a, .gallery-item a:visited {display: block; width: auto; height: auto}
    
    textarea {width: 100%}
    .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond input[type="password"], .comment-respond input[type="search"], .comment-respond select, .comment-respond textarea {width: 100%}
    
    header img {max-width: none}
    
    .main-navigation {width: 100%}
    #search-wrapper {position: absolute; right: 0; top: 0; width: 50%}
    #search-wrapper input[type="search"] {width: 77.5%}
}
@media only screen and (max-width: 480px) {
    .font-contrast .text {position: absolute; display: block; clip: rect(1px, 1px, 1px, 1px); left: -900em}
    .font-list {display: none}
    .font-contrast {border: none !important}
    
    .page-content .search-form input[type="search"] {width: 82%}
    
    #search-wrapper input[type="search"] {width: 70%}
    
   .entry-meta {width: 90%}
   
   .index-page .entry-thumbnail, .categories .entry-thumbnail {position: relative; left: 0; float: none; margin-left: 20%; margin-top: 10px; margin-bottom: 20px}
   h3.entry-title.marginTitle, h3.page-title.marginTitle {margin: 0 0 20px 0}
   .post-content.marginPost {margin-left: 0}
   
   #logosPAD {padding-top: 5px}
   #logosPAD ul {float: none; text-align: center}
   #logosPAD p {padding: 10px 100px 20px 10px; margin: 0; display: block; width: 100%}
}
@media only screen and (max-width: 420px) {
    .index-page .entry-thumbnail, .categories .entry-thumbnail {margin-left: 15%}
    
    #search-wrapper input[type="search"] {width: 65.5%}
    
    .page-content .search-form input[type="search"] {width: 78%}
    .site-branding {width: 80%}
}
@media only screen and (max-width: 320px) {
    
    #search-wrapper input[type="search"] {width: 55%}
    
    .page-content .search-form input[type="search"] {width: 70%}
    #logosPAD ul {margin-left: 0}
    
    .slider-text {display: block}
    #slider .slider-text-content {display: block; width: 100%}
    #slider .slider-text .more-link, #slider .slider-text .more-link:visited {margin-left: 0}
    
    .index-page .entry-thumbnail, .categories .entry-thumbnail {margin-left: 0}
    
    .widget_calendar table {width: 78%}
}