/* Smaller than standard 960 (devices and browsers) */ @media only screen and (min-width: 1150px) { #header nav { display:block !important; } } @media only screen and (max-width: 1199px) { #home-middle-bar { background:#000; color:#FFF; padding:50px 0 20px 0; text-align: center; } #home-middle-bar .button {float: none; display: inline-block; font-size:22px; padding:14px 40px; margin: 5px auto 30px auto; text-align: center;} #home-middle-bar .content { float: none; width: 100%; margin: 0 auto 30px auto; text-align: center; } #page-middle-bar .button { float: none; margin: 0 auto; display: inline-block; color: #fff; text-decoration: none;} #page-middle-bar .button:hover { float: none; margin:30px 0 0 0; color: #fff; text-decoration: none;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 1200px) { .container { width:100%; padding-left:2%; padding-right: 2%; } #footer .footer-left {float:left; margin:0 0 50px 0; width: 800px;} } @media only screen and (max-height: 799px) and (min-height: 500px) { #home-hero h2 {font-size: 42px;} #home-hero p {font-size: 21px; margin: 15px 0;} #home-hero .button {font-size: 16px; padding: 12px 30px; margin: 10px 0 0 0;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 999px) { .view-desktop { display: none !important; } .view-mobile { display: block !important; } #home-services li { display:block; margin:0 auto 50px auto; width:100%; max-width:400px; } #home-services li:nth-child(2) { margin:0 auto 50px auto; width:100%; } #home-services li img { margin:0 auto 30px auto; } #home-services li h3 { font-size:24px; margin:0; letter-spacing:-0.5px; } #home-services li:last-child { margin-bottom:0; } #cherwell-events-mobile-banner {margin: auto; width: 100%; max-width: 480px; height: auto;} .page-template-template_events #main h2 {text-align: center;} #main #full-content .events-grid li, #main #full-content .events-grid li:last-child, #footer-events #full-content .events-grid li, body #footer-events #full-content .events-grid li:last-child { width: 46%; margin: 2%; } #main #full-content .events-grid li:nth-child(3n), #footer-events #full-content .events-grid li:nth-child(3n) {margin-right: 2%;} #main #full-content .events-grid li:nth-child(2n), #footer-events #full-content .events-grid li:nth-child(2n) {margin-right: 0;} #main #full-content .events-grid li:nth-child(3n+1), #footer-events #full-content .events-grid li:nth-child(3n+1) {clear: none;} /* events detail */ .single #full-content {margin: -250px 2% -50px 2%; width: 96%;} .single #register .button, .single #interested .button {min-width: 100px;} .single #interested .button:hover {background-color: #333;;} #interested p {padding: 10px 2% 30px 2%;} .single #full-content #blurb p {font-size: 21px;} #main #full-content #products-grid li { height: 300px; width: 46%;} #main #full-content #products-grid li:nth-child(3n+1) {clear: none;} /* products */ #featured-product-image {float: none; width: 100%; height: 200px;} #featured-product-image img {width: 80%;} #featured-product-text {float: none; width: 100%; height: auto; padding: 40px;} #featured-product-text .content {left: inherit; width: 90%; top: inherit; position: relative; transform: none; margin: auto; text-align: center;} #product-boxes-intro {text-align: center;} /* clear 2020 */ #clear-s2 #left-text, #clear-s2 #video-right {float: none; width: 100%;} #clear-s4 ul li {float: none; width: 100%; max-width: 550px; margin: 30px auto;} #clear-s4 ul li:last-child {margin-right: auto;} /* cherwell eBook */ .page-template-page-cherwell-download #page-hero .caption h1 {font-size: 24px;} .page-template-page-cherwell-download #page-hero .caption h2 {font-size: 36px;} .page-template-page-cherwell-download #left-content {float: none; width: 100%; padding: 30px 0;} .page-template-page-cherwell-download aside#sidebar {float: none; width: 100%; margin: auto; max-width: 500px;} .footer-left {display: none;} #footer .footer-right { float:none; width: 100%; text-align: center;} #footer .footer-right .social-links { width: 80px; margin: auto; float: none; display: block; } #footer .copyright { margin:0; font-size:14px; clear:both; text-align: center;} /* responsive menu */ #responsive-menu-container #responsive-menu-title {padding: 20px 20px !important;} #responsive-menu-container #responsive-menu-title #responsive-menu-title-image {margin-bottom: 0 !important;} #responsive-menu-container #responsive-menu li.responsive-menu-item a {line-height: 50px !important; height: 50px !important; padding: 0 3% !important;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .container { width:100%; padding-left:20px; padding-right:20px; } .title { letter-spacing:1.5px; } #main #right-content {float: none; width: auto;} #main #right-content .alignright {float: none; margin: 20px auto;} #sidebar {float: none; width: auto; padding: 0;} #header-top { padding:15px 0; text-align:center; } #header-top nav { float:none; margin:0 0 10px 0; } #header-top nav li { float:none; display:inline-block; margin:0 3px; } #header-top nav li:last-child { margin:0 3px; } #header-top .header-top-right { float:none; } #header-top .header-top-right li { float:none; display:inline-block; margin:0 3px; vertical-align:middle; } #header-top .header-top-right li:first-child { margin:0 3px; } #header-top .header-top-right li:last-child { margin:0 3px; } #header .header-right { display: none; } #header nav { float:none; margin:0; padding:15px 0 0 0; } #header nav li { float:none; margin:0; line-height:1.2; } #header nav li:last-child { margin:0; } #header nav li a { font-size:20px; } #home-hero .caption {padding-top: 15vh; width: auto;} #home-hero .logo-above {padding-top: 0;} #home-hero .logo-below {padding-top: 3vh; padding-bottom: 3vh;} .slider-logo {max-height: 9vh; width: auto; margin: 20px auto;} #home-hero h2 {font-size:48px;} #home-middle-bar { text-align:center; } #home-middle-bar .button { float:none; font-size:16px; padding:9px 30px; margin:0 0 30px 0; } #home-middle-bar .content { margin-left:0; } #home-middle-bar .content p { font-size:28px; } #home-clients p br { display:none; } #home-clients li { display:block; width:100%; margin:0 0 50px 0; } #home-clients li img { margin:0 auto; } #page-middle-bar {text-align: center;} #page-middle-bar .content { float: none; width: 100%; text-align: center; padding-bottom: 20px; } #page-middle-bar .button { float: none; margin: auto; display: inline-block; } #page-middle-bar .button:hover { margin: auto; } #main #full-content #products-grid li, #footer-events #full-content #products-grid li { height: 325px;} #main #full-content .events-grid, #footer-events #full-content .events-grid {width: 100%; margin: 2% auto; max-width: 360px;} #main #full-content .events-grid li, #main #full-content .events-grid li:last-child, #footer-events #full-content .events-grid li, body #footer-events #full-content .events-grid li:last-child { width: 100%; margin: 2% auto; max-width: 360px; } #main #full-content .events-grid li:nth-child(3n), #footer-events #full-content .events-grid li:nth-child(3n) {margin-right: auto;} #main #full-content .events-grid li:nth-child(2n), #footer-events #full-content .events-grid li:nth-child(2n) {margin-right: auto;} } @media only screen and (max-width: 640px) { #page-hero h1 {font-size: 48px;} #home-hero, #home-hero .slides li {height: 520px; min-height: 520px;} #home-hero .caption {padding-top: 100px; width: auto;} #home-hero .logo-above {padding-top: 0;} #home-hero .logo-below {padding-top: 3vh; padding-bottom: 3vh;} #home-hero h2 {padding-top: 15px; font-size:26px;} #home-hero p {font-size:18px;} #home-service-management p {font-size: 18px;} .event-h { display: block; width: auto; margin-bottom: 40px; padding: 0 20px 40px 0; border-bottom: solid 1px #ccc; } .event-h .date { width:158px; margin:0 auto 30px auto; float: none; } body #main #full-content .event .month { font-size:13px;} .event-h .day { font-size:64px !important; padding: 0 20px 0 20px; margin:0; font-weight:300; } .event-h p { font-size:16px; color:#363636; margin:0; } body .event-h .month { background:#202059; color:#FFF; padding:10px 20px; letter-spacing:2px; margin:0; font-weight: normal; font-size:14px; font-family:'Montserrat', Helvetica, Arial, sans-serif; text-transform: uppercase; } .event-h .day { font-size:80px; background:#EBEBEB; color:#363636; padding:15px 20px 17px 20px; margin:0; font-weight:300; } #main #full-content .event-h h3 { text-align: center; font-size: 22px; } .event-h p { text-align: center; font-size: 18px; } body #main .event-h .button {margin: auto; display: block; width: 160px; text-align: center;} #event-hero h1 {font-size: 36px;} #page-middle-bar .content p {font-size: 18px;} body #full-content .events-grid li h3, body #full-content .events-grid li h3 a {font-size: 21px; font-weight: 400;} #main #full-content .events-grid li .date, #footer-events #full-content .events-grid li .date {font-size: 14px;} #main #full-content #products-grid li, #footer-events #full-content #products-grid li { height: 310px; max-width: 440px; width: 90%; float: none; margin: 30px auto;} #main #full-content #products-grid li img, #footer-events #full-content #products-grid li img {margin: 0 auto 10px auto;} /* product */ #featured-product-image {height: 160px;} #featured-product-text {padding: 25px;} #featured-product-text .content {width: 100%;} #featured-product-text .content p {font-size: 17px;} #featured-product-text .content a {font-size: 15px;} #main #full-content #products-grid li {padding-top: 24px; padding-bottom: 24px; height: auto;} #main #full-content #products-grid li p {padding-top: 15px; padding-bottom: 15px;} #footer .footer-left nav {display: none;} /* cf7 */ .wpcf7-form span.field-50a { float: none; width: 100%; margin: 0; } .wpcf7-form span.field-50b { float: none; width: 100%; margin: 0; display: block; padding-top: 30px;} } @media only screen and (max-width: 480px) { #page-hero h1 {font-size: 36px;} #home-hero, #home-hero .slides li {height: 500px; min-height: 500px;} #home-hero .caption {padding-top: 100px; width: auto;} #home-hero .logo-above {padding-top: 0;} #home-hero .logo-below {padding-top: 3vh; padding-bottom: 3vh;} #home-hero h2 {font-size:28px;} #home-hero br {display: none;} #main #right-content h2, #main #full-content h2 {font-size: 32px;} body #full-content .events-grid li h3, body #full-content .events-grid li h3 a {font-size: 18px;} #main #full-content .events-grid li .date, #footer-events #full-content .events-grid li .date {font-size: 13px;} }