/****************************** *MediaQuery 767 ******************************/ @media screen and (max-width: 960px){ .orbit-wrapper .orbit-caption {left: 45px; bottom: 18%;} .orbit-caption #title-slider {padding: 20px 20px 0; } .orbit-caption #title-slider h2 {font-size: 30px; } .orbit-caption #description-slider {padding: 0 20px 20px;} .orbit-caption #description-slider span {font-size: 14px;} .orbit-caption #description-slider #button-green {width: 200px;} .orbit-caption #description-slider #button-green a {font-size: 20px;} } /* @media screen and (max-width: 890px){ .orbit-wrapper .orbit-caption {bottom: 5%;} } */ /****************************** *MediaQuery 767 ******************************/ @media screen and (max-width: 767px){ body{ min-width: 320px;} #header #line-menu {padding-top: 15px;} #header #menu {display: block; height: auto;} #header #menu nav {padding: 0; padding-top:0px;} #header .top-bar > ul .name img {margin: 0;} #header .top-bar ul.right {height: auto;} #header .top-bar ul.right > li > a:not(.button) {padding: 0 5px !important;} #header .top-bar ul > li.has-dropdown .dropdown {background-image: none;} #header .top-bar ul > li.has-dropdown.moved .back.title a:before {content: none;} #header .top-bar ul > li.has-dropdown .dropdown li a {font-size: 13px; font-weight: bold;} #header .top-bar ul > li.has-dropdown.moved .dropdown .back.title h5 a {font-size: 22px;} #header .top-bar ul > li.has-dropdown .dropdown li a{border-bottom: 1px solid #ccc;} #header .top-bar ul > li.has-dropdown .dropdown li a:hover {background: #e98300;} #header .top-bar ul.right > li:nth-child(1), #header .top-bar ul.right > li:nth-child(2) { border-bottom: 1px solid #cccccc;} #header .top-bar ul.right > li > a{ border-bottom: 1px solid #cccccc;} #header .top-bar ul.right > li.donate a{margin: 5px 5px; } #header .top-bar ul.right > li > a[href*="volunteer-opportunities"]{margin: 5px 5px;} #header .top-bar ul.right > li:nth-child(9){background: #ebebeb;} #header .top-bar ul.right > li:nth-child(9) > a {border-bottom: none;} #header .top-bar .dropdown.sub-sub-menu{ width: 100%;} #slider .orbit-wrapper .orbit-caption {bottom: -170px; left:0; width: 100% !important;} #slider .orbit-wrapper #slider-content {margin-bottom: 180px;} #slider .orbit-caption #title-slider {width: 100%; background: rgb(83, 104, 43); padding: 10px 20px 0;} #slider .orbit-caption #title-slider h2{color: #fff;} #slider .orbit-caption #description-slider {width: 100%; padding: 10px 20px 20px; background: rgb(83, 104, 43); color: #fff;} #slider .orbit-caption #description-slider span {padding: 5px 0; font-size: 12px; color:#fff;} #slider .orbit-caption #description-slider #button-green {width: 80%;} #slider .orbit-caption #description-slider #button-green a{font-size: 20px;} #content #block1 {padding: 15px 0;} #content #block2 #content-posts .row {border: none;} #content-posts-block1 .six{border-bottom: 1px dashed #cccccc;} #content-posts-block1 #post-4{border:none !important;} #content #block1 img{padding: 20px 0;} #content #content-images .image-title {margin-top: -55px;} #content #block2 {padding: 30px 0;} #content #block2 #content-posts .content-posts-block-image {padding-right: 15px;} #content #block2 #content-posts h1 {margin: 0;} #content #donors #donors-title {padding: 30px 0 15px;} #content #donors .slick-slide img {margin: 0 auto;} #footer-top {background-position: bottom center;} #footer-top #form-need-food form {overflow: hidden;} #footer-top #form-need-food input,#footer-top #form-need-food input[type*="submit"] {width: 48%; float: left; } #footer-top #form-need-food input[type*="submit"] {margin: 0 3px;} #footer-bottom {background-image: url(../images/footer-background-mobile.png); background-position: right bottom;} #footer-bottom .footer-logos {text-align: center; margin-bottom: 10px; overflow: hidden;} .button:hover, .button:focus {background: #e59f44 !important;} #footer-bottom #footer-contact ul {margin-top: 10px;} #footer-bottom #footer-contact ul li {display: block; text-align: left;} #footer-bottom #footer-contact ul li.hide-for-small {display: none !important;} /****************************** * WHERE-TO-GET-FOOD ******************************/ #wpsl-wrap #wpsl-search-wrap .wpsl-input input {width: 100% !important ; height: 49px;} #wpsl-wrap #wpsl-search-wrap .wpsl-input input[type*="submit"] {margin: 15px 0;} #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap #wpsl-radius label {width: 100%;} #dialog .window {max-width: 700px !important; width: 100% !important; left: 0 !important;} #boxes #dialog {max-width: 700px !important;width: 100% !important; left: 0 !important;} .dialog {width: 100% !important; } #boxes .window .close { right: 10px !important; } /****************************** * GIVING TUESDAY ******************************/ #giving_container .no-padding{padding: 0 15px !important;} #giving_container #header #giving_tuesday_logo, #giving_container #header #logo_header{text-align:center;} #thermometer_copy img{ display: block; margin: 10px auto;} #giving_container #thermometer_container #thermometer_buttons .button_container{float: none !important; margin: 0 auto !important;} #giving_container #client_story #image_container{text-align: center} #giving_container #client_story #orange_content{height: auto;} #giving_container #client_story #orange_content div#author{position: inherit; bottom: 0;} #giving_container #thermometer_container #thermometer{width: 100%; margin: 10px auto 20px;} #giving_container #thermometer_container #thermometer .empty {height: 360px;margin-left: auto;margin-right: auto;text-align: right;width: 100%;background-size: 100% 100% !important;} #giving_container #thermometer_container #thermometer .full{ background-size: 100% auto !important;} } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { #slider .orbit-wrapper .orbit-caption {bottom: -182px; left:0; width: 100% !important;} #giving_container #thermometer_container #thermometer {width: 310px;margin-bottom: 10px;position: relative; margin: 10px auto 20px;} #giving_container #thermometer_container #thermometer .empty {height: 400px;margin-left: auto;margin-right: auto;text-align: right;width: 310px;} #giving_container #thermometer_container #thermometer .full {height: 0px;width: 100%;position: absolute;left: 0;bottom: 0;} }