@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,700,800,900&display=swap"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; margin: 0; padding: 0; } body { color: #2A2D34; font-family: "Raleway", sans-serif; line-height: 1.5; overflow-x: hidden; } img { max-width: 100%; } h1, h2, h3, p { margin-top: 0; margin-bottom: 1em; text-align: center; } h1 { font-size: 2.5rem; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; line-height: 1.4; } @media (max-width: 68.75rem) { h1 { font-size: 2rem; } } @media (max-width: 48rem) { h1 { font-size: 1.7rem; } } h2 { font-weight: 700; } @media (max-width: 48rem) { h2 { font-size: 1.3rem; } } @media (min-width: 100rem) { h3 { font-size: 1.5rem; } } @media (min-width: 100rem) { p { font-size: 1.3rem; } } a { text-decoration: none; } @media (min-width: 100rem) { a { font-size: 1.3rem; } } i { font-size: 2rem; } button { outline: none; } .intro { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4))), url("../img/home/hero.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/hero.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/hero.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/hero.jpg"); background-size: cover; background-position: 93% 0%; height: 115vh; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100vh, 50% 100%, 0 100vh); clip-path: polygon(0 0, 100% 0, 100% 100vh, 50% 100%, 0 100vh); z-index: 100; } .hero { width: 25em; position: relative; left: 15%; top: 15%; } @media (max-width: 68.75rem) { .hero { width: 20em; } } @media (max-width: 48rem) { .hero { top: 0; left: 0; margin: 0 auto; height: 80vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 15em; } } .btn { border: 1px solid rgba(237, 106, 90, 0.6); padding: 1.2em 3em; border-radius: 50px; border: none; background-color: rgba(237, 106, 90, 0.6); color: #FFFFFF; margin: 0 auto; text-align: center; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .btn:hover { background: #9DCBBA; } .title { text-align: left; } @media (max-width: 48rem) { .title { text-align: center; } } nav { position: absolute; top: 3em; right: 1em; overflow: hidden; -webkit-transition: all ease-in-out 250ms; -o-transition: all ease-in-out 250ms; transition: all ease-in-out 250ms; z-index: 300; } @media (max-width: 68.75rem) { nav { position: absolute; background: #9DCBBA; height: 100vh; width: 100vw; top: 0; right: 0; left: 100%; } nav.is-open { left: 0; } } .row-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .logo { width: 20%; height: auto; max-width: 15em; min-width: 12em; margin: 2em; } .styled-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; list-style-type: none; } @media (max-width: 68.75rem) { .styled-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; height: 100vh; } } .styled-list a { text-decoration: none; margin: 0 2rem; color: #2A2D34; font-weight: 700; text-transform: uppercase; } @media (max-width: 68.75rem) { .styled-list a { text-decoration: none; -ms-flex-preferred-size: 100%; flex-basis: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; } } @media (max-width: 68.75rem) { li { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; } } .nav-toggle { display: none; } @media (max-width: 68.75rem) { .nav-toggle { display: block; position: absolute; cursor: pointer; right: 1em; top: 1em; padding: 1em; z-index: 400; } } @media (max-width: 68.75rem) { .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; width: 2em; height: 3px; background: #FFFFFF; -webkit-transition: all ease-in-out 250ms; -o-transition: all ease-in-out 250ms; transition: all ease-in-out 250ms; z-index: 301; } .hamburger::before { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .hamburger::after { -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); } .hamburger.is-open { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hamburger.is-open::after { -webkit-transform: rotate(-90deg) translateX(-1px); -ms-transform: rotate(-90deg) translateX(-1px); transform: rotate(-90deg) translateX(-1px); } .hamburger.is-open::before { display: none; } } .overview { margin: -15vh 0; padding: 15em 0 23em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); position: relative; z-index: -99; } @media (max-width: 48rem) { .overview { padding: 15em 0 28em; } } @media (max-width: 68.75rem) { .overview { padding: 15em 0 28em; } } @media (min-width: 100rem) { .overview { margin: -20vh 0; padding: 20em 0 30em; } } .overview-container { display: -ms-grid; display: grid; width: 70vw; margin: 4em auto 0; -ms-grid-columns: 33.333% 33.333% 33.333%; grid-template-columns: 33.333% 33.333% 33.333%; grid-gap: 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 68.75rem) { .overview-container { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; width: 80vw; } } @media (max-width: 48rem) { .overview-container { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .overview-container img { margin: 0 auto; } } .overview-title { width: 80%; margin: 1em auto; } .text-box { width: 80%; margin: 1em auto; } .text-box p { text-align: center; } @media (max-width: 48rem) { .text-box { margin: 0 auto; } } @media (max-width: 48rem) { .img-none { display: none; } } .activities { padding: 19em 0 22em; margin-top: -19em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/mountains.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-size: cover; background-position: center; position: relative; z-index: -10; -webkit-clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 calc(100% - 15vw)); clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 calc(100% - 15vw)); } @media (max-width: 68.75rem) { .activities { padding: 12em 0; } } @media (max-width: 48rem) { .activities { padding: 10em 0; } } @media (min-width: 100rem) { .activities { margin-top: -24em; padding: 24em 0 33em; } } @media (min-width: 125rem) { .activities { padding: 28em 0 33em; } } .activities-container { display: -ms-grid; display: grid; -ms-grid-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr; width: 70%; margin: 0 auto; } @media (max-width: 68.75rem) { .activities-container { width: 85%; } } @media (max-width: 48rem) { .activities-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .title-box { width: 60vw; margin: 0 auto; padding: 1em; background-color: #F5ABA2; outline: 0.1em solid #FFFFFF; outline-offset: -.5em; z-index: 101; max-width: 18em; } .title-box--activities { position: relative; top: -3.3em; } @media (max-width: 68.75rem) { .title-box--activities { top: -5.3em; } } @media (max-width: 48rem) { .title-box--activities { top: -7.5em; } } @media (min-width: 100rem) { .title-box--activities { top: -4.5em; } } @media (min-width: 125rem) { .title-box--activities { top: -3.3em; } } .img-box { margin: 2em; display: -ms-grid; display: grid; border: 0.2em solid #5F7470; } .img-box img { position: relative; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; left: -5%; top: -5%; } @media (max-width: 68.75rem) { .img-box { display: block; } .img-box .img-none { display: none; } .img-box .text-box { margin: 1em auto; } } @media (max-width: 48rem) { .img-box { border: none; margin: .5em auto; } } .img-box--row { -ms-grid-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr; } .img-box--col { -ms-grid-rows: 1fr 1fr; grid-template-rows: 1fr 1fr; } .img-box-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; } .img-box-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; } .testimonials { padding: 20em 0 13em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/test-copy.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/test-copy.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/test-copy.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/test-copy.jpg"); -webkit-clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%); background-size: cover; background-position: left; position: relative; z-index: 10; margin-top: -28em; } @media (max-width: 68.75rem) { .testimonials { margin-top: -17em; padding: 15em 0; } } @media (max-width: 48rem) { .testimonials { margin-top: -13em; padding: 12em 0; } } @media (min-width: 100rem) { .testimonials { margin-top: -35em; padding: 20em 0 10em; } } @media (min-width: 125rem) { .testimonials { padding: 25em 0 15em; } } .title-box--testimonials { position: relative; top: -7em; } @media (max-width: 68.75rem) { .title-box--testimonials { top: -4.8em; } } @media (max-width: 48rem) { .title-box--testimonials { top: -4.4em; } } @media (min-width: 100rem) { .title-box--testimonials { top: -9em; } } @media (min-width: 125rem) { .title-box--testimonials { top: -8em; } } @media (min-width: 150rem) { .title-box--testimonials { top: -7.5em; } } .carousel { position: relative; width: 50em; height: 40em; margin: 0 auto; } @media (max-width: 68.75rem) { .carousel { width: 60%; } } @media (max-width: 48rem) { .carousel { width: 85%; height: 30em; } } .test-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; width: 90%; margin: 0 auto; background: rgba(157, 203, 186, 0.7); position: relative; padding: 3em; text-align: center; } @media (max-width: 48rem) { .test-box { font-size: .8rem; } } .carousel__track-container { height: 100%; width: 100%; margin: 0 auto; position: relative; overflow: hidden; } .carousel__track { padding: 0; margin: 0 auto; list-style: none; position: relative; height: 100%; -webkit-transition: -webkit-transform 250ms ease-in; transition: -webkit-transform 250ms ease-in; -o-transition: transform 250ms ease-in; transition: transform 250ms ease-in; transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; } .carousel__slide { position: absolute; top: 0; bottom: 0; height: 100%; width: 100%; } .carousel__button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; } .carousel__button i { font-size: 3em; color: #5F7470; } @media (max-width: 48rem) { .carousel__button i { font-size: 2em; } } .carousel__button--left { left: -5em; z-index: 200; } @media (max-width: 48rem) { .carousel__button--left { left: -1em; } } .carousel__button--right { right: -5em; } @media (max-width: 48rem) { .carousel__button--right { right: -1em; } } .carousel__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2em 0; } .carousel__indicator { border: 0; border-radius: 50%; width: 1em; height: 1em; background: rgba(0, 0, 0, 0.3); margin: 0 1em; cursor: pointer; } .carousel__indicator.current-slide { background: rgba(0, 0, 0, 0.7); } .hidden { display: none; } footer { background-color: #2A324B; padding: 0 0 2em; } footer li, footer a { color: #FFFFFF; } .footer-nav { margin: 0 auto; width: 70vw; padding: 3em 0 2em; } .footer-nav a { color: #FFFFFF; } @media (max-width: 68.75rem) { .footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; height: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-nav li { padding: .5em; width: 10em; } } @media (max-width: 48rem) { .footer-nav { display: none; } } .footer-contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 68.75rem) { .footer-contact--left { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .footer-contact--left li { text-align: right; } @media (max-width: 48rem) { .footer-contact--left li { display: none; } } @media (max-width: 68.75rem) { .footer-contact--right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } } @media (max-width: 48rem) { .footer-contact--right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 7em; padding: 1em 0 0; margin: 0 auto; } .footer-contact--right li { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer-contact-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24em; margin: 0 auto 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 48rem) { .footer-contact-container { height: 9em; margin: 0 auto; } } .footer-sms a { margin: 0 auto; color: #FFFFFF; } .footer-sms { width: 30vw; min-width: 15em; margin: 0 auto; } @media (max-width: 68.75rem) { .footer-sms { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; height: 3em; margin: 0 auto 1em; } } .small-text { font-size: .8em; margin: 1em 1em 0; text-align: center; color: #2A2D34; } @media (max-width: 48rem) { .small-text { display: none; } } .small-text-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1em; } @media (max-width: 48rem) { .small-text-links { display: none; } } .about { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.7)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; } .sub-intro { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4))), url("../img/about/mountains.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/about/mountains.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/about/mountains.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/about/mountains.jpg"); background-size: cover; background-position: center; height: 50vh; min-height: 30em; -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); z-index: 200; } .meet-us { padding: 10em 0 0; } .sub-title { width: 100vw; text-align: center; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%); } .benefits { display: -ms-grid; display: grid; -ms-grid-columns: 1.2fr 1fr; grid-template-columns: 1.2fr 1fr; width: 70vw; margin: 0 auto; padding: 5em 0 9em; grid-gap: 2em; } @media (max-width: 68.75rem) { .benefits { display: block; width: 90%; } } .benefits img { height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 68.75rem) { .benefits img { display: none; } } .text-box--benefits h2, p { text-align: left; } .text-box--benefits h2 { text-transform: uppercase; margin: 1em auto; } @media (max-width: 68.75rem) { .text-box--benefits h2 { text-align: center; } } .text-box--benefits p { display: list-item; list-style-type: disc; list-style-position: outside; margin: 0; } @media (max-width: 68.75rem) { .text-box--benefits p { text-align: center; list-style: none; } } @media (max-width: 48rem) { .text-box--benefits p { list-style: disc; } } .our-staff { padding: 0 0 5em; } .our-staff h1 { margin-bottom: .5em; } .staff-members { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 75vw; margin: 0 auto; -webkit-transform: translateX(-3em); -ms-transform: translateX(-3em); transform: translateX(-3em); -ms-flex-pack: distribute; justify-content: space-around; padding-top: 3em; } @media (max-width: 68.75rem) { .staff-members { width: 95vw; } } @media (max-width: 48rem) { .staff-members { width: 100vw; -webkit-transform: none; -ms-transform: none; transform: none; } } .staff-member { display: -webkit-box; display: -ms-flexbox; display: flex; width: 45%; margin: 1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 90rem) { .staff-member { width: 90%; } } @media (max-width: 48rem) { .staff-member { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } } .staff-member img { width: 12em; height: 12em; border-radius: 50%; -ms-flex-item-align: start; align-self: flex-start; -webkit-transform: translateX(4em); -ms-transform: translateX(4em); transform: translateX(4em); } @media (max-width: 48rem) { .staff-member img { border-radius: 0; margin: 0 auto; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .staff-member .text-box { padding: 2em; padding-left: 4em; border: 0.2em solid #9DCBBA; } @media (max-width: 48rem) { .staff-member .text-box { padding: 1em; margin: 0 auto; } } .staff-member .text-box h3, .staff-member .text-box h4 { text-transform: uppercase; } .staff-member .text-box h3, .staff-member .text-box h4, .staff-member .text-box p { text-align: center; margin: 0 auto .3em; } .memory-care { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); position: relative; z-index: -99; padding: 22em 0; margin-top: -10em; } .memory-care h2 { width: 80vw; margin: 0 auto; } @media (max-width: 68.75rem) { .memory-care { padding: 15em 0; } } @media (max-width: 48rem) { .memory-care { padding: 15em 0 10em; } } .wellness-program { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4))), url("../img/home/mountains.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/mountains.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/mountains.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.4)), url("../img/home/mountains.jpg"); background-size: cover; background-position: center; position: relative; z-index: -200; -webkit-clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 calc(100% - 15vw)); clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 calc(100% - 15vw)); padding: 30em 0 15em; margin-top: -25em; } @media (max-width: 48rem) { .wellness-program { padding: 30em 0 5em; } } @media (min-width: 125rem) { .wellness-program { margin-top: -26em; padding: 30em 0 20em; } } .referral-program { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/programs/marble.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/programs/marble.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/programs/marble.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/programs/marble.jpg"); background-size: cover; background-position: center; position: relative; z-index: -201; -webkit-clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%); padding: 25em 0 10em; margin-top: -23em; } @media (max-width: 68.75rem) { .referral-program { padding: 25em 0 5em; } } @media (max-width: 48rem) { .referral-program { padding: 27em 0 2em; } } @media (min-width: 125rem) { .referral-program { margin-top: -26em; } } .programs-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 70vw; max-width: 100em; margin: 0 auto; position: relative; } @media (max-width: 68.75rem) { .programs-box { width: 80vw; } } .programs-box .text-container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 16em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .programs-box p { margin: auto; text-align: center; padding: 1em 6em; } @media (max-width: 68.75rem) { .programs-box p { padding: 1em 2em; } } .programs-box span { color: #ED6A5A; } .programs-box .small-text--black { color: #2A2D34; } .programs-box img { width: 16em; height: 16em; -o-object-fit: cover; object-fit: cover; } @media (max-width: 48rem) { .programs-box img:not(.icon) { display: none; } } .programs-box .circle-border { border-radius: 50%; } .programs-box--green .text-container { background-color: rgba(157, 203, 186, 0.7); } .programs-box--green img { border: 20px solid rgba(157, 203, 186, 0.7); } .programs-box--red .text-container { background-color: rgba(237, 106, 90, 0.6); } .programs-box--red img { border: 20px solid rgba(237, 106, 90, 0.6); } .icons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; width: 50vw; } @media (max-width: 68.75rem) { .icons { width: 85vw; } } @media (max-width: 48rem) { .icons { display: none; } } .icons figure { width: 8em; } @media (max-width: 48rem) { .icons figure { width: 5em; } } .icons figcaption { margin-top: 1em; text-align: center; } .icons--first-row { margin-bottom: 2em; } .programs-box--icon { background-color: rgba(237, 106, 90, 0.6); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .programs-box--icon .text-container { background-color: transparent; } .programs-box--icon .icon { border: none; border-radius: 0; width: 5em; height: 5em; } @media (max-width: 48rem) { .programs-box--icon .icon { width: 3em; height: 3em; } } .programs-box--icon-green { background-color: rgba(157, 203, 186, 0.7); } .programs-box--icon-left { padding-left: 6em; } @media (max-width: 68.75rem) { .programs-box--icon-left { padding-left: 4em; } } @media (max-width: 48rem) { .programs-box--icon-left { padding-left: 2em; } } .programs-box--icon-right { padding-right: 6em; } @media (max-width: 68.75rem) { .programs-box--icon-right { padding-right: 4em; } } @media (max-width: 48rem) { .programs-box--icon-right { padding-right: 2em; } } .programs-box-container { margin: 5em 0; } .programs-box--discount { background-color: rgba(157, 203, 186, 0.7); } .resources-body { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; position: relative; z-index: -99; } .resources-section { margin: 10em auto; } @media (max-width: 68.75rem) { .resources-section { margin: 3em auto; } } .resources-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 90vw; margin: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 100rem) { .resources-container { width: 80vw; } } .resource { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40%; border: 8px solid #9DCBBA; padding: 2em; margin: 2em; background-color: #FFFFFF; } @media (max-width: 68.75rem) { .resource { width: 100%; } } .resource a { width: 15em; margin: 0 auto 1em; opacity: 1; } .resource h2, .resource p { text-align: center; } .menu-activities { margin: 0 auto; padding: 10em 0 20em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%); position: relative; z-index: -99; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -11em; } @media (max-width: 68.75rem) { .menu-activities { padding: 10em 0 15em; } } @media (max-width: 48rem) { .menu-activities { padding: 10em 0; } } @media (min-width: 100rem) { .menu-activities { padding: 10em 0 25em; } } @media (min-width: 125rem) { .menu-activities { padding: 10em 0 30em; } } .menu-activities img { width: 80vw; } @media (min-width: 100rem) { .menu-activities img { width: 70vw; } } .menu-activities h1 { margin: 3em 0 2em; } .upcoming-events { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/mountains.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/mountains.jpg"); background-size: cover; background-position: center; position: relative; z-index: 0; -webkit-clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 100%); padding: 15em 0 5em; margin-top: -17em; } @media (max-width: 68.75rem) { .upcoming-events { padding: 10em 0 3em; margin-top: -10em; } } @media (max-width: 48rem) { .upcoming-events { margin-top: -7em; padding: 10em 0 3em; } } @media (min-width: 100rem) { .upcoming-events { margin-top: -20em; } } @media (min-width: 125rem) { .upcoming-events { margin-top: -28em; padding: 25em 0 10em; } } .upcoming-events .events-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; -ms-flex-pack: distribute; justify-content: space-around; width: 80vw; padding: 4em 0; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 48rem) { .upcoming-events .events-container { width: 85vw; } } .upcoming-events .event { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: center; align-content: center; background-color: rgba(237, 106, 90, 0.6); padding: 2em; margin: 1em; width: 25em; z-index: 400; } .upcoming-events .event a { text-transform: uppercase; color: #2A2D34; text-align: center; padding-top: 1em; cursor: pointer; } .upcoming-events .event a span { font-weight: bold; } .upcoming-events .event p { text-align: center; } .contact-us { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6))), url("../img/home/wood.jpg"); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-image: linear-gradient(rgba(255, 255, 255, 0.6)), url("../img/home/wood.jpg"); background-size: cover; background-position: bottom; position: relative; z-index: 0; padding: 20em 0 5em; -webkit-clip-path: polygon(0 0, 50% 15vh, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 50% 15vh, 100% 0, 100% 100%, 0 100%); margin-top: -13em; } .contact-us span { color: rgba(237, 106, 90, 0.6); } @media (max-width: 48rem) { .contact-us { padding: 15em 0 0; } } .contact-form { max-width: 50em; width: 85vw; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 5em 0; } .contact-form-text { display: block; width: 100%; padding: 1em; margin-bottom: 2em; border-radius: 25px; border: 3px solid rgba(0, 0, 0, 0.1); } .contact-form-text:hover, .contact-form-text:focus { -webkit-box-shadow: 0 0 0.1em 0.1em rgba(237, 106, 90, 0.6); box-shadow: 0 0 0.1em 0.1em rgba(237, 106, 90, 0.6); } .contact-form-btn { float: right; } text-area { resize: none; }