@media screen and (min-width: 801px) {
    .menu-toggle { display: none; }
    .main-navigation ul {display: block; margin-left: 0}
    .main-navigation .menu {opacity: 1}
}
@media only screen and (max-width: 980px) {
    #page {width: 100%}
    
    #sidebar {width: 26%}
    #content {width: 62%}
    
    #slider .slide.hasHeader {width: 66%}
    #slider .slider-text {left: 66%}
    
    .widget_calendar table {width: 100%}
    
    .site-header {width: 100%}
    .site-branding {margin-left: 20px}
    .site-description {margin: 0}
    #font-wrapper {text-align: right}
    #font-wrapper p {display: block; margin-bottom: 10px}
    .font-list:before {display: none}
    #font-wrapper .font-list {margin-right: 20px}
    #font-wrapper .font-list p {display: inline-block}
    
    #search-wrapper {right: 10px; top: 80px}
    
    .main-navigation {padding: 0 15px}
    .main-navigation ul ul li.hover ul {left: -200px}
    
    .main-navigation.toggled {position: absolute; bottom: -48px; background: #fff; width: 100%}
    .main-navigation.toggled .menu {opacity: 1}
    
    .site-footer {width: 100%}
    .site-info {padding-left: 20px; padding-right: 20px}
    
    #slider .slider-text {width: 30%}
    #slider .slider-text h2 {font-size: 2em}
    #slider .slide.hasHeader img {margin-left: -200px}
    
    .page-content .search-form input[type="search"] {width: 88%}
    
    #sidebar .menu li.hover ul {left: 100%}
    #sidebar .menu ul {width: 200px}
    #sidebar .menu ul ul {width: 200px}
    #sidebar .menu ul li.hover ul {left: 100%}       
}
@media only screen and (max-width: 800px) {
    #sidebar {width: 200px; margin-left: -10px}
    
    .goto-top {display: block; margin: 0; position: fixed; right: 10px; bottom: 15px}
    .goto-top a {background-color: #af3521; width: 25px; height: 25px; display: block; text-align: center; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px}
    .goto-top a:after {content: "▴"; color: #fff; font-size: 1.5em; text-shadow: 0 1px 1px #8d2716}
    
    #slider .slider-text h2 {font-size: 1.6em}
    
    #sidebar .menu li.hover ul {left: 180px}
    #sidebar .menu ul {width: 200px}
    #sidebar .menu ul ul {width: 200px}
    #sidebar .menu ul li.hover ul {left: 180px}    
}
@media only screen and (max-width: 640px) { 
    #content {width: 54%}
    
    .site-branding {width: 60%}
    
    .entry-thumbnail {margin: 20px 0 0 0; float: none; display: inline-block}
    .index-page .entry-thumbnail {margin: 20px 0 0 0; float: none; display: inline-block}
    
    #logosPAD p {width: 45%}
    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%}
    
    .page-content .search-form input[type="search"] {width: 83%}
    
    .gallery-item a, .gallery-item a:visited {display: block}
    
    #slider .slide,
    #slider .slide.hasHeader {width: 100%; display: block}
    
    #slider .slider-text {position: relative; left: 0; width: 100%; height: auto; margin-bottom: 20px; padding: 0 30px 0 20px}
    #slider .slider-text .bgImg {width: 100%; height: 27px; background: url("../images/bgImgResp.png") no-repeat; position: absolute; left: 0; top: -27px}
    #slider .slider-text h2 {margin-top: 10px}
    #slider .slider-text a.more-link {float: none; margin-left: 10px}
    
    .menu-toggle {padding: 0; width: 34px; height: 34px; position: relative; text-align: center; display: block; padding: 0 6px}
    .menu-toggle .btnText {clip: rect(1px, 1px, 1px, 1px); position: absolute; display: block}
    .menu-toggle:before {display: none}
    .menu-toggle .icon,
    .menu-toggle .icon:after,
    .menu-toggle .icon:before {position: absolute; display: block; background: #fff; height: 2px; display: block; width: 20px; content: ""; text-shadow: 0 1px 1px #8d2716; -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}
    .menu-toggle .icon {top: 15px}
    .menu-toggle .icon:before {top: -5px}
    .menu-toggle .icon:after {top: 5px}
    
    .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}
    
    .main-navigation.toggled ul {position: absolute; left: 0; top: 30px; background: #fff; border-bottom: 5px solid #af3521}
    .main-navigation.toggled ul ul {border: none}
    .main-navigation.toggled {position: absolute; bottom: -4px; background: #fff; width: 100%}
    .main-navigation.toggled ul { width: 105%; text-align:left; opacity: 1; padding: 0 20px}
    .main-navigation li { display:block;}
    .main-navigation ul li:before {display: none}
    .main-navigation ul li a, .main-navigation ul li a:visited {margin: 0; border-bottom: 1px solid #eaeaea; display: block}
    .main-navigation ul li ul {position: static !important; width: 100% !important; display: none !important; opacity: 1 !important}
    
    .main-navigation ul li.hover ul {display: block !important; padding-left: 20px}
    
    .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}    
}
@media only screen and (max-width: 480px) {
    #search-wrapper {top: auto; bottom: 5px; z-index: 10000}
    
    #sidebar {width: 100%}
    #content {width: 100%}
    
    #slider .slide,
    #slider .slide.hasHeader {height: auto}
    #slider .slide,
    #slider .slide.hasHeader img {width: 100%; margin-left: 0; height: auto}
    
    #font-wrapper .font-list p {display: block}
    
    #logosPAD p {width: 80%; margin-top: 20px}
    #main-content-wrapper {margin-left: 20px; margin-right: 20px}
    #content {margin-left: 0; width: 100%; float: none}
    
    #sidebar {width: 100%; margin-left: 0}
    .widget_calendar table {width: 100%}
    .padWrap {text-align: center}
    #logosPAD ul {float: none}
    
    #crumbpath {display: none}
    
    h2.entry-title {margin-bottom: 0}
    h2.entry-title span:before, h2.page-title span:before {display: none}
    h2.entry-title span:after, h2.page-title span:after {display: none}
    
    h3.entry-title {display: block}
    
    .index-page .entry-thumbnail {margin-left: 80px}
    
    #sidebar .menu li ul {position: static; width: 100% !important; display: none; opacity: 1 !important}
    #sidebar .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}
    
    #logosPAD p {width: 85%}
}
@media only screen and (max-width: 420px) {
    .font-contrast .text {position: absolute; display: block; clip: rect(1px, 1px, 1px, 1px); left: -900em}
    .font-list {display: none}
    .font-contrast {border: none !important}
    
    .site-branding {width: 85%}
    
    .index-page .entry-thumbnail {margin-left: 50px}
}
@media only screen and (max-width: 320px) {
    .index-page .entry-thumbnail {margin-left: 0}
    .page-content .search-form input[type="search"] {width: 78%}
}