@font-face { font-display: swap; font-family: 'Montserrat-Regular'; font-style: normal; font-weight: 400; src: url('/fonts/montserrat-v26-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Montserrat-Medium'; font-style: normal; font-weight: 500; src: url('/fonts/montserrat-v26-latin-500.woff2') format('woff2'); } *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: white; max-width: 1200px; margin: auto; } #headerbox { background-color: #DEEBEE; position: fixed; width: min(100vw,1200px); z-index: 1; } #logoBlock{ font-family: 'Trajan Pro', 'Times New Roman', Times, serif; user-select: none; float: left; font-weight: 600; padding-left: 8px; padding-top: 10px; } #logopic{ } nav{ user-select: none; margin-right: 129px; } nav:after{ content: ''; clear: both; display: table; } nav ul{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 18px; float: right; list-style: none; position: relative; padding-top: 28px; } nav ul li{ display: inline-block; background: #DEEBEE; top: -15px; } nav ul li a{ color: #555; text-decoration: none; padding: 8px 10px; line-height: 40px; } nav ul li a:hover{ color: #000; background-color: #DDF; } nav ul li span{ color: #555; text-decoration: none; padding: 8px 9px; display: inline-block; text-align: center; } nav ul li span:hover{ color: #000; background-color: #DDF; } nav ul ul li a:hover{ box-shadow: none; } nav ul ul li a:not([href]){ box-shadow: none; background-color: #DDD;; cursor: default; } nav ul ul li span{ box-shadow: none; background-color: #DDD;; cursor: default; } nav ul ul{ position: absolute; top: 95px; opacity: 0; visibility: hidden; transition: top 0.1s; } nav ul ul ul{ border-top: none; } nav ul li:hover > ul{ top: 70px; opacity: 1; visibility: visible; } nav ul ul li{ position: relative; margin: 0px; width: 100%; float: none; display: list-item; border: 1px solid rgba(0,0,0,0.3); } nav ul ul li a{ line-height: 40px; } nav ul ul ul li{ position: relative; top: -60px; left: 150px; } .show,.icon,input{ display: none; } #contact{ background-color: #DDF; background: #e12929; box-shadow: none; display: inline-block; float: right; font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 18px; padding: 8px 10px; position: relative; text-decoration: none; top: 23px; color: white; border-radius: 7px; padding: 10px; border-color: #000000b8; border-width: 2px; border-style: solid; right: 20px; } #contact a{ text-decoration: none; color: white; } #heroimage1{ height: auto; width: min(calc(100vw - 1rem), 555px); } #herotextbox1 { font-size: 40px; background-color: beige; position: absolute; width: 500px; height: auto; right: 0px; top: 94px; padding: inherit; } #heroimage2{ height: auto; width: min(calc(100vw - 1rem), 555px); position: absolute; right: 0px; } #herotextbox2 { font-size: 40px; background-color: antiquewhite; position: absolute; width: 500px; height: auto; left: 0px; top: 467px; padding: inherit; } .img-left{ height: auto; float: left; margin: 10px; max-width: 100%; } .img-right{ height: auto; float: right; margin: 10px; max-width: 100%; } .spanbox{ display: inherit; padding: 10px; padding-top: 20px; text-align: justify; } .textbox { background-color: #d9f7f1; height: auto; padding: inherit; float: inline-end; margin-top: 15px; font-size: max(18px, min(2.6vw,23px)); width: 100%; } .fotos { display: flex; justify-content: center; } .fotos img{ height: max(360px,min(45vw, 450px)); width:auto; padding: 0.2vw; } .content{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; z-index: -1; top: 102px; text-align: center; margin: auto; position: absolute; left: 50%; transform: translate(-50%,0%); } .container { max-width: 100rem; margin: 0 auto; padding: 0 0.5rem 1rem; top: 100px; position: relative; } h1{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: max(23px, min(7vw, 37px)); text-align: center; color: #444; font-weight: 600; padding: 10px 0; padding-top: 6px; } h2{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: max(20px, min(7vw, 30px)); text-align: center; color: #444; font-weight: 400; padding: 10px 0; padding-top: 6px; } header{ font-size: max(20px, min(4vw, 35px)); color: #444; font-weight: 600; padding: 10px 0; } .toptext{ font-family: 'Montserrat-Medium', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-align: right; font-size: min(5vw, 25px); font-weight: 500; color: #444; margin-right: 20px; margin-bottom: 20px; } .content-body{ text-align: center; margin-bottom: 20px; color: #555; width: 97vw; } .header-img{ height: max(360px,min(60vw, 450px)); width:auto; padding: 0.2vw; } .content-title { margin-top: min(1vw, 20px); font-size:max(20px, min(5vw,25px)); color: #444; } .content-text{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 16px; color: #444; margin-top: 10px; text-align: justify ; max-width: 850px; margin: auto; } .content-text-center{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #444; font-size:max(16px, min(2.6vw,18px)); margin-top: 10px; text-align: center; max-width: 950px; margin: auto; } .branding-content-text-center{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #444; font-size:max(16px, min(2.6vw,22px)); margin-top: 10px; text-align: center; max-width: 850px; margin: auto; padding-top: 390px; } .testimonials { max-width: 950px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .fotosTest{ width: min(100vw,1200px); } .fotosTest img{ height: auto; max-width: 100%; margin: 5px; box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4); } .cover-images { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax( calc(100% / 5) ,1fr)); gap: 8px; } .cover-images-box{ background-color: rgba(255, 255, 255, 0.0); padding: 0px; border-color: #004d26b8; border-width: 1px; border-style: solid; height: 100%; } .cover-images-head{ font-size: max(15px, min(2.6vw,23px)); } .cover-image { display: block; width: 100%; height: 92%; object-fit: cover; transition: transform 400ms ease-out; } .cover-image:hover { transform: scale(1.1); } :root { font-size: 20px; } *, *::before, *::after { box-sizing: border-box; } .gallery { display: flex; flex-wrap: wrap; margin: -1rem -1rem; } .gallery-item { flex: 1 0 min(28vw,221px); margin: 1rem; box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4); overflow: hidden; } .gallery-item-blank { flex: 1 0 min(28vw,221px); margin: 1rem; overflow: hidden; max-height: 0px; display: block; width: 100%; height: 100%; object-fit: cover; } .gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; } @supports (display: grid) { .gallery { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); grid-gap: 1rem; } .gallery, .gallery-item, .gallery-item-blank{ margin: 0; } } .testimonial-box{ font-size: max(15px, min(2.6vw,17px)); color: #444; background-color: rgba(255, 255, 255, 0.0); border-radius: 7px; padding: 10px; border-color: #8e2d2db8; border-width: 2px; border-style: solid; } .testimonial-head{ font-size: max(19px, min(2.6vw,23px)); } .boxTest { display: inline-block; vertical-align: top; margin: 5px; } .sub-titleTest { color: #3F3F3F; text-align: left; } .vids video { max-width: 100%; height: auto; } .footerlinks { font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; z-index: -1; text-align: center; max-width: 1200px; margin: auto; padding: 50px; font-size: 16px; font-weight: normal; } @media all and (max-width: 1005px) { body{ margin: auto; } #headerbox { height: 82px; } #logopic{ width: min(64vw,353px); height: auto; } .icon{ display: block; color: black; position: absolute; top: 0; line-height: 31px; cursor: pointer; font-size: 33px; top: 25px; } #logoBlock { padding-top: 1px; padding-left: 0px; width: auto; text-align: center; float: none; } #mainlogo { float: none; text-align: center; position: relative; } #contact{ position: relative; left: -3vw; position: relative; top: -54px; padding: 5px; } nav{ margin-right: 0px; float:left; } nav ul{ margin-right: 0px; float: left; padding-top: 0px; } .show + span, ul{ display: none; } nav ul li,nav ul ul li{ display: block; width: 100%; top: 0px; float: none; border: none; } nav ul li a{ color: #555; text-decoration: none; padding: 8px 10px; } nav ul li a:hover{ box-shadow: none; } nav ul li span{ color: #555; text-decoration: none; padding: 8px 10px; } nav ul li span:hover{ box-shadow: none; } .show{ display: block; color: #999; font-size: 18px; padding: 0 10px; line-height: 40px; cursor: pointer; } .show:hover{ color: #777; } nav ul ul{ top: 70px; border-top: 0px; float: none; position: static; display: none; opacity: 1; visibility: visible; } nav ul ul a,nav ul ul span{ padding-left: 40px; } nav ul ul ul a{ padding-left: 80px; } nav ul ul ul li{ position: static; } [id^=btn]:checked + ul{ display: block; } nav ul ul li a{ line-height: 35px; } span.cancel:before{ content: '\f00d'; } #herotextbox1 { font-size: min(40px, 9vw); background-color: beige; position: inherit; width: min(calc(100vw - 1rem), 555px); height: auto; left: calc(100vw - min(100vw, 555px) ); top: 0px; } #heroimage2{ height: auto; width: min(calc(100vw - 1rem), 555px); position: revert; } #herotextbox2 { font-size: min(40px, 9vw); position: inherit; width: min(calc(100vw - 1rem), 555px); height: auto; left: calc(100vw - min(100vw, 555px) ); top: 0px; } .content-text-center{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #444; font-size:max(16px, min(2.6vw,18px)); margin-top: 10px; text-align: center; max-width: 850px; margin: auto; } .branding-content-text-center{ font-family: 'Montserrat-Regular', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #444; margin-top: 10px; text-align: center; max-width: 850px; margin: auto; padding-top: 22px; } } @media all and (max-width: 550px) { .icon{ display: block; color: black; position: absolute; line-height: 31px; cursor: pointer; font-size: 33px; position: absolute; } #headerbox { height: 18vw; } #logoBlock { padding-top: 1px; padding-left: 0px; width: auto; text-align: center; float: none; } #contact{ position: relative; left: -15px; position: relative; top: -30px; padding: 1px 7px; font-size: 14px; } .content{ top: min(18vw,100px); } } @media all and (max-width: 515px) { .cover-images { grid-template-columns: repeat(auto-fill, minmax( calc(100% / 3) ,1fr)); gap: 8px; } }