/*general declarations */ h1 {font-size: 4vw; line-height: 0.8em; color: #eef4f6; font-family: 'Bricolage Grotesque'; margin: 0;} h2 {font-size: 2.5vw; font-family: 'Bricolage Grotesque'; margin: 0; color: #eef4f6;} h3 {font-family: 'Bricolage Grotesque'; text-align: left; margin: 0; color: #eef4f6; font-size: 2vw;} body {font-family: 'Bricolage Grotesque'; margin: 0; color: #205266; margin: 0; overflow-x: hidden;} a { color: #F9C784; } a:visited { color: #F9C784; } /*class declarations*/ .contact-link { color: #F9C784; } .container_hero {display: block; justify-content: center; align-items: center; width: 100vw; padding: 0px; flex-direction: row; height: 54vw; aspect-ratio: 1.5/1; position: relative; top: 0px; left: 0px; } .element_inner {padding: 10px; text-align: center; font-weight: 200; font-size: 1.5vw;} .hp-field {position: absolute; left: -9999px; width: 1px; height: 1px;overflow: hidden;} .menu3 {background-color: #205266; color: #dde8ee; width: 100%; box-shadow: 0px 10px 8px #191a19; z-index: 100; text-align: center; position: fixed; top: 0; left:0;} .menu3 a {text-decoration: none; color: inherit; transition: font-size 0.4s, width 0.3s; font-family: 'Bricolage Grotesque'; font-weight: 400; z-index: 5;} .menu3 li {padding: 10px; font-family: 'Bricolage Grotesque'; font-size: 16px;} .menu3 ul {list-style: none; padding: 0; display: flex; justify-content: space-around; align-items: center; margin: 0;} .menu3-logo {flex: 3; text-align: left; position: relative; left: 50px; height: 100%;} .menu3-items {flex: 1;} .emdr-find-out-more {font-family: 'Pacifico';} .emdr-find-out-more a:visited, .emdr-find-out-more a:link {color: #dde8ee;} .container_footer {width: 100vw; justify-content: center; display: flex; text-align: center; background-color: white; flex-direction: column;} .bottom-logo {width: 100%; max-width: 600px;} .references-heading { text-align: center; } .footer-inner, .grid2a {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100vw; background-color: #255e74;} .footer-heading, .box2a {text-align: center; color: white; aspect-ratio: calc(3/1); align-content: center; background-image: linear-gradient(to bottom, #1f4e61 0%, #1f4e61 10%, #1f4e61 90%, #1f4e61 100%);} .footer-anchor, .box2a-anchor {color: white;} h3.box2a-heading{text-align: center; color: white; align-content: center;} /*inner declarations*/ #box1-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #box4-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; background-color: #1f4e61; height: inherit; width: 100%; line-height: 1.5;} #box4-inner.box4-inner-dark {background-color: #1f4e61; color: #dde8ee;} #box5-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #box7-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box8-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box9-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box10-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box11-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box12-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box13-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200;} #box14-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; width: 70%; } #box15-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; width: 50%; text-align: left;} #box16-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} /*inner h2 declarations*/ #box1-inner h2 {padding: 10px; color: #227C9D;} #box4-inner h2 {padding: 10px; color: #dde8ee; background-color: #1f4e61;} #box4-inner.box4-inner-dark h2 {color: #dde8ee; background-color: #1f4e61;} #box5-inner h2 {padding: 10px; color: #227C9D;} #box7-inner h2 {padding: 10px; color: #dde8ee;} #box8-inner h2 {padding: 10px; color: #dde8ee;} #box9-inner h2 {padding: 10px; color: #dde8ee;} #box10-inner h2 {padding: 10px; color: #dde8ee;} #box11-inner h2 {padding: 10px; color: #dde8ee;} #box12-inner h2 {padding: 10px; color: #dde8ee;} #box13-inner h2 {padding: 10px; color: #dde8ee;} #box14-inner h2 {padding: 10px; color: #dde8ee;} #box15-inner h2 {padding: 10px; color: #dde8ee;} #box16-inner h2 {padding: 10px; color: #227C9D;} /*box & grid others*/ #box4-inner a {padding: 10px; color: #F9C784; background-color: #1f4e61;} #box4-inner.box4-inner-dark a {color: #F9C784; background-color: #1f4e61;} #box6-img {height: 100%; width: 100%; object-fit: cover; } #container-box6-img {width: 65%; height: 90%; object-fit: cover; justify-content: center; } /*other div declarations */ #hero-line-break1 {display: none;} #pacifico {font-family: 'Pacifico'; color: #dde8ee; font-size: 2.5vw; display: inline-block; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: rgba(221, 232, 238, 0.5); transition: text-decoration-color 0.3s ease;} #pacifico:hover {text-decoration-color: #dde8ee;} #about-us {color: #2f6f82; font-family: 'Pacifico'; } #contact-us-button a, #contact-us-button:visited, #contact-us-button:link, #contact-us-button a:link {color: #FFFFFF; text-decoration: none;} #menu-logo3 {height: 10vh; display: flex;} #book-now2 {position: fixed; z-index: 15; bottom: 50px; left: 50px; border-style: solid; border-color: #dde8ee; height: 75px; width: 150px; align-items: center; justify-content: center; text-align: center; display: flex; border-radius: 15px; background-color: #205266; color: #dde8ee; box-shadow: 0px 10px 8px #191a19;} #book-now {position: fixed; z-index: 15; bottom: 50px; left: 50px; border-style: solid; border-color: #FFFFFF; height: 75px; width: 150px; align-items: center; justify-content: center; text-align: center; display: flex; border-radius: 15px; background-color: #E76F8A; color: #FFFFFF; box-shadow: 0px 10px 8px #191a19;} #contact-form {width: 100%;} #hero-image {position: absolute; left: 0; top: 0; z-index: -10; opacity: 1; object-fit: cover; height: 100%; max-height: 100vh; width: 100%; } #hero-image-logo {width: 50vw; position: absolute; top: 25vh; left: 25vw; z-index: 10; opacity: 1; text-shadow : horizontal-shadow vertical-shadow blur color;} #hero-image-text {width: 50vw; position: absolute; bottom: 10%; right: 8%; z-index: 10; opacity: 1; text-shadow: 2px 2px 5px #000000; font-size: 50px; color: white;} #landing-words, #landing-words2 {text-align: right; color: #ffffff; text-shadow: 2px 2px 5px #000000;} .input-group {width: 100%;} .input-group input {width: 100%; height: 50px; border-radius: 5px;} #message {width: 100%; border-radius: 5px;} #submit_button input {font-size: 1.5vw;} #map_location, #map_location_2 {width: 100%; height: 100%; border-radius: 0%; background-color: #205266; color: #dde8ee; position: relative; z-index: 1; } #eye-picture1, .content-image {width: 100%; display: block; max-width: 100vw;} #woman_with_client1 {width: 100%;} #AM-photo {border-radius: 50%; width: 220px; height: 220px; object-fit: cover; object-position: center top; display: block; margin: 16px auto 24px;} #referral_options li {text-align: left; text-indent: 10px; } #scroll_indicator {position: fixed; border-style: solid; bottom: 5vh; right: 5vw; width: 100px; height: 50px; color: 'white'; background-color: 'black'; z-index: 110; transition: transform 0.5s ease-out;} #consent-group table {border-collapse: collapse; width: 100%; } #consent-group td {vertical-align: center; padding: 0; } #consent-group td:first-child {width: 1.6em; padding-top: 0.15em;} #consent-group input[type="checkbox"] {width: 3em; height: 3em; cursor: pointer; accent-color: #0d7d7d;} #consent-group .consent-label {cursor: pointer; line-height: 1.4;} /*grid declarations*/ #grid1-container {width: 100vw; display: flex; justify-content: center;} #grid3-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; } .grid3 {width: 70%; background-color: #205266; color: #dde8ee; padding: 50px;} #grid3a-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; } .grid3a {width: 70%; background-color: #205266; color: #dde8ee; padding: 50px;} #grid4-container {width: 100vw; display: flex; justify-content: center; background-color: #1f4e61; color: #dde8ee; position: relative; isolation: isolate; } #grid5-container {width: 100vw; display: flex; justify-content: center;} #grid6-container {width: 100vw; display: flex; justify-content: center; background-color: #205266;} #grid6 {width: 70%; background-color: #205266; color: #dde8ee; padding: 0px; display: flex;} .grid7-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid8-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid9-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid10-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid11-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid12-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid13-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid14-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid15-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} #grid16-container {width: 100vw; display: flex; justify-content: center;} /*font face declarations*/ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaB.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/nunito/v25/XRXW3I6Li01BKofINeaBTMnFcQ.woff2") format("woff2"); } @font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/karla/v23/qkBIXvYC6trAT55ZBi1ueQ.woff2") format("woff2"); } @font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/karla/v23/qkBIXvYC6trAT55ZBi1ueQ.woff2") format("woff2"); } /*other .consent-label { display: grid; grid-template-columns: auto 1fr; /* narrow checkbox column, wide text column */ column-gap: 10px; align-items: start; /* top-align so the box sits by the first line */ cursor: pointer; text-align: left; } .consent-label input[type="checkbox"] { margin-top: 0.2em; /* nudge the box to line up with the first line of text */ width: auto; /* stops the box stretching if your form inputs are width:100% */ } /*base font overrides*/ body { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } h1, h2, h3, .menu, .menu a, .menu li, .menu3, .menu3 a, .menu3 li, .references, .data_table_column2, .data_table_column2 a { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* Content */ .element, .element_dark, .element_dark2, .element_light, .body-content1, .blog_text { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;} /* Forms & UI */ .input-group input, .input-group textarea, .input-group label, button { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: inherit;} /*grid class declarations*/ .grid1 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid2 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; text-decoration: none;}background-color: white; } .grid4 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; background-color: #1f4e61; color: #dde8ee; a:visited, a:link, a:hover {color: white; } } .grid5 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid6 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid7 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid8 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid9 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid10 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid11 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid12 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid13 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid14 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid15 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid16 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; }} /*box declarations*/ .box1 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box2 { width: calc(100% / 3); /* 3 columns */ aspect-ratio: 1 / 1; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2vw; color: white; position: relative; text-shadow: 2px 2px 5px #000000; } .box3 {font-size: 1.2vw;} .box3a { font-size: 2.5vw; padding: 0px 50px;} .box3a h2 {width: 100%; font-size: 5vw;} .box4 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #dde8ee; background-color: #1f4e61; position: relative; } .box5 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box6 { align-items: center; justify-content: center; color: white; position: relative; } .box7 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box8 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box9 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box10 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box11 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box12 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box13 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box14 { width: calc(100%); /* 2 columns */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box15 { width: calc(100%); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box16 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } /* Demo colours */ .box1:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ph_pc_pen.jpg"); background-size: cover; border-radius: 50%;} .box1:nth-child(2) { background: #FFFFFF; text-align: center; } /* Demo colours https://emdr-brisbane.com.au/resources/eye-5248678_1280.jpg */ .box2:nth-child(1) { background: #205266; background-image: url("https://emdr-brisbane.com.au/resources/emdr_finger_1.jpg"); background-size: cover;} .box2:nth-child(2) { background: #2f6f82; background-image: url("https://emdr-brisbane.com.au/resources/male_soldier_hands_together.jpg"); background-size: cover;} .box2:nth-child(3) { background: #3f8fa3; background-image: url("https://emdr-brisbane.com.au/resources/desk_quill.jpg"); background-size: cover;} .box2:nth-child(4) { background: #4fa8bd; background-image: url("https://emdr-brisbane.com.au/resources/stressed_man.jpg"); background-size: cover;} .box2:nth-child(5) { background: #6fc3d5; background-image: url("https://emdr-brisbane.com.au/resources/eye-5248678_1280.jpg"); background-size: cover;} .box2:nth-child(6) { background: #8fdbe5; background-image: url("https://emdr-brisbane.com.au/resources/mother-daughter-field-playing-with-horse (1).jpg"); background-size: cover;} .box2:nth-child(1):hover, .box2:nth-child(2):hover, .box2:nth-child(3):hover, .box2:nth-child(4):hover, .box2:nth-child(5):hover, .box2:nth-child(6):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box3:nth-child(1):hover {opacity: 0.9; transition: opacity 0.5s ease-out;} .box3a:nth-child(1):hover {opacity: 0.9; transition: opacity 0.5s ease-out;} .box4:nth-child(1) { background: #1f4e61; } .box4:nth-child(2) { background: #1f4e61; text-align: center; } .box5:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ther_notepad1.jpg"); background-size: cover; border-radius: 50%;} .box5:nth-child(2) { background: #FFFFFF; text-align: left; } .box5:nth-child(2) h2 { background: #FFFFFF; text-align: center; } .box6:nth-child(1) {opacity: 0.9; transition: opacity 0.5s ease-out; width: 100%;} .box6:nth-child(2) {opacity: 0.9; transition: opacity 0.5s ease-out; width: 50%; display: flex;} .box7:nth-child(1) {text-align: center; color: #dde8ee;} .box7:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box7:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/pc_notepad.jpg"); background-size: cover; } .box8:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/pc_couch.jpg"); background-size: cover; } .box8:nth-child(2) {text-align: center; color: #dde8ee;} .box8:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box9:nth-child(1) {text-align: center; color: #dde8ee;} .box9:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box9:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/pen_lid.jpg"); background-size: cover; } .box10:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/couch_ipad.jpg"); background-size: cover; } .box10:nth-child(2) {text-align: center; color: #dde8ee;} .box10:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box11:nth-child(1) {text-align: center; color: #dde8ee;} .box11:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box11:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/workcover.jpg"); background-size: cover; } .box12:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/notepad_ndis2.png"); background-size: cover; background-position: center;} .box12:nth-child(2) {text-align: center; color: #dde8ee;} .box12:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box13:nth-child(1) {text-align: center; color: #dde8ee;} .box13:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box13:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/man_notepad.jpg"); background-size: cover; } .box14:nth-child(1) {text-align: center; color: #dde8ee;} .box14:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box16:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ph_pc_pen.jpg"); background-size: cover; border-radius: 50%;} .box16:nth-child(2) { background: #FFFFFF; text-align: center; } /*Blog CSS rules*/ .blog-grid1 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .blog-box1 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .blog-box1:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ph_pc_pen.jpg"); background-size: cover; border-radius: 50%;} .blog-box1:nth-child(2) { background: #FFFFFF; text-align: center; } #blog-box1-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #blog-box1-inner h2 {padding: 10px; color: #227C9D;} #blog1-container {width: 100vw; display: flex; justify-content: center;} /* ===== 900px and below — tablet ===== */ @media (max-width: 900px) { } /* ===== 480px and below — mobile ===== */ @media (max-width: 480px) { } @media (max-width: 1100px) { /*general declarations*/ #AM-photo {width: 180px; height: 180px;} h1 {font-size: 6vw;} h2 {font-size: 3vw;} h3 {font-size: 3.5vw;} .container_hero {top: 40px; height: auto;} .menu3 {top: 0vw;} .menu3 li {font-size: 15px;} .menu3-logo {display: none; top: 15vw;} #eye-picture1 {width: 100%; display: block;} #landing-line-break {display: block; line-height: 0.5;} #landing-words h1 {line-height: 0vw;} #pacifico {font-family: 'Pacifico'; color: #dde8ee; font-size: 5vw;} #submit_button input {font-size: 3vw;} #top-logo {display: block; width:40%; position: absolute; top: 10vw; left: 5vw; z-index: 80; filter: drop-shadow(8px 8px 4px rgba(0,0,0,0.4)); text-shadow: 2px 2px 5px #000000;} #hero-image-text {width: 75%;} .container_footer .footer-inner {max-width: 100%;padding: 2.5rem 1.75rem 1.5rem;} .footer-heading {font-size: 0.95rem;} .footer-links a {font-size: 0.88rem;} .footer-brand p {font-size: 0.86rem;} .footer-bottom {font-size: 0.82rem;} /*h2 declarations*/ #box1-inner h2 {font-size: 5vw;} .box3 h2 {font-size: 5vw;} .box3 h2 {font-size: 5vw; width: 100%;} .box3a h2 {font-size: 5vw; width: 100%;} .box3 h2 {font-size: 5vw;} .box4 h2 {font-size: 5vw; width: 100%;} #box5-inner h2 {font-size: 5vw;} .box6 h2 {font-size: 5vw;} .box7 h2 {font-size: 5vw; width: 100%;} #box7-inner h2 {font-size: 5vw;} .box8 h2 {font-size: 5vw; width: 100%;} #box8-inner h2 {font-size: 5vw;} .box9 h2 {font-size: 5vw; width: 100%;} #box9-inner h2 {font-size: 5vw;} .box10 h2 {font-size: 5vw; width: 100%;} #box10-inner h2 {font-size: 5vw;} .box11 h2 {font-size: 5vw; width: 100%;} #box11-inner h2 {font-size: 5vw;} .box12 h2 {font-size: 5vw; width: 100%;} #box12-inner h2 {font-size: 5vw;} .box13 h2 {font-size: 5vw; width: 100%;} #box13-inner h2 {font-size: 5vw;} .box14 h2 {font-size: 5vw; width: 100%;} #box14-inner h2 {font-size: 5vw;} #box15-inner h2 {font-size: 5vw;} .box15 h2 {font-size: 5vw; width: 100%; text-align: center;} .about_text h2 {font-size: 5vw;} /*box class declarations */ .box1:nth-child(1) {border-radius: 0%;} .box1 {font-size: 2.5vw; width: 100%; aspect-ratio: 2/1;} .box2 {font-size: 2.5vw;} .box3 {font-size: 2.5vw; padding: 0px 25px;} .box3 {font-size: 2.5vw; padding: 0px 25px;} .box3a {font-size: 2.5vw; padding: 0px 50px;} .box4 {width: 100%; font-size: 2.5vw;} .grid4-second-location {flex-direction: column-reverse;} .box5 {width:calc(100%/1);} .box5:nth-child(1) {background-size: cover; border-radius: 0%; width: 100%; aspect-ratio: 16 / 8; } .box5:nth-child(2) {width: 100%; aspect-ratio: 16 / 8; } .box6 {font-size: 2.5vw;} .box7 {width: 100%; flex-direction: column-reverse;} .box8 {width: 100%;} .box9 {width: 100%; flex-direction: column-reverse;} .box10 {width: 100%;} .box11 {width: 100%; flex-direction: column-reverse;} .box12 {width: 100%;} .box13 {width: 100%; flex-direction: column-reverse;} /*grid class declarations */ .grid1 {flex-direction: column-reverse;} .grid3 {padding: 0px; width: 100%} .grid3a {padding: 50px; width: 100%} .grid4 {width: 100%;} .grid7 {flex-direction: column-reverse;} .grid9 {flex-direction: column-reverse;} .grid11 {flex-direction: column-reverse;} .grid13 {flex-direction: column-reverse;} /*box ID declarations */ #box1-inner {font-size: 2.5vw;} #box4-inner {width: 100%; font-size: 3vw; padding: 0px 50px; line-height: 1.75;} #box5-inner {font-size: 2.5vw;} #box6-inner {font-size: 2.5vw;} #box7-inner {font-size: 2.5vw; padding: 0px 50px;} #box8-inner {font-size: 2.5vw; padding: 0px 50px; width: 100%; } #box9-inner {font-size: 2.5vw; padding: 0px 50px;} #box10-inner {font-size: 2.5vw; padding: 0px 50px;} #box11-inner {font-size: 2.5vw; padding: 0px 50px;} #box12-inner {font-size: 2.5vw; padding: 0px 50px;} #box13-inner {font-size: 2.5vw; padding: 0px 50px;} #box14-inner {font-size: 2.5vw; padding: 0px 25px;} #box14-inner {padding: 0px 25px; color: #dde8ee; font-size: 3vw; font-weight: 200; width: 100%; } #box15-inner {font-size: 2.5vw; padding: 0px 50px; width: 100%;} /*grid ID declarations */ #grid6-container {width: 100vw; display: flex; justify-content: center; background-color: #205266;} #grid6 {width: 100%; background-color: #205266; color: #dde8ee; padding: 0px 50px; display: flex;} } @media (min-width: 1101px) { #top-logo{display: none; width: 100%;} .menu3 {top: 0;} } /* Responsive (optional) */ @media (max-width: 900px) { /*general declarations*/ #top-logo {display: block; width: 40%; position: absolute; top: 15vw; left: 5vw; z-index: 80; } #landing-line-break {display: none;} .menu3 li {padding: 10px; font-family: 'Bricolage Grotesque'; font-size: 12px;} .container_hero {top: 36px;} #eye-picture1 {width: 100%; display: block;} /*footer declarations */ .grid2a {grid-template-columns: 1fr;} .container_footer .footer-inner {gap: 1.5rem; padding: 2.25rem 1.5rem 1.25rem; } .footer-col {flex: 1 1 140px; min-width: 140px;} .footer-heading {font-size: 0.9rem; margin-bottom: 0.7rem;} .footer-links a {font-size: 0.85rem;} .footer-brand p {font-size: 0.83rem;} .footer-bottom {font-size: 0.8rem;} /*box class declarations*/ .box1 {width: 100%; aspect-ratio: 16 / 8; } .box2 {width: 50%; font-size: 4vw;} .box1:nth-child(1) {border-radius: 0%;} /*box ID declarations */ #box1-inner {font-size: 3vw;} #box1-inner h2 {font-size: 4vw;} /*grid class declarations*/ .grid3 {padding: 25px;} .grid3a {padding: 25px;} } @media (max-width: 480px) { h3 {font-size: 5vw;} #AM-photo {width: 130px; height: 130px;} .container_footer .footer-inner {gap: 1.5rem; padding: 2rem 1.25rem 1rem;} .footer-heading {font-size: 0.95rem; margin-bottom: 0.6rem;} .footer-links li {margin: 0.6rem 0;} .footer-links a {font-size: 0.9rem;} .footer-brand p {font-size: 0.88rem;} .footer-bottom {font-size: 0.78rem; line-height: 1.5;} .footer-inner {display: grid; grid-template-columns: 1fr; width: 100vw; background-color: #255e74;} /*h2 declarations*/ #box1-inner h2 {font-size: 6vw;} #box3 h2 {font-size: 8vw;} .box3 h2 {font-size: 8vw;} #box4-inner h2 {font-size: 5vw;} #box4-inner h2 {font-size: 6vw;} #box5-inner h2 {font-size: 6vw;} #box6-inner h2 {font-size: 6vw;} #grid6 h2 {font-size: 8vw;} #box7-inner h2 {font-size: 6vw;} #box8-inner h2 {font-size: 6vw;} #box9-inner h2 {font-size: 6vw;} #box10-inner h2 {font-size: 6vw;} #box11-inner h2 {font-size: 6vw;} #box12-inner h2 {font-size: 6vw;} #box13-inner h2 {font-size: 6vw;} #box14-inner h2 {font-size: 6vw;} #box15-inner h2 {font-size: 7vw;} .about_text h2 {font-size: 8vw;} /*box class declarations*/ .box1 {width: 100%; aspect-ratio: 16 / 9;} .box2 {width: 100%; aspect-ratio: 16 / 9;} .box2 a {font-size: 6vw;} .box3 {font-size: 4vw; padding: 0px 10px;} .box6 {font-size: 4vw;} /*grid class declarations*/ .grid1 {padding: 30px;} .grid3 {padding: 30px;} .grid3a {padding: 30px;} .grid5 {padding: 0px ;} .grid6 {padding: 0px 25px;} /*box inner ID declarations*/ #box1-inner {font-size: 4vw;} #box3 {font-size: 4vw;} #box4-inner {font-size: 4vw; padding: 30px;} #box5-inner {font-size: 4vw; padding: 25px;} #box5-inner li {padding-inline-start: 20px;} #box7-inner {font-size: 4vw; padding: 30px;} #box8-inner {font-size: 4vw; padding: 30px;} #box9-inner {font-size: 4vw; padding: 30px;} #box10-inner {font-size: 4vw; padding: 30px;} #box11-inner {font-size: 4vw; padding: 30px;} #box12-inner {font-size: 4vw; padding: 30px;} #box13-inner {font-size: 4vw; padding: 30px;} #box14-inner {font-size: 4vw; padding: 30px;} #box15-inner {font-size: 4vw; padding: 30px;} /*other class declarations*/ .bottom-logo {width: 80%;} .find_out_more {font-size: 6vw;} .container_hero {height: 100vh; width: 100vw; top: 36px;} .input-group {font-size: 4vw;} /*other ID declarations*/ #book-now {height: 7vh; width: 27vw; left: 34vw;} #eye-picture1 {width: 100%; display: block;} #hero-image {height: 100%;} #hero-image-text {width: 100vw; top: 38vh; right: 0;} #hero-image-text h1 {font-size: 6vh;} #hero-image-text h2 {font-size: 3vh;} #hero-line-break1 {display:inline;} #landing-words, #landing-words2 {text-align: center;} #pacifico {font-family: 'Pacifico'; color: #dde8ee; font-size: 5vw;} #top-logo {display: block; width: 70%; position: absolute; top: 11vh; margin-left: 15%; margin-right: 15%; z-index: 80; left: 0; } }