@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%}
    .site-branding-bg {width: 100%}
    .site-info {width: 100%}
    .main-navigation {width: 100%}
    
    #slider .slider-text-content {width: 100%}
    
    #main-content-wrapper {width: 100%}
    
    #sidebar {width: 20%}
    #content {width: 70%}
    
    #sidebar ul.menu li.hover ul {left: 100%}
}
@media only screen and (max-width: 940px) {
    .font-list {display: block; margin-bottom: 10px; position: relative; right: -8px}
    #font-wrapper p.contrast-wrapper {margin-right: 5px}
    .site-branding-bg {min-height: 120px}
    #search-wrapper {top: 70px; right: 10px}
    
    .widget_calendar table {width: 100%}
    .widget_search input[type="search"] {width: 60%}
    .page-content .search-form input[type="search"] {width: 91%}
}
@media only screen and (max-width: 800px) {
    #logosPAD p {width: 45%}
    
    .goto-top {display: block; margin: 0; position: fixed; right: 10px; bottom: 15px; z-index: 10000}
    .goto-top a {background-color: #f2e22e; color: #154d88; text-shadow: 0 1px 0 #fff9b2; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; padding: 7px 17px 7px 17px; box-shadow: inset 0 0 0 1px #e9d923; -webkit-box-shadow: inset 0 0 0 1px #e9d923; -moz-box-shadow: inset 0 0 0 1px #e9d923; border: none; position: relative; width: 20px}
    .goto-top a:after {content: "▴"; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; color: #154d88; background-color: #fff79c; border: 1px solid #e4d529; display: block; width: 15px; height: 15px; font-size: 16px; text-shadow: none; line-height: 13px; position: absolute; left: 10px; top: 9px}
    
    .main-navigation.toggled .menu {opacity: 1; position: relative; top: 45px; background-color: #154d88; 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;}
    
    .site-description {padding: 25px 0 10px 0}
}

@media only screen and (max-width: 640px) {
    #sidebar {width: 100%; float: none; padding: 20px; margin: 0}
    #content {width: 100%; float: none; padding: 0 20px; margin: 0}
    
    .content-area {padding-bottom: 0}
    
    .site-branding {margin: 0 0 0 20px}
    
    #logosPAD p {width: 35%}
    
    .menu-toggle {padding: 0; width: 34px; height: 34px}
    .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; position: absolute; height: 4px; width: 20px; background-color: #154d88; left: 7px; content: ""; text-shadow: 0 1px 0 #fff9b2; -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: -6px; left: 0px}
    .menu-toggle .icon:after {top: 6px; left: 0px}
    
    .menu-toggle:hover .icon,
    .menu-toggle:hover .icon:before,
    .menu-toggle:hover .icon:after,
    .menu-toggle:focus .icon,
    .menu-toggle:focus .icon:before,
    .menu-toggle:focus .icon:after {background-color: #f2e22e}
    
    .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: #154d88; border-bottom: 5px solid #f2e22e}
    
    .main-navigation.toggled ul ul {background: #0b1f40; border: none}
    
    .main-navigation ul {padding: 0 20px}
    .main-navigation ul li {display: block}
    
    .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}
    
    .widget_search input[type="search"] {width: 90%}
}
@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}
    
    #search-wrapper {bottom: -40px; top: auto; z-index: 10000}
    
    .widget_search input[type="search"] {width: 87%}
    
    .padWrap {text-align: center}
    #logosPAD ul {float: none}
    
    #logosPAD p {width: 85%}
    .gallery-item a, .gallery-item a:visited {display: block}
    
    #crumbpath {display: none}
    
    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%}
}
@media only screen and (max-width: 420px) {
    .index-page .entry-thumbnail, .categories .entry-thumbnail {position: relative; margin: 20px 0 0 68px}
    .post-content.marginPost {margin-right: 0}
    .postTitleDate.marginTitle {margin-right: 0}
    
    .entry-thumbnail {margin: 20px 0 0 0; float: none; display: inline-block}
    .index-page .entry-thumbnail {margin: 20px 0 0 68px; float: none; display: inline-block}
    
    .page-content .search-form input[type="search"] {width: 86%}
    .widget_search input[type="search"] {width: 85%}
    
    .site-branding {width: 82%}
}
@media only screen and (max-width: 320px) {
    .site-branding {padding: 20px 0 0 0}
    
    .page-content .search-form input[type="search"] {width: 81%}
    .widget_search input[type="search"] {width: 80%}
    
    #slider .slider-text-content .sliderHasLink {width: 100%; display: block}
    #slider .slider-text-content .slider-link-wrapper {width: 100%; display: block; height: 40px !important; text-align: center; margin-top: 30px}
}