/* File Name: style.css Theme Name: Affairs to Remember Theme URI: http://affairs.com Description: Theme Developed for AFFAIRS TO REMEMBER Author: Hemispheres United Author URI: http://hemispheresunited.com Version: 1.0.0 License: RESTRICTED USE - All Rights Reserved by Affairs to Remember © 2020 */ @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); /* DEFAULT STYLES */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Red Hat Text", sans-serif; font-size: 20px; line-height: 1.6em; } img { max-width: initial; } h1, h2, h3, h4, h5, h6 { margin-block-start: 0; margin-block-end: 0; margin: 0; } a:link { color: #4f8502; text-decoration: none; } a:visited { color: #4f8502; } a:link:active, a:visited:active { color: #4f8502; } ul, li { width: auto; margin: 0; padding: 0; } p { margin: 0; text-indent: 0; } * { box-sizing: border-box; } small { font-variant: small-caps; text-transform: uppercase; font-size: 0.7em !important; } h1 { font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: 12px; line-height: 1.1em; } h2 { font-size: 36px; font-weight: 400; text-transform: uppercase; letter-spacing: 4px; line-height: 1.1em; } h3 { font-size: 22px; text-transform: uppercase; font-weight: 500; letter-spacing: 3px; line-height: 1.1em; } .fade-item { opacity: 0; } .fade-item:first-child { opacity: 1; } .arrows { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%; } .arrows .arrows-mask { overflow: hidden; flex-grow: 1; flex-shrink: 1; } .arrows .left-arrow, .arrows .right-arrow { display: flex; align-items: center; cursor: pointer; z-index: 5; flex-basis: 42px; flex-shrink: 0; flex-grow: 0; opacity: 0.2; } .arrows .left-arrow img, .arrows .right-arrow img { padding: 12px;} .left-arrow img { transform: rotate(90deg); } .right-arrow img { transform: rotate(-90deg); } .arrows #gallery-large-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; list-style: none; position: relative; } .section-number { position: absolute; font-size: 120px; color: #9996; background-color: transparent; line-height: 1em; z-index: 20; } .x { } /* UNIVERSAL STYLES */ header { width: 100%; margin-bottom: 0; } #header-logo { width: 100%; background-color: white; padding-top: 8px; display: flex; justify-content: center; line-height: 0; } #header-logo img { height: 84px; } #nav-icon { display: none; height: 30px; flex-basis: 30px; flex-grow: 0; margin: 11px; z-index: 5; align-self: center; padding-left: 24px;} #nav-icon .three-lines { position: absolute; background: transparent; width: 30px; height: 30px; z-index: 5; } #nav-icon .x-mark { position: absolute; background: transparent; display: none; width: 30px; height: 30px; z-index: 5; } #nav-icon .bar { width: 30px; height: 4px; } #nav-icon .bar-inner { width: 100%; height: 100%; background-color: black; border-radius: 2px; } #nav-icon #middle-bar { margin-top: 9px; } #nav-icon #lower-bar { margin-top: 9px; } #main-nav { width: 100%; background-color: transparent; } #main-nav ul { list-style: none; } #main-navigation { text-transform: uppercase; font-weight: 400; letter-spacing: 4px; line-height: 1.2em; } #main-nav #main-navigation { color: #000f; text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; align-content: flex-start; width: 100%; flex-grow: 0; z-index: 2; } .main-nav-item { flex-shrink: 1; flex-grow: 0; } #main-nav .main-nav-block { margin: 0; margin-bottom: 4px; padding: 12px; border: 2px solid #0000; width: max-content; cursor: pointer; } #main-nav .main-nav-block.selected { border: 2px solid black; margin: 4px; } #main-nav:hover .main-nav-block.selected { border: 2px solid black; } .main-nav-link:link, .main-nav-link:visited, .main-nav-link:link:active, .main-nav-link:visited:active { color: black; } #main-nav:hover .main-nav-link, #main-nav:hover .main-nav-block { color: black; } #main-nav:hover .main-nav-block:hover { color: #4f8502; border: 2px solid #4f8502; } #main-nav:hover .main-nav-block:hover .main-nav-link { color: #4f8502; } #main-nav.no-slideshow #main-navigation { background-color: white; position: relative; } #main-nav.no-slideshow .main-nav-link, #main-nav.no-slideshow .main-nav-block { color: black; } #main-nav.no-slideshow .main-nav-block.selected { color: black; border: 2px solid black; } #main-nav.no-slideshow #main-nav-shadow { background-image: none; } .main-nav-item.left .sub-nav { text-align: left; } .main-nav-item.right .sub-nav { text-align: right; } .sub-nav { display: none; background-color: white; position: absolute; width: 100%; left: 0; } .main-nav-item:hover .sub-nav { display: flex; } .sub-nav-list { list-style: none; background-color: transparent; display: inline-block; vertical-align: top; z-index: 2; } .sub-nav-item { color: black; border: 2px solid #0000; cursor: pointer; padding: 6px; margin: 4px; } .sub-nav-item:last-of-type { margin-bottom: 4px; } .sub-nav-item:hover { border: 2px solid #4f8502; } .sub-nav-item:hover a { color: #4f8502; } #sub-navigation { display: block; height: 0; background-color: white; width: 100vw; top: initial; z-index: 1; overflow: hidden; } #slideshow { width: 100%; z-index: -1; } .slide { width: 100%; position: absolute; z-index: -1; overflow: hidden; } #slideshow picture { min-width: 100%; display: flex; } .slideshow-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } #page-title { flex-basis: 33%; flex-shrink: 1; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #393331; width: min-content; } #title-container { width: 100%; } #title-container h1 { color: #e2e1df; margin: 48px; text-align: center; } #page-nav { text-transform: uppercase; font-weight: 500; letter-spacing: 4px; margin: 48px; margin-top: 0; } #page-nav ul { list-style: none; } #page-nav li { color: #b2aeaa; text-align: center; margin: 16px;} #page-nav li:hover { color: white; } #page-nav a { color: #b2aeaa; } #page-nav li:hover a { color: white; } #page-nav li:last-of-type { margin-bottom: 0; } footer { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; padding-top: 32px; } footer #contact-form { flex-basis: 640px; flex-shrink: 0; flex-grow: 0; padding: 30px; } #footer-address { flex-shrink: 1; flex-grow: 1; padding: 30px; text-align: center; } #footer-nav { flex-basis: 280px; flex-shrink: 2; flex-grow: 1; } #footer-social { flex-shrink: 2; flex-grow: 1; padding: 30px; text-align: center; } footer #contact-form h3 { color: black; margin-bottom: 20px; text-align: center; } footer #contact-form input, footer #contact-form textarea, footer #contact-form select { width: 100%; margin: 0; background-color: #ececec; padding: 4px; display: block; border: 0px; outline: 0px; border-radius: 4px; } footer #contact-form input::placeholder { color: #888; font-style: italic; } footer #contact-form label { text-transform: uppercase; font-weight: 500; color: black; margin-bottom: 12px; } footer #contact-form button { background-color: transparent; border: none; width: 100%; text-align: center; cursor: pointer; margin-top: 8px; } footer #contact-form textarea { resize: vertical; } footer #contact-form #submit-button { color: #4f8502;} footer #contact-form #submit-button:hover { color: black;} .contact-warning { display: none; color: red; text-align: right; width: 100%; font-size: 60%; line-height: 1em; } #footer-logo { padding-bottom: 20px; } #footer-address p { text-transform: uppercase; text-align: center; } #footer-nav li { padding-bottom: 20px; list-style: none; text-transform: uppercase; text-align: center; } #footer-nav a:link, #footer-nav a:visited { color: black; } #footer-nav a:hover { color: #4f8502; } #footer-social { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } #footer-social p { width: 90px; text-align: center; line-height: 30px; margin: 0 auto; margin-bottom: 30px; } #footer-social #social-icons { width: 124px; display: flex; flex-direction: row; flex-wrap: wrap; } #footer-social .social-media-icon { width: 45px; height: 45px; list-style: none; margin: 8px; } #copyright { width: 100%; margin: 0 auto; padding: 20px; text-transform: none; text-align: center; font-size: 10px; line-height: 1.1em; } .google { width: auto; background-color: white; padding: 8px 0; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 8px; } #contact-form .google { width: 100%; background-color: #A8955F; padding: 24px 0; } footer #contact-form .google { background-color: transparent; } .google-badge { display: none !important; font-size: 50%; line-height: 0.9; text-align: center; margin: 8px 0; } .grecaptcha-badge { display: none !important; } #please-wait { background-color: #393331; color: white; width: 90%; height: 90%; border-radius: 16px; position: fixed; z-index: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 110%; left: 5%; top: 5%; display: none; padding: 24px; } #please-wait .message { margin-bottom: 24px; margin-bottom: 12px; } #please-wait .message::before { content: "Please give us a moment to confirm that your message has been sent..."; } #please-wait .hourglass { background-image: url("graphics/hourglass.png"); background-color: transparent; width: 64px; height: 64px; } /* SECTIONS ----------------------------------------------------------------------- */ #content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .section { display: flex; flex-grow: 1; flex-shrink: 1; justify-content: center; align-items: stretch; } .section.hidden { display: none; } .quarter { flex-basis: 25%; } .third { flex-basis: 33%; } .half { flex-basis: 50%; } .twothirds { flex-basis: 67%; } .threequarters { flex-basis: 75%; } .full { flex-basis: 100%; } .copy:nth-of-type(1n+1) { background-color: #f8f4ef; } .copy:nth-of-type(2n+2) { background-color: #ecebea; } .copy:nth-of-type(3n+3) { background-color: #d9d7d5; } .copy:nth-of-type(4n+4) { background-color: #c5c2bf; } .copy:nth-of-type(5n+5) { background-color: #e2e1df; } .copy:nth-of-type(6n+6) { background-color: #cfcdca; } .copy .section-box { padding: 64px; } .copy .section-box *:last-child { margin-bottom: 0; } .copy.full .section-box { width: 100%; } .copy .copy-block { margin-bottom: 32px; text-align: justify; } .copy h2 { margin: 0; margin-bottom: 32px; } .copy h2:only-child { margin-bottom: 0; } .copy-block p { margin-bottom: 1.6em; } .copy-block ul { margin-left: 32px; margin-bottom: 1.6em; } .copy-block li { list-style: circle inside url("graphics/bullet.svg"); text-align: left; } .copy-block ul ul { margin-bottom: 0; } .privacy-date { padding: 64px; padding-top: 0; justify-content: flex-start; } .shrinkables { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; } .shrink-box { flex-basis: 100%; flex-shrink: 1; flex-grow: 1; margin: 0; padding: 32px; } .shrink-title h2 { margin-bottom: 16px; } .read-more h3 { text-align: right; cursor: pointer; } .shrink-hidden { display: none; } .quick-links li { list-style: none; text-align: right; margin: 16px 0; } .quick-links li:last-of-type { margin-bottom: 0; } .quick-links a { font-size: 20px; text-transform: uppercase; font-weight: 500; line-height: 0.9em; } .quick-links a:hover { color: #393331; } .photo-single .section-box { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; } .photo-single-box { display: flex; flex-shrink: 1; flex-grow: 1; overflow: hidden; flex-basis: 30%; height: 50%; } .photo-single-box:nth-of-type(odd).photo-single-box:last-child { flex-basis: 100%; flex-shrink: 0; height: 50%; } .photo-single-box:first-of-type.photo-single-box:last-child { flex-basis: 100%; flex-shrink: 0; height: 100%; } .photo-single-box.double { flex-basis: 100%; flex-shrink: 0; height: 50%; } .photo-single-box picture { min-width: 100%; min-height: 100%; display: flex; } .photo-single-box img { width: 100%; max-height: 100%; object-fit: cover; } .link { justify-content: flex-start; cursor: pointer; overflow: hidden; } .link:hover { filter: brightness(110%); } .link:nth-of-type(1n+1) { background-color: #826a2a; } .link:nth-of-type(2n+2) { background-color: #575150; } .link:nth-of-type(3n+3) { background-color: #3a3324; } .link .section-box { display: flex; flex-direction: row; flex-wrap: nowrap; flex-basis: 100%; } .link.flipped .section-box { direction: rtl; } .link-text { flex-shrink: 1; flex-grow: 1; color: white; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px; } .link-image { display: flex; flex-shrink: 0; flex-grow: 0; overflow: hidden; flex-basis: 50%; } .link-image picture { min-width: 100%; min-height: 100%; display: flex; } .link-image img { width: 100%; max-height: 100%; object-fit: cover; } .link.full .link-image { flex-basis: 33%; } .link.threequarts .link-image { flex-basis: 25%; } .link.twothirds .link-image { flex-basis: 50%; } .link-text h2 { margin-bottom: 20px; text-align: left; } .link-text a { color: #ffff; } .link-copy { text-align: left; } .link.flipped .section-box .link-copy { direction: ltr; text-align: right; } .link.flipped .section-box h2 { direction: ltr; text-align: right; } .quote { font-size: 28px; font-weight: 500; display: flex; justify-content: center; align-items: center; text-align: center; padding: 80px; background-color: #A7BDC1; color: #fcf9f5; } .banner { display: flex; justify-content: center; align-items: center; text-align: center; padding: 60px 120px; color: white; background-color: #393331; } .banner-text { color: white; } .testimonials { color: white; background-color: #6C7830; justify-content: flex-start; overflow: hidden; } .testimonials .arrow img { filter: brightness(200%); } .testimonial-list { position: relative; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .testimonial { position: relative; flex-basis: 100%; flex-shrink: 0; flex-grow: 0; padding: 80px; align-self: center; } .testimonial-copy { text-align: justify; margin-bottom: 20px; } .testimonials .fleuron { font-family: serif; font-size: 36px; color: #fff3; } .testimonial-attribution { width: 100%; text-align: right; font-size: 24px; font-style: italic; color: #fff9; } .testimonial-date { width: 100%; text-align: right; text-transform: uppercase; letter-spacing: 4px; font-size: 18px; font-weight: 500; } .testimonials li { list-style: none; } .facebook-feed .section-box { flex-basis: 100%; color: white; padding: 16px; font-size: 80%; } .facebook-feed #cff { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; } .cff-visual-header, .cff-item, .cff-likebox { flex-basis: 20%; flex-grow: 1; flex-shrink: 1; background-color: #283757 !important; margin: 16px !important; border-radius: 8px; padding: 0px !important; } .cff-visual-header { } .cff-header-text { padding: 16px; } .cff-item { padding: 16px !important; } .cff-likebox { flex-basis: 100%; flex-grow: 1; flex-shrink: 0; background-color: #283757 !important; margin: 16px; border-radius: 8px; float: none !important; } .facebook-feed a { color: white; } .section.instagram-feed { background-color: white !important; padding: 32px !important; } .instagram-logo { width: 100%; text-align: center; } .instagram-logo img { width: 140px; } #sb_instagram { background-color: transparent !important; height: initial !important; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; flex-basis: 100% !important; } .sb_instagram_header { margin: 0; align-self: center; } #sbi_images { flex-grow: 1; flex-shrink: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #sbi_load { color: #808080; text-align: center; font-size: 20px; text-transform: uppercase; font-weight: 500; letter-spacing: 4px; line-height: 0.9em; max-width: 120px; } .sbi_header_img { width: 120px; height: 120px; margin: auto 28px; display: block; border-radius: 90px; border: 2px solid #a0a0a0; overflow: hidden; } .sbi_header_img img { width: 120px; height: 120px; margin: 0; } .sbi_item { display: inline-block; } .sbi_item a { height: 120px !important; width: 120px !important; border-radius: 8px; margin: 14px; display: inline-block; } .sbi_load_btn { width: 100%; display: block; background-color: transparent !important; } .sbi_follow_btn { width: 100%; display: block; text-align: center; } .sbi_follow_btn svg { width: 48px; height: auto; display: block; margin: 20px auto; } #sb_instagram h3 { display: none; } .sbi_new_logo { display: none; } .sbi_lightbox_carousel_icon { display: none; } .sbi_item span { display: none; } .instagram-feed a { background-color: transparent !important; } /* GALLERIES --------------------------------------------------------------*/ #gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; list-style: none; margin: 60px; width: 100%; align-items: stretch; } #gallery .gallery-image { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 8px; padding: 0; cursor: pointer; } #gallery .gallery-image img { border-radius: 8px; } .gallery-large { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; display: none; overflow: hidden; background-color: #fffc; flex-direction: column; z-index: 10; } .gallery-image-and-arrows { display: flex; flex-direction: row; width: 100%; height: auto; padding: 10px; } .arrows .gallery-large-arrow { width: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100%; } .gallery-large .arrow { height: 32px; margin: 8px; filter: brightness(20%); } .gallery-large-arrow { display: flex; justify-content: center; align-items: center; } .gallery-large-list { height: 100%; opacity: 0; display: flex; align-items: center; list-style: none; position: relative; } .gallery-large-image { flex-basis: 100%; flex-shrink: 0; height: 100%; display: flex; } .gallery-large-image picture { display: flex; justify-content: center; flex-basis: 100%; padding: 20px; } .gallery-large-image img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; } .gallery-large-background { position: absolute; width: 100vw; height: 100vh; left: 0; top: 0; z-index: 1; } .gallery-large-bottom-bar { z-index: 11; position: fixed; bottom: 0; display: flex; flex-direction: row; width: 100%; height: 54px; justify-content: center; align-items: center; } .gallery-large-button { font-size: 80%; text-transform: uppercase; background-color: #0005; padding: 2px 10px; margin: 8px; margin-bottom: 8px; color: white; text-align: center; cursor: pointer; } /* CAROUSELS AND SPOTLIGHTS -----------------------------------------------*/ .photo-carousel { padding: 64px 0; } .photo-carousel h2 { padding: 0 60px; padding-bottom: 32px; } .photo-carousel-text { padding: 0 60px; padding-bottom: 32px; } .photo-carousel .carousel-mask { width: 1024px; } .carousel { padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; } .carousel-left-arrow, .carousel-right-arrow { opacity: 1; flex-shrink: 0; flex-grow: 0; flex-basis: 16px; display: flex; justify-content: center; filter: brightness(170%); } .carousel-left-arrow img { transform: rotate(90deg); } .carousel-right-arrow img { align-self: flex-start; transform: rotate(-90deg); } .carousel-mask { height: 256px; overflow: hidden; } .carousel-content { position: relative; } .carousel-container { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; list-style: none; z-index: 0; } .carousel-image { flex-basis: 256px; cursor: pointer; } .carousel-image img { width: 240px; margin: 8px; border-radius: 6px; } .spotlights { display: flex; flex-direction: column; color: white; } .spotlights h2 { margin: 16px; text-align: center; color: #393331; } .spotlight { padding: 32px 0; display: flex; } .spotlight h2 { color: white; } .spotlight-inner-image { flex-grow: 0; flex-shrink: 0; } .spotlight-text { flex-grow: 1; flex-shrink: 1; margin-right: 32px; } .spotlight-copy { text-align: justify; } .spotlight .carousel-mask { height: 480px; width: 480px; } .spotlight .carousel-image { flex-basis: 480px; } .spotlight .carousel-image img { width: 480px; margin: 0; margin-right: 16px; } /* TEAM -------------------------------------------------------------------------- */ #team-nav { display: flex; flex-direction: row; justify-content: center; margin: 80px 0; align-items: flex-start; overflow: hidden; } #team-nav-right { } #team-nav ul { display: flex; flex-direction: column; list-style: none; } .team-nav-item { display: flex; flex-direction: row; align-items: flex-start; } .team-rollover { display: flex; flex-direction: row; align-items: center; flex-grow: 0; flex-shrink: 0; } .team-nav-item .team-nav-picture { margin: 8px; margin-bottom: 8px; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; flex-grow: 0; flex-shrink: 0; } .team-nav-item .team-nav-picture { filter: grayscale(100%); transition-property: filter; transition-duration: 0.6s; transition-timing-function: ease-out; } .team-nav-text { direction: ltr; margin: 8px; padding: 8px; cursor: pointer; border: 2px solid #ffff; } .team-nav-name { color: #6C7830; margin-bottom: 8px; } .team-nav-title { line-height: 1em; } .team-nav-item:hover .team-nav-picture { filter: grayscale(0); } .team-nav-item:hover .team-nav-text { border: 2px solid #6C7830; } .team-nav-item .team-nav-picture picture { height: 100%; display: flex; } .team-nav-item .team-nav-picture img { width: 100%; object-fit: cover; } #team-nav-left .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 280px; height: 324px; } #team-nav-left .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 252px; height: 352px; } #team-nav-left .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 366px; height: 238px; } #team-nav-left .team-nav-item:nth-child(4n+4) .team-nav-picture { width: 330px; height: 274px; } #team-nav-left .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 245px; height: 359px; } #team-nav-left .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 366px; height: 238px; } #team-nav-left .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 354px; height: 250px; } #team-nav-left .team-nav-item:nth-child(8n+8) .team-nav-picture { width: 242px; height: 362px; } #team-nav-right .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 259px; height: 345px; } #team-nav-right .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 330px; height: 274px; } #team-nav-right .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 274px; height: 330px; } #team-nav-right .team-nav-item:nth-child(4n+4) .team-nav-picture- { width: 356px; height: 248px; } #team-nav-right .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 257px; height: 347px; } #team-nav-right .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 237px; height: 367px; } #team-nav-right .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 330px; height: 274px; } #team-nav-left .team-nav-item { direction: rtl; } #team-nav-left .team-nav-text { text-align: right; } #team-nav-right { margin-top: 162px; } #team-nav-right .team-nav-item { justify-content: flex-start; } #team-nav-left .team-nav-name { direction: rtl; overflow: visible; } .team-block { display: none; margin: 16px; margin-top: 8px; padding: 8px; border-radius: 8px; } .team-block-container { display: flex; flex-direction: row; background-color: #fffd; border-radius: 8px; } .team-block-outside-x { margin: 8px; } .team-image { width: 100%; height: auto; display: flex; justify-content: center; } .team-image picture { min-height: 100%; display: flex; border-radius: 8px; overflow: hidden; } .team-image img { width: auto; max-height: 100%; object-fit: cover; } .team-copy { margin: 16px; max-width: 640px; direction: ltr; } .team-name { text-align: center; } .team-job-title { text-align: center; margin: 8px 0; } .team-profile { text-align: justify; margin-top: 16px; } .team-x { width: 24px; height: 24px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; position: absolute; padding: 4px; cursor: pointer; } .team-x img { width: 100%; height: 100%; object-fit: fill; max-height: initial; vertical-align: text-top; } .team-individual { margin: 160px auto; display: flex; flex-direction: row; justify-content: center; } .team-individual .team-image { flex-grow: 0; flex-shrink: 1; flex-basis: 560px; margin-right: 50px; } .team-individual .team-copy { flex-grow: 0.3; flex-shrink: 0; flex-basis: 350px; } .team-individual .team-copy h1 { color: #4f8502; } .team-individual .team-copy h2 { text-align: left; margin: 30px 0; } .team-individual .team-profile { display: block; } /* MENUS --------------------------------------------------------------- */ #menus { width: 100%; } #menu-categories { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; flex-basis: 100%; } .menu-category { list-style: none; margin: 0; flex-basis: 30%; flex-grow: 1; flex-shrink: 1; padding: 0; padding-bottom: 60px;text-align: center; } .menu-category-title { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 60px; padding-bottom: 0; margin: 0; } .menu-category-title h2 { flex-grow: 1; flex-shrink: 1; } .menu-category:nth-child(1n+1) { background-color: #6C7830; color: #fff; } .menu-category:nth-child(2n+2) { background-color: #ca922d; color: #000; } .menu-category:nth-child(3n+3) { background-color: #54283C; color: #fff; } .menu-category-links { list-style: none; padding-top: 20px; } .menu-category-link { background-color: transparent; padding: 20px; } .menu-category:nth-child(1n+1) .menu-category-links a { color: white; } .menu-category:nth-child(2n+2) .menu-category-links a { color: black; } .menu-category:nth-child(1n+1) .menu-category-links a:hover { color: black; } .menu-category:nth-child(2n+2) .menu-category-links a:hover { color: white; } .menu { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .menu-header-block { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; } .menu .page-title { flex-basis: 33%; flex-shrink: 1; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; background-color: #393331; width: min-content; } .menu .title-container { width: 100%; } .menu .title-container h1 { color: #e2e1df; margin: 48px; text-align: center; } .menu-section-header { background-color: #f2e3ce !important; flex-basis: 67%; flex-shrink: 1; flex-grow: 1; } .menu-item { width: 90%; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; margin-top: 48px; flex-wrap: wrap; } .menu-text-block { direction: ltr; text-align: right; display: flex; flex-direction: column; padding: 0; } .menu-text-block h2 { margin-bottom: 16px; } .menu-images { display: flex; flex-direction: column; overflow: hidden; margin-left: 48px; } .menu-images img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 48px; } .menu-text-block, .menu-images { flex-basis: 40%; flex-shrink: 1; flex-grow: 1; } .menu-item.backward { direction: rtl; } .menu-item.backward .menu-text-block { text-align: left; } .menu-item.backward .menu-images { margin-left: 0; margin-right: 48px; } .menu-text-block ul { margin-left: 32px; margin-bottom: 1.6em; } .menu-text-block li { margin-left: 32px; list-style: circle inside url("graphics/bullet.svg"); text-align: left; } .menu-text-block ul ul { margin-bottom: 0; } /* DELIVERY --------------------------------------------------------------- */ .delivery { width: 100%; margin: 0; } .delivery-heading { display: flex; flex-direction: row; padding: 20px; margin: 0; align-items: center; color: #f6f5f5; } .delivery-heading:nth-child(odd) { background-color: #393331; } .delivery-heading:nth-child(even) { background-color: #4c4745; } .delivery-heading h2 { margin: 0 auto; color: white; text-align: left; } .delivery-heading-copy { margin: 32px; } .delivery-menu { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; } .delivery-option-header { display: flex; flex-direction: row; width: 100%; padding: 20px; padding-left: 60px; margin: 0; cursor: pointer; color: #393331; } .delivery-option-header h2 { margin: 0 auto; color: black; align-self: flex-start; } .delivery-option-header:hover h2 { color: white; } .delivery-menu:nth-child(odd) .delivery-option-header { background-color: #b18843; background-color: #bda461; } .delivery-menu:nth-child(even) .delivery-option-header { background-color: #b99455; background-color: #cebb88;} .delivery-options { background-color: white; padding: 0; display: none; } .delivery-heading-text { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; align-items: flex-start; } .delivery .delivery-arrow { flex-grow: 0; flex-shrink: 1; padding-right: 80px; vertical-align: middle; } .delivery .delivery-arrow img { opacity: 30%; width: 32px; } .delivery-option-container { padding: 32px 16px; display: flex; flex-direction: column; } .delivery-option-container:nth-child(odd) { background-color: white; } .delivery-option-container:nth-child(even) { background-color: #f2e3ce; background-image: linear-gradient(to right, white, #f1ede2 ); } .delivery-option { margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; width: 80%; max-width: 1080px; } .delivery-option-title { margin: 0; margin-bottom: 16px; color: black; text-align: left; } .delivery-item { display: flex; flex-direction: row; width: 100%; padding: 8px; border-bottom: 1px dashed #00000018; } .delivery-item:only-of-type, .delivery-item:last-of-type { border-bottom: none; } .delivery-item-text { flex-basis: 80%; flex-shrink: 1; flex-grow: 1; margin-right: 20px; padding-right: 16px; } .delivery-item-description { margin: 0; text-align: left; } .delivery-item-description p { margin: 0.5em 0; } .delivery-item-rightside { flex-shrink: 1; flex-grow: 0; flex-basis: 20%; display: flex; flex-direction: row; text-align: right; align-content: flex-end; justify-content: space-between; } .delivery-item-pricing { display: flex; flex-direction: column; margin-right: 8px; min-width: 128px; } .delivery-item .per { margin: 0; text-align: right; font-size: 80%; line-height: 1em; } #delivery-form input { background-color: white; border-width: 1px; border-style: solid; border-color: #6b6665; } .delivery-item-inputs { align-self: flex-start; display: flex; flex-direction: column; align-items: center; width: 100%; } .delivery-item-inputs label { font-size: 90%; line-height: 1.0em; } .delivery-item-inputs input { border: 1px solid black; border-radius: 4px; width: 80px; height: 28px; margin: 4px; } .delivery-item-inputs select { border: 1px solid black; border-radius: 4px; width: 80px; height: 28px; margin: 4px; width: 100%; } .delivery-item-inputs input[type="checkbox"] { width: 20px; height: 20px; } .delivery-menu-minimum-warning { width: 100%; padding: 32px 20%; } .delivery-item .minimum-warning { color: green; } .delivery-item-dropdown-warning { display: none; color: red; } .delivery-item ul { margin-left: 32px; margin-bottom: 1.6em; } .delivery-item li { margin-left: 32px; list-style: circle inside url("graphics/bullet.svg"); } .delivery-item ul ul { margin-bottom: 0; } #order-button { width: 100%; padding: 60px; display: flex; justify-content: center; color: white; background-color: #6c7830; border: 0; cursor: pointer; align-items: center; } #order-button:hover {color: black; } #order-button img { width: 60px; height: auto; vertical-align: middle; margin: 10px; } #delivery-popup-total-block { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-bottom: 16px; } #delivery-popup-total-block h3 { flex-shrink: 1; flex-grow: 1; } #delivery-popup-total-block h3#delivery-popup-total { flex-shrink: 0; flex-grow: 0; padding-right: 16px; } #delivery-popup-total-recalculate { flex-shrink: 0; flex-grow: 0; background-color: #6c7830; padding: 8px; border-radius: 4px; color: white; cursor: pointer; } #delivery-popup-total-recalculate:hover { color: black; } .tax-message { font-size: 80%; text-align: center; flex-basis: 100%; flex-shrink: 0; margin-bottom: 24px; } #delivery-popup-form { display: none; margin: 60px 12px; margin-bottom: 0; } .delivery-popup-container { width: 720px; margin: 0 auto; } .delivery-popup-copy { text-align: justify; margin-bottom: 16px; } .delivery-popup-option { padding: 10px; background-color: #f6f5f5; margin-bottom: 10px; display: flex; flex-direction: row; border-radius: 6px; } #delivery-popup-form label { flex-grow: 1; flex-shrink: 1; margin: 16px; } #delivery-popup-form input, #delivery-popup-form select, #delivery-popup-form textarea { display: block; width: 100%; padding: 4px; border-radius: 4px; border: 1px solid grey; } #delivery-popup-form select { width: min-content; display: inline-block; } #delivery-popup-form textarea { height: 96px; resize: vertical; } #delivery-pickup-option { display: flex; flex-direction: row; flex-wrap: wrap; } #delivery-popup-form .radio { display: inline; margin-right: 20px; } #delivery-popup-form .radio label { display: inline; } #delivery-popup-form input[type="radio"] { display: inline; width: auto; } #delivery-popup-form input[type="text"] { } #delivery-popup-form input[type="tel"] { } #delivery-popup-form input[type="email"] { } #delivery-popup-form input[type="date"] { } #delivery-popup-form #order-place { display: block; width: 100%; padding: 40px; display: flex; justify-content: center; color: white; background-color: #6c7830; border: 0; cursor: pointer; align-items: center; margin-top: 40px; margin-bottom: 8px; border-radius: 8px; } #delivery-popup-form #order-place:hover { color: black; } #delivery-popup-form #order-place img { width: 60px; height: auto; vertical-align: middle; margin: 10px; } .delivery-popup-container .warning { display: none; color: red; margin-top: 4px; flex-basis: 100%; text-align: center; flex-shrink: 0; flex-grow: 1; } .order-response { padding: 60px; display: flex; flex-direction: column; align-items: center; } .order-response table { max-width: 480px; } .order-response td { padding: 8px; margin-left: 12px; } .order-response td:first-of-type { background-color: #0002; text-align: right; } .shipping-policy { display: none; font-size: 16px; padding: 16px; } .delivery ul { margin-left: 32px; margin-bottom: 1.6em; } .delivery li { margin-left: 32px; list-style: circle inside url("graphics/bullet.svg"); text-align: left; } /* VENUES ------------------------------------------------------------------*/ .venue-navigation { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } #venues { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .venues-filters-instruction { background-color: #ecebea; padding: 16px; text-align: center;} .venues-filters { flex-basis: 40%; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; } .filters { display: none; } .filters.single { display: block; } .venue-filter { padding: 16px; flex-grow: 1; flex-shrink: 1; text-align: center; cursor: pointer; } .venues-filter-title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; } .venues-filter-title h3 { flex-grow: 1; flex-shrink: 1; text-align: center; } .venue-arrow { flex-grow: 0; flex-shrink: 0; margin: 0 8px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; } .venue-arrow img { opacity: 0.5; width: auto; width: 100%; } .venues-filters { background-color: #ecebea; } .venues-list { flex-basis: 60%; flex-grow: 1; flex-shrink: 1; } .venues-list-container { background-color: white; list-style: none; background-image: linear-gradient(to bottom, white, #ecebea ); height: 100%; } .venue { padding: 16px; } .no-venues { display: none; padding: 16px; color: #a8a49f; text-align: center; } .venue-copy { background-color: #e2e1df !important; padding: 60px; } .map { background-color: #393331; padding: 32px; flex-direction: column; } .map iframe { width: 100%; height: 480px; } .venue-address { color: white; padding-bottom: 32px; font-size: 120%; text-align: center; } .venue a { color: #ad8d39; } .venue:hover { background-color: #b18843; background-color: #ad8d39; } .venue:hover a { color: white; } .venues-map .map { background-color: #f2e3ce; } .venue-criteria { background-color: #a8955f; color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .venue-property { padding: 24px 48px; text-align: center; } .venue-property ul { list-style: none; } .venues-property:nth-child(odd) .venues-filter-title { background-color: #dfceb2; color: black; } .venues-property:nth-child(odd) .venue-filter:nth-child(odd) { background-color: #f2ece4; color: #ad8d39; } .venues-property:nth-child(odd) .venue-filter:nth-child(odd).on { background-color: #ad8d39; color: #f2ece4; } .venues-property:nth-child(odd) .venue-filter:nth-child(even) { background-color: #f8f4ef; color: #b5984c;} .venues-property:nth-child(odd) .venue-filter:nth-child(even).on { background-color: #b5984c;color: #f8f4ef; } .venues-property:nth-child(even) .venues-filter-title { background-color: #a9a59f; color: black; } .venues-property:nth-child(even) .venue-filter:nth-child(odd) { background-color: #e8e7e6; color: #474644; } .venues-property:nth-child(even) .venue-filter:nth-child(odd).on { background-color: #474644; color: #e8e7e6; } .venues-property:nth-child(even) .venue-filter:nth-child(even) { background-color: #f0efee; color: #5a5955; } .venues-property:nth-child(even) .venue-filter:nth-child(even).on { background-color: #5a5955; color: #f0efee; } .venues-property:nth-child(odd) .single .venue-filter:nth-child(odd) { background-color: #dfceb2; color: black; } .venues-property:nth-child(odd) .single .venue-filter:nth-child(odd).on { background-color: #ad8d39; color: #f2ece4; } .venues-property:nth-child(even) .single .venue-filter:nth-child(odd) { background-color: #a9a59f; color: black; } .venues-property:nth-child(even) .single .venue-filter:nth-child(odd).on { background-color: #474644; color: #e8e7e6; } #fep-venues { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } #fep-venues .venues-property:nth-child(odd) .venues-filter-title { background-color: #e5e1d6; color: #5c5a56; } #fep-venues .venues-property:nth-child(odd) .venue-filter:nth-child(odd) { background-color: #eae7de; color: #898780; } #fep-venues .venues-property:nth-child(odd) .venue-filter:nth-child(odd).on { background-color: #898780; color: #eae7de; } #fep-venues .venues-property:nth-child(odd) .venue-filter:nth-child(even) { background-color: #efece6; color: #5c5a56; } #fep-venues .venues-property:nth-child(odd) .venue-filter:nth-child(even).on { background-color: #5c5a56; color: #efece6; } #fep-venues .venues-property:nth-child(even) .venues-filter-title { background-color: #b9b27b; color: #fffc; } #fep-venues .venues-property:nth-child(even) .venue-filter:nth-child(odd) { background-color: #c7c195; color: #6f6b4a; } #fep-venues .venues-property:nth-child(even) .venue-filter:nth-child(odd).on { background-color: #6f6b4a; color: #c7c195; } #fep-venues .venues-property:nth-child(even) .venue-filter:nth-child(even) { background-color: #d5d1b0; color: #4a4731; } #fep-venues .venues-property:nth-child(even) .venue-filter:nth-child(even).on { background-color: #4a4731; color: #d5d1b0; } #fep-venues .venues-property:nth-child(odd) .single .venue-filter:nth-child(odd) { background-color: #e5e1d6; color: #5c5a56; } #fep-venues .venues-property:nth-child(odd) .single .venue-filter:nth-child(odd).on { background-color: #5c5a56; color: #e5e1d6; } #fep-venues .venues-property:nth-child(even) .single .venue-filter:nth-child(odd) { background-color: #b9b27b; color: #4a473; } #fep-venues .venues-property:nth-child(even) .single .venue-filter:nth-child(odd).on { background-color: #4a473; color: #b9b27b; } #fep-venues .venue a { color: #6f6b4a; } #fep-venues .venue:hover { background-color: #b9b27b; } #fep-venues .venue:hover a { color: white; } /* CAREER DESCRIPTIONS --------------------------------------------------- */ #careers-list { width: 100%; margin: 80px 40px; list-style: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } #careers-list ul { list-style: none; } .career-description-item { margin-bottom: 24px; margin-left: 64px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .career-description { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; cursor: pointer; margin-bottom: 8px; } .career-description:hover { filter: brightness(110%); } .career-description picture { border-radius: 10px; flex-basis: 240px; width: 240px; height: 240px; display: flex; margin-right: 8px; overflow: hidden; flex-shrink: 0; flex-grow: 0; } .career-description img { width: 100%; height: 100%; } .career-description-text { height: 100%; flex-grow: 1; flex-shrink: 1; padding: 24px; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; } .career-title { text-align: left; width: 100%; margin-bottom: 16px; } .career-description-copy { font-size: 20px; text-align: left; } .career-description-inset { display: none; border-radius: 10px; padding: 32px; } .career-description-inset-copy { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; } .career-description-inset-copy ul { margin-left: 8px; margin-bottom: 1.6em; } .career-description-inset-copy li { list-style: circle inside url("graphics/bullet.svg"); text-align: left; } .career-contact-button { background-color: #0004; color: white; text-transform: uppercase; letter-spacing: 1.4px; align-self: flex-end; cursor: pointer; padding: 8px 16px; } .career-contact-button:hover { background-color: #0008; } .career-inset-x { display: none; cursor: pointer; filter: brightness(0%); flex-grow: 0; flex-shrink: 0; } .no-positions { margin: 80px; } #careers-form-container { position: fixed; top: 0; height: 100%; width: 100%; background-color: #fffc; display: none; justify-content: center; align-items: center; } .careers-form-container { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } #careers-form { background-color: #a9a59f; color: white; border-radius: 10px; width: 50%; min-width: 640px; padding: 48px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } #careers-form h3 { margin-bottom: 16px; } #careers-form label { display: block; width: 100%; margin-bottom: 16px; text-transform: uppercase; font-weight: 500; line-height: 1.1em; } #careers-form input, #careers-form select, #careers-form textarea { display: block; width: 100%; padding: 8px; border-radius: 4px; border: 1px solid grey; font-size: 120%; } #careers-form textarea { resize: vertical; } #careers-form .google { background-color: transparent; } #careers-form .google-badge { color: #000; opacity: 0.7; } #careers-send { background-color: #fff4; border: none; border-radius: 4px; width: 100%; text-align: center; cursor: pointer; margin-top: 48px; width: min-content; align-self: center; } #careers-send:hover { background-color: #0008; color: white; } .careers-warning { display: none; color: red; text-align: right; width: 100%; font-size: 60%; line-height: 1em; margin-top: 6px; } #captcha-warning { text-transform: uppercase; text-align: center; } .careers-x { padding: 8px; cursor: pointer; } /* CONTACT --------------------------------------------------------------- */ #contact-page #page-title { flex-basis: 100%; width: 100%; flex-grow: 1; flex-shrink: 1; } .contact-page-form { flex-basis: 50%; flex-shrink: 0; flex-grow: 1; background-color: #A8955F; } .contact-page-form h3 { color: white; margin-bottom: 20px; } .contact-page-form-container { width: 720px; margin: 0 auto; padding: 40px; } .contact-page-form-address { color: black; margin-bottom: 12px; } .contact-page-form-extender { color: black; font-size: 110%; flex-basis: 100vw; flex-shrink: 0; padding: 24px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; cursor: pointer; } .form-icon { height: 96px; width: 96px; margin-right: 24px; } .form-icon img { height: 100%; width: 100%; } .contact-page-arrow { opacity: 0.6; margin-left: 24px; } .contact-page-form-extended { flex-basis: 100%; flex-shrink: 0; background-color: #ECECEC; } .contact-page-form-extended .contact-page-form-container { display: none; } .contact-page-form-address a { color: black; } .contact-page-form-container fieldset { width: 100%; margin: 0; padding: 0; margin-bottom: 20px; border: none; } .contact-page-form-container fieldset:last-of-type { padding-right: 0; margin-bottom: 0; } .contact-page-form-container input, .contact-page-form-container textarea, .contact-page-form-container select { width: 100%; margin: 0; margin-bottom: 12px; background-color: white; padding: 4px; display: block; border: 0px; outline: 0px; border-radius: 4px; } .contact-page-form-container input::placeholder { color: #ddd; font-style: italic; } .contact-page-form-container label { text-transform: uppercase; font-weight: 500; color: black; } .contact-page-form-container input[type="text"] { } .contact-page-form-container textarea { height: 96px !important; resize: vertical; } .contact-page-form-container input[type="date"] { height: 24px; } .contact-page-form-send { background-color: #6c7830; padding: 48px; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .contact-page-form-send button { display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: transparent; border: none; cursor: pointer; margin-top: 8px; color: white; } .contact-page-form-send img { margin-left: 16px; } .contact-page-google-badge { color: black; margin-top: 8px; } .contact-page-google-badge a { color: #000c; } #sponsorship-form { background-color: #A8955F; color: white; flex-basis: 50%; flex-shrink: 0; flex-grow: 1; } #sponsorship-form label { color: white; display: block; } #sponsorship-form .form-inset { padding-left: 16px; } #sponsorship-form .date-time { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 8px; } #sponsorship-form .date-time input { flex-shrink: 1; flex-grow: 1; flex-basis: 50%; margin: 0 4px; max-height: 24px; } #sponsorship-form .date-time input:first-of-type { margin-left: 0; } #sponsorship-form .date-time input:last-of-type { margin-right: 0; } #sponsorship-form #new-event { margin-left: 16px; } #sponsorship-form .checkboxes { margin-left: 16px; } #sponsorship-form .checkbox { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; align-items: center; } #sponsorship-form .checkbox label, #sponsorship-form .checkbox input { display: inline; width: auto; } #sponsorship-form .checkbox input { margin: 0; margin-right: 16px; } .sponsorship-form-send { background-color: #6c7830; padding: 48px; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .sponsorship-form-send button { display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: transparent; border: none; cursor: pointer; margin: 0; color: white; } .sponsorship-form-send img { margin-left: 16px; } .sponsorship-google-badge { width: 100%; color: black; margin-top: 8px; } .sponsorship-google-badge a { color: #000c; } /* BLOG AND ARCHIVES --------------------------------------------------------------- */ #comments { background-color: #393331; color: white; width: 100%; margin: 0; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .comment { width: 100%; font-size: 80%; color: white; background-color: transparent; margin-bottom: 32px; } .comment-header { font-style: italic; margin-bottom: 4px; } #comment-form-container { width: 100%; } #commentform { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: center; } #commentform textarea { resize: vertical; height: 120px; width: 100%; margin-bottom: 8px; } #commentform .commentfields { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } #commentform input { margin-left: 8px; flex-grow: 1; } #commentform label { flex-shrink: 1; flex-grow: 1; display: flex; margin: 0; margin-bottom: 8px; } #commentform label:first-of-type { margin-right: 8px; } #commentform .comment-form-cookies-consent { font-size: 10px; } #commentform .comment-form-cookies-consent input { margin: 0; margin-right: 8px; display: inline; } #commentform .comment-form-cookies-consent label { margin: 0; display: inline; } #commentform #submit-div { width: 304px; } #commentform #submitButton { background-color: #6C7830; width: 100%; color: white; text-transform: uppercase; font-size: 16px; border: 0; border-radius: 0; margin: 0; margin-top: 8px; padding: 8px; } #archive { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } #sidebar { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #A8955F; padding: 32px; } #sidebar h3 { margin-bottom: 4px; } #sidebar li { font-size: 12px; list-style: none; text-align: center; } #sidebar a { font-size: 18px; color: black; vertical-align: middle; } #sidebar a:hover { color: white; } #searchform { width: 100%; text-align: center; margin-bottom: 32px; } #search-instructions { text-align: center; } #search-box { border-radius: 4px; border: 0; padding: 4px; } #category-list { margin-bottom: 32px; text-align: center; } #tags { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 32px; } .tag-cloud { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .tag-cloud a { padding: 4px; } #posts { flex-basis: 75%; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; } #post-blocks { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; flex-grow: 1; flex-shrink: 1; } #post-blocks .post { flex-basis: 33.33%; flex-grow: 1; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px; } #post-blocks .post a { text-align: center; } #post-blocks .post:nth-child(1n+1) { background-color: #A9A59F; color: white; } #post-blocks .post:nth-child(1n+1) a { color: white; } #post-blocks .post:nth-child(1n+1):hover a { color: #51A02B; } #post-blocks .post:nth-child(2n+2) { background-color: #ECECEC; color: black; } #post-blocks .post:nth-child(2n+2) a { color: black; } #post-blocks .post:nth-child(2n+2):hover a { color: #51A02B; } #post-blocks .post:last-of-type { flex-grow: 1; background-color: #CECCC8; color: black; } #post-blocks .post-date { display: none; font-size: 16px; text-transform: uppercase; } #post-blocks .post-categories { font-size: 16px; text-align: center; line-height: 1.1em; text-transform: uppercase; display: none; } #post-blocks .post-categories a { padding: 4px; } #post-blocks .post-title h2 { font-size: 24px; text-align: center; margin-bottom: 16px; } #post-blocks .post-title-img { margin: 8px; } #post-blocks img { border-radius: 8px; } #post-blocks .post-excerpt { font-size: 12px; line-height: 1.2em; text-align: center; } #post-blocks .post-tags { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; display: none; } #post-blocks .post-tags h3 { font-size: 12px; padding: 4px; font-weight: normal; } #post-blocks .post:first-of-type { flex-basis: 100%; width: 100%; background-color: #CECCC8; color: black; flex-direction: row; flex-wrap: nowrap; } #post-blocks .post:first-of-type a { color: black; } #post-blocks .post:first-of-type:hover a { color: #51A02B; } #post-blocks .post:first-of-type .post-date { font-size: 24px; align-self: flex-start; } #post-blocks .post:first-of-type .post-title { align-self: flex-end; max-width: 40%; } #post-blocks .post:first-of-type .post-title h2 { font-size: 32px; text-align: left; } #post-blocks .post:first-of-type .post-title-img { margin: 0 16px; } #post-blocks .post:first-of-type .post-excerpt { font-size: 16px; line-height: 1.4em; text-align: left; } #posts #next-previous { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; background-color: #ECECEC; flex-grow: 1; flex-shrink: 1; } #posts #next-previous .page-numbers { margin: 0; line-height: 1em; padding: 4px 8px; color: white; flex-grow: 1; flex-shrink: 1; text-align: center; color: black; } #posts #next-previous .page-numbers:hover { color: white; } #posts #next-previous .page-numbers:nth-child(even) { background-color: #ECECEC; } #posts #next-previous .page-numbers:nth-child(odd) { background-color: #A9A59F; } #posts #next-previous .page-numbers.current { color: white; } .alignleft { float: left; margin-right: 16px; vertical-align: top; } .alignright { float: right; margin-left: 16px; vertical-align: top; } .aligncenter { display: block; float: none; clear: both; } /* SIZES --------------------------------------------------------------------- */ @media only screen and (max-width : 1820px), (max-device-width : 1820px){ } @media only screen and (max-width : 1536px), (max-device-width : 1584px){ #main-navigation, #sub-navigation { font-size: 16px; } .main-nav-option { padding: 8px; } } @media only screen and (max-width : 1440px), (max-device-width : 1440px){ .main-nav-option { padding: 6px; } .team-nav-text { max-width: 240px; } } @media only screen and (max-width : 1385px), (max-device-width : 1385px){ .delivery-option { width: 1080px; padding-left: 0; } .copy .section-box { padding: 48px; } } @media only screen and (max-width : 1280px), (max-device-width : 1280px){ #main-nav .main-nav-block { width: auto; } .cff-visual-header, .cff-item, .cff-likebox { flex-basis: 45%; } .copy-block li { text-align: left; } .copy-block ul { margin-left: 16px; } .photo-single.half, .photo-single.quarter { flex-basis: 100%; } .link.quarter, .link.third, .link.half { flex-basis: 100%; } #post-blocks .post { flex-basis: 50%; } #post-blocks .post:nth-child(2n+2) { background-color: #A9A59F; color: white; } #post-blocks .post:nth-child(2n+2) a { color: white; } #post-blocks .post:nth-child(2n+2):hover a { color: black; } #post-blocks .post:nth-child(3n+3), #post-blocks .post:nth-child(4n+4) { background-color: #ECECEC; color: black; } #post-blocks .post:nth-child(3n+3) a, #post-blocks .post:nth-child(4n+4) a { color: black; } #post-blocks .post:nth-child(3n+3):hover a, #post-blocks .post:nth-child(4n+4):hover a { color: white; } #post-blocks .post:nth-child(5n+5) { background-color: #A9A59F; color: white; } #post-blocks .post:nth-child(5n+5) a { color: white; } #post-blocks .post:nth-child(5n+5):hover a { color: black; } #post-blocks .post:first-of-type { flex-basis: 100%; width: 100%; background-color: #CECCC8; color: black; } #post-blocks .post:first-of-type a { color: black; } #post-blocks .post:first-of-type:hover a { color: white; } #post-blocks .post:last-of-type { flex-grow: 1; background-color: #CECCC8; color: black; } .spotlight { flex-direction: column; padding: 32px; } .spotlight-inner-image { } .spotlight-text { flex-grow: 1; flex-shrink: 1; margin-right: 0; } .team-nav-text { width: min-content; } } @media only screen and (max-width : 1175px), (max-device-width : 1175px){ #main-navigation, #sub-navigation { font-size: 12px; } .delivery-option { width: auto; margin: 0 24px; } .delivery .arrow { padding-right: 12px; } .photo-carousel .carousel-mask { width: 768px; } } @media only screen and (max-width : 1024px), (max-device-width : 1024px){ .main-nav-option.selected { margin: 4px; } .main-nav-option { padding: 4px; } #page-nav-title { flex-direction: column; } #page-nav ul { text-align: center; } #page-nav-title h1 { width: 100%; text-align: center; margin-bottom: 30px; } .third { flex-basis: 100%; } #post-blocks .post { flex-basis: 100%; } #post-blocks .post:nth-child(1n+1) { background-color: #A9A59F; color: white; } #post-blocks .post:nth-child(1n+1) a { color: white; } #post-blocks .post:nth-child(1n+1):hover a { color: black; } #post-blocks .post:nth-child(2n+2) { background-color: #ECECEC; color: black; } #post-blocks .post:nth-child(2n+2) a { color: black; } #post-blocks .post:nth-child(2n+2):hover a { color: white; } #post-blocks .post:first-of-type { flex-basis: 100%; width: 100%; background-color: #CECCC8; color: black; } #post-blocks .post:first-of-type a { color: black; } #post-blocks .post:first-of-type:hover a { color: white; } #post-blocks .post:last-of-type { flex-grow: 1; background-color: #CECCC8; color: black; } .team-rollover { flex-direction: column; align-items: flex-start; } .team-nav-text { width: auto; } .team-copy { margin: 8px; font-size: 80%; } } @media only screen and (max-width : 960px), (max-device-width : 960px){ #header-logo { justify-content: space-between; } #nav-icon { display: block; } #main-nav #sub-navigation { display: none; } #main-nav { flex-direction: row; background-color: white; padding-bottom: 20px; } #main-nav #main-navigation { display: none; color: black; flex-direction: column; padding: 10px; position: relative; font-size: 16px; } #main-nav .main-nav-item { width: 100%; padding: 4px; display: flex; flex-direction: row; } #main-nav .main-nav-link, #main-nav .main-nav-block { flex-grow: 0; flex-shrink: 0; } #main-nav .main-nav-block { margin: 0; margin-right: 20px; padding: 4px; border: none; width: 45vw; text-align: right; } #main-nav .main-nav-block.selected { border: none; margin: 0; margin-right: 20px; } #main-nav:hover .main-nav-block.selected { border: none; } #main-nav.no-slideshow .main-nav-block.selected { border: none; margin: 0; margin-right: 20px; } #main-nav.no-slideshow:hover .main-nav-block.selected { border: none; } .main-nav-link:link, .main-nav-link:visited, .main-nav-link:link:active, .main-nav-link:visited:active{ color: black; } #main-nav:hover .main-nav-link { color: black; } #main-nav:hover .main-nav-block:hover { border: none; } #main-nav:hover .main-nav-block:hover .main-nav-link { color: #4f8502; } .sub-nav { position: relative; display: block; opacity: 1; width: 50%; text-align: left; flex-grow: 1; flex-shrink: 1; padding: 4px; } .sub-nav a { color: #4f8502; } .sub-nav-item { border: none; } .sub-nav-item:first-of-type { padding-top: 0; } .sub-nav-item:hover { border: none; } .sub-nav-item:hover, .sub-nav-item:hover a { color: black; } .main-nav-item.right .sub-nav { text-align: left; } #main-nav #main-nav-shadow { background-image: none; } #page-title { flex-basis: 100%; flex-grow: 1; } .section { flex-basis: 100%; } #sbi_images { flex-basis: 100% !important; } .menu-text-block, .menu-images { flex-basis: 100%; } .menu-text-block { text-align: left; } .menu-images { margin-left: 0; } .menu .page-title, .menu-section-header { flex-basis: 100%; } #gallery { margin: 32px; } .link { max-height: none; } .link-image, .link.full .link-image, .link.threequarts .link-image, .link.twothirds .link-image { flex-shrink: 0; flex-grow: 1; flex-basis: 100%; max-height: none; } .link .section-box { flex-wrap: wrap; } .shrink-container { flex-direction: column; direction: ltr; } .shrink-images { flex-basis: auto; display: none; } .shrink-content { display: none; } #post-blocks .post:first-of-type { flex-direction: column; } #post-blocks .post:first-of-type .post-date { font-size: 16px; align-self: center; } #post-blocks .post:first-of-type .post-title { align-self: center; } #post-blocks .post:first-of-type .post-title h2 { font-size: 24px; text-align: center; } #post-blocks .post:first-of-type .post-title-img { margin: 8px; } #post-blocks .post:first-of-type .post-excerpt { font-size: 12px; line-height: 1.2em; text-align: center; } .career-description-item, .career-description-item:nth-child(even) { margin-left: 0; } .photo-carousel .carousel-mask { width: 512px; } } @media only screen and (max-width : 768px), (max-device-width : 720px){ .cff-visual-header, .cff-item, .cff-likebox { flex-basis: 100%; } footer #contact-form { flex-basis: 100%; flex-shrink: 1; flex-grow: 1; padding: 16px; } .testimonial { padding: 32px; } #team-nav-left .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 186px; height: 216px; } #team-nav-left .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 168px; height: 234px; } #team-nav-left .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 244px; height: 158px; } #team-nav-left .team-nav-item:nth-child(4n+4) .team-nav-picture { width: 220px; height: 182px; } #team-nav-left .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 163px; height: 239px; } #team-nav-left .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 244px; height: 158px; } #team-nav-left .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 236px; height: 166px; } #team-nav-left .team-nav-item:nth-child(8n+8) .team-nav-picture { width: 161px; height: 241px; } #team-nav-right .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 172px; height: 230px; } #team-nav-right .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 220px; height: 182px; } #team-nav-right .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 182px; height: 220px; } #team-nav-right .team-nav-item:nth-child(4n+4) .team-nav-picture { width: 237px; height: 165px; } #team-nav-right .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 171px; height: 231px; } #team-nav-right .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 158px; height: 244px; } #team-nav-right .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 220px; height: 182px; } .delivery-popup-container { width: auto; } .delivery-item-inputs select { width: min-content; } .contact-page-form-container { width: 100%; margin: 0 auto; padding: 40px; } .career-description-item { margin-bottom: 32px; } .career-description { flex-direction: column; align-items: center; } .career-description picture { margin-right: 0; margin-bottom: 8px; } .career-description-text { width: auto; text-align: center; } .career-title { text-align: center; } .career-description-copy { text-align: center; } #careers-form { width: auto; min-width: auto; margin: 40px; margin-right: 4px; } tbody { width: 100% !important; } } @media only screen and (max-width : 640px), (max-device-width : 640px){ #title-container h1 { margin: 32px; font-size: 36px; letter-spacing: 8px; } .copy .section-box { padding: 32px; } .banner { padding: 32px; } .delivery-option-header { justify-content: flex-start; } .delivery-option-header h2 { align-self: flex-start; text-align: left; } .delivery-item-rightside { flex-basis: 20%; flex-grow: 1; flex-shrink: 1; flex-direction: column; justify-content: flex-start; align-content: flex-end; text-align: right; } .delivery-item-pricing { margin-right: 0; margin-bottom: 8px; min-width: min-content; } .delivery-item-inputs { align-items: flex-end; } .delivery-item-inputs input { margin-right: 0; } .delivery-option { margin: 0 12px; } .spotlight li { height: 360px; } .spotlight .carousel-mask { height: 360px; width: 360px; } .spotlight .carousel-image { flex-basis: 360px; } .spotlight .carousel-image img { width: 360px; } .photo-carousel .carousel-mask { width: 256px; } } @media only screen and (max-width : 560px), (max-device-width : 560px), (max-height : 370px), (max-device-height : 370px){ .copy .copy-block { text-align: left; } #team-nav-left .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 93px; height: 108px; } #team-nav-left .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 84px; height: 117px; } #team-nav-left .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 122px; height: 80px; } #team-nav-left .team-nav-item:nth-child(4n+4) .team-nav-picture { width: 110px; height: 92px; } #team-nav-left .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 81px; height: 120px; } #team-nav-left .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 122px; height: 80px; } #team-nav-left .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 118px; height: 83px; } #team-nav-left .team-nav-item:nth-child(8n+8) .team-nav-picture { width: 80px; height: 120px; } #team-nav-right .team-nav-item:nth-child(1n+1) .team-nav-picture { width: 86px; height: 115px; } #team-nav-right .team-nav-item:nth-child(2n+2) .team-nav-picture { width: 110px; height: 91px; } #team-nav-right .team-nav-item:nth-child(3n+3) .team-nav-picture { width: 91px; height: 110px; } #team-nav-right .team-nav-item:nth-child(4n+4) .team-nav-picture { width: 118px; height: 83px; } #team-nav-right .team-nav-item:nth-child(5n+5) .team-nav-picture { width: 86px; height: 115px; } #team-nav-right .team-nav-item:nth-child(6n+6) .team-nav-picture { width: 79px; height: 122px; } #team-nav-right .team-nav-item:nth-child(7n+7) .team-nav-picture { width: 110px; height: 91px; } .quote { padding: 32px; font-size: 20px; } #delivery-popup-total-block { flex-direction: column; } #delivery-popup-total { margin: 12px 0; } .delivery-popup-option { flex-direction: column; } #gallery { margin: 16px; } #commentform label:first-of-type { margin-right: 0; } .team-nav-text { max-width: 140px; font-size: 70%; } .team-nav-text h3 { font-size: 16px; } #team-nav-right { margin-top: 80px; } } @media only screen and (max-width : 480px), (max-device-width : 480px){ #header-logo img { width: 75%; height: auto; } #header-logo a { text-align: center; } #nav-icon { padding-left: 0;} #main-nav { font-size: 10px; } #main-navigation, #sub-navitagion, .sub-nav-options { letter-spacing: 2px; } #main-nav .main-nav-block { width: 35vw; } #title-container h1 { margin: 16px; font-size: 32px; letter-spacing: 4px; } #footer-address { padding: 30px 8px; } #footer-logo { width: 90%; } .copy .section-box { padding: 16px; } .testimonial { padding: 8px; } h1 { font-size: 36px; letter-spacing: 8px; } h2 { font-size: 28px; } .delivery-option { margin: 0; } .delivery-option-header { padding: 12px; padding-left: 12px; justify-content: flex-start; } .delivery-option-header h2 { text-align: left; } .delivery-option-container { padding: 32px 8px; } .delivery-item-description { font-size: 16px; } .delivery-item { padding: 0; } .delivery-item-text { padding: 0; margin-right: 0; } .team-profile { line-height: 1.6em; font-size: 80%; } .spotlight li { height: 240px; } .spotlight .carousel-mask { height: 240px; width: 240px; } .spotlight .carousel-image { flex-basis: 240px; } .spotlight .carousel-image img { width: 240px; } #careers-form { padding: 16px; } #careers-form h3 { font-size: 20px; letter-spacing: initial; } #careers-form label { font-size: 16px; letter-spacing: initial; line-height: 1em; } } @media only screen and (max-width : 360px), (max-device-width : 360px){ #menu-icon { margin: 8px; } #main-nav { font-size: 9px; } #main-navigation, #sub-navitagion, .sub-nav-options { letter-spacing: 0; } .main-nav-option { margin: 4px 0; padding: 4px; } #title-container h1 { font-size: 30px; letter-spacing: 0; } .section.instagram-feed { padding: 0 !important; } .shrink { padding: 12px; } .shrink h2 { font-size: 20px; letter-spacing: 2px; } footer { font-size: 16px; } .menu-category h2 { padding-left: 16px; padding-right: 16px; } #header-logo img { width: 75%; height: auto; } #team-nav-right { padding-right: 16px; } .photo-carousel .carousel-mask { width: 256px; } } @media only screen and (max-width : 320px), (max-device-width : 320px){ #slideshow, .slide { height: 240px; } h1 { font-size: 24px; letter-spacing: 4px; } h2 { font-size: 22px; } h3 { font-size: 20px; } .carousel-arrow { display: none; } #commentform #submit-div { width: 276px; } #commentform #commentcaptcha div { width: 276px !important; } #commentform #commentcaptcha iframe { width: 276px !important; } } #gally-image-0 { border: 2px solid black; }