/* * Used for tablet and mobile devices */ #header.header-alt { height: auto; z-index: 1600; width:100%; background: #000; top: 0; padding: 25px 0; margin: 0; position: fixed; } #header.header-alt .header-right > .social-links { display: none; } #header.header-alt .header-right > nav { clear: right; float:right; margin: 7px 0 0 0; } #header.header-alt .logo { margin: 0; padding: 0; } #header.header-alt .logo img { width: 300px; margin: 0; } @media only screen and (min-width: 1099px) { #news ul#posts-grid li:nth-child(3n+1) {clear: both;} } @media only screen and (min-width: 1000px) and (max-width: 1098px) { #news ul#posts-grid li {width: calc(50% - 20px);} #news ul#posts-grid li:nth-child(3n) {margin-right: 40px;} #news ul#posts-grid li:nth-child(3n+1) {clear: none;} #news ul#posts-grid li:nth-child(2n) {margin-right: 0;} #news ul#posts-grid li:nth-child(2n+1) {clear: both;} } @media only screen and (max-width: 1460px) { .container { width: 100%; max-width: none; margin:0; padding: 0 50px; } #header .logo { width: 300px; margin-top: 0; } #header.header-alt .logo { width: 300px; margin-top: 0; } #header .header-right nav.menu-main-menu-container { margin: 8px 0 0 0; } #header .header-right nav.menu-main-menu-container ul li { margin:0 20px 0 0; } #header .header-right nav.menu-main-menu-container ul li a { padding-bottom: 15px; font-size:16px; letter-spacing: 2px; } #secondary-left {float: left; width: 400px;} #secondary-right {float: right; width: calc(100% - 460px);} #featured-links ul li h2 {max-width: 230px;} } @media only screen and (max-width: 1199px) { #header .logo, #header.header-alt .logo { width: 280px; } #header .logo img, #header.header-alt .logo img { width: 100%; } #header .header-right nav.menu-main-menu-container { margin: 5px 0 0 0; } #header .header-right nav.menu-main-menu-container ul li {margin: 0 15px 0 0;} #header .header-right nav.menu-main-menu-container ul li a {font-size: 15px;} #expect ul li, .page-id-107 #expect ul li:nth-child(4n) {background-size: 24px 24px; width: 31.33%; margin: 0 3% 0 0;} .page-id-107 #expect ul li:nth-child(3n) {margin-right: 0;} #secondary-left {float: left; width: 350px;} #secondary-right {float: right; width: calc(100% - 410px);} #featured-links ul li p {font-size: 16px;} } @media only screen and (max-width: 1099px) { #header .logo { padding: 22px 0 0 0; width: 240px; } #header.header-alt .logo { width: 240px; } #header .logo img, #header.header-alt .logo img { width: 100%; } #header .header-right > .social-links, #header .header-right > nav.menu-main-menu-container { display: none !important; } #menu-icon {display: block; float: right; margin-top: 30px;} #menu-icon img {width: 32px; height: auto;} #menu-icon:hover { opacity: 0.8; } #header.header-alt #menu-icon span {margin-top: 0;} #expect ul li, #expect ul li:nth-child(3n), #expect ul li:nth-child(4n), .page-id-107 #expect ul li, .page-id-107 #expect ul li:nth-child(3n) {width: 48%; padding: 5px 0 20px 45px; margin: 0 4% 0 0;} #expect ul li:nth-child(2n), .page-id-107 #expect ul li:nth-child(2n) {margin-right: 0;} #expect ul li:nth-child(3n+1) {clear: none;} } @media only screen and (max-width: 999px) { #header .logo { padding: 22px 0 0 0; width: 320px; } #home-hero, #home-hero .slides li { height: calc(100vh - 400px); } #expect h2 {text-align: center;} #expect ul {width: 100%; margin: auto; max-width: 500px;} #expect ul li, #expect ul li:nth-child(2n), #expect ul li:nth-child(3n), #expect ul li:nth-child(4n), .page-id-107 #expect ul li, .page-id-107 #expect ul li:nth-child(3n), .page-id-107 #expect ul li:nth-child(4n) {width: 100%; padding: 5px 0 20px 45px; margin: 0;} .home #welcome {padding: 20px 0 30px 0;} #featured-links {height: auto; padding: 0;} #featured-links ul li {width: 100%; max-width: 400px;} #featured-links ul li {float: none; width: 100%; margin: 20px auto;} #featured-links ul li:nth-child(3n) {margin-right: auto;} featured-links ul li img {width: 32px;} #featured-links ul li h2 { font-size: 21px; max-width: 100%; } #featured-links ul li p {font-size: 18px;} #welcome {padding: 20px 0;} #welcome-left, #welcome-right, .home #welcome-left, .home #welcome-right {float: none; width: 94%; margin: 3% auto;} #welcome-left h1, #welcome-left h2 { font-size: 28px; } #welcome-left br { display: none; } #secondary {padding: 50px 0;} #secondary-left {float: none; width: 100%;} #secondary-left img {margin-left: auto; margin-right: auto;} #secondary-right {float: none; width: 100%; padding-top: 30px; } #websites {margin-top: -180px;} #websites ul li { float: none; padding: 0; margin: 25px auto; width: 94%; max-width: 500px; height: 300px; } #websites ul li a { height: 300px; } #websites ul li:nth-child(3n) {margin-right: auto;} #news {padding-bottom: 0;} #news h2 {float: none; margin: 0 auto 10px auto; width: 100%; text-align: center; line-height: 1;} #news h2 .icon {float: none; display: block; margin: 0 auto 10px auto;} #news .view-all {line-height: 1; float: none; text-align: center; font-size: 18px; width: 100%;} #news ul#posts-grid li {float: none; width: 100%; max-width: 500px; margin: 30px auto 50px auto;} #news ul#posts-grid li h3 { font-size: 24px; } #news ul#posts-grid li p {font-size: 16px;;} #news ul#posts-grid li:nth-child(3n) {margin-right: auto;} #lessons-programs.prefooter {padding-top: 50px;} #lessons-programs h2 {font-size: 24px; float: none; width: 100%; text-align: center; } #lessons-programs .view-all {float: none; text-align: center; width: 100%;} #lessons-programs ul li {float: none; width: 100%; max-width: 400px; height: 200px; margin: 0 auto 40px auto;} #lessons-programs ul li:nth-child(2n), #lessons-programs ul li:nth-child(3n), #lessons-programs ul li:nth-child(4n) {margin-right: auto;} #lessons-programs ul li a { height: 200px; } #programs ul li img.gradient {z-index: 1; display: block; width: 100%; height: auto; position: absolute; bottom:0; left: 0; } #programs-links {padding-bottom: 20px;} /* programs */ #programs ul li {float: none; width: 100%; max-width: 640px; margin: 0 auto 40px auto;} #programs ul li:nth-child(2n) {margin-right: auto;} #programs ul li h2, #programs ul li p {min-height: 0;} /* contact */ .left-side, .right-side {width: 100%; float: none;} .right-side {padding-top: 20px;} .page-template-template-contact .left-side {width: 100%; float: none;} .page-template-template-contact .right-side {width: 100%; float: none; padding-top: 50px;} } @media only screen and (min-width: 769px) { .show-desktop {display: block;} .show-mobile {display: none !important;} } @media only screen and (max-width: 768px) { .show-desktop {display: none !important;} .show-mobile {display: block;} #testimonials h2 {font-size: 24px;} #testimonials .view-all {font-size: 16px;} #testimonials .slider .slides li blockquote { font-size:21px; } #testimonials .slider .slides li .author { font-size:16px; } body h3.collapseomatic span { left: inherit; top: inherit; position: relative; display: block; } #mid-banner {height: 40vh;} /* forms */ .field .col-list span.wpcf7-list-item {width: 100%; float: none;} /* footer */ footer p {text-align: center; float: none; width: 100%;} #footer-row-1 img {margin: 0 auto 20px auto; float: none; } #footer-row-2 img {display: none;} #footer-row-1 p {line-height: 1.25;} #footer-row-1 p span {display: none;} #footer-row-1 p br {display: block;} } @media only screen and (max-width: 479px) { .container { width: 100%; max-width: none; margin:0; padding: 0 25px; } h1 {font-size: 36px;} #header, #page-hero, #page-hero-inner {height: 240px;} #page-hero h1 {margin-top: 60px;} #header .logo, #header.header-alt .logo { padding: 24px 0 0 0; width: 240px; } #header .logo img, #header.header-alt .logo img { width: 240px; } #menu-icon {margin-top: 30px;} #header.header-alt {padding-top: 0 !important;} #welcome-left h1, #welcome-left h2 {font-size: 24px;} #mid-banner {height: 30vh;} .gallery .gallery-item {width: calc(50% - 22px) !important;} .tour-gallery {margin: 5px 0;} .tour-gallery li {width: 100%; margin: 5px 0;} .page-template-template-camps #welcome h2 {font-size: 28px;} .page-template-template-camps #welcome h3 {font-size: 21px;} } @media only screen and (max-width: 389px) { #header .logo, #header.header-alt .logo { max-width: 250px; padding-top: 30px;} #menu-icon { display: block; margin-top: 35px;} #page-hero h1 { margin-top: 85px; } #featured-links ul li p {font-size: 16px;} }