:root { --main-color: #0196a7; --main-color2: #0196a752; } html { scroll-behavior: smooth; height: fit-content; } body { font-family: 'Lemonada','IBM Plex Serif','Open Sans', sans-serif; } a { color: #000; } a:focus, a:hover { text-decoration: none; color: var(--main-color); transition: .2s; } nav { z-index: 10000; top: 0; width: 100%; position: fixed; box-sizing: border-box; border-bottom: 1px solid var(--main-color); height: 60px; background: #f3f3f3; } nav .container { display: flex; align-items: center; height: 100%; justify-content: space-between; } #menuToggle:checked~#menuButton { right: 0; } .lg_nav { display: flex; justify-content: space-between; width: 100%; align-items: center; height: 100%; } .lg_nav h3 { margin: 0 30px; font-size: 25px; padding-top: 0; min-width: fit-content; } .lg_nav h3 a{ color: var(--main-color); transition: 0.5s; } .lg_nav h3 a:hover{ color: var(--main-color2); } @media (max-width: 992px) { .lg_nav a { font-size: 15px; } .lg_nav h3 { margin: 0 5px; font-size: 20px; } } #menuButtonIcon i { font-size: 30px; margin: 10px 30px; transition: 0.5s; color: var(--main-color); } #menuButtonIcon i:hover { color: var(--main-color2); } #horizontalMenu { display: flex; } @media (max-width: 767px) { #horizontalMenu { display: none; } .lg_nav a { font-size: 20px; } .lg_nav h3 { margin: 0 30px; font-size: 20px; } } #menuToggle:checked~#menuButton { background-color: var(--main-color); z-index: 2; top: 0px; width: 100vw; position: fixed; opacity: 0.55; height: 100%; display: flex; align-items: center; } #menuToggle:checked~#menuButton #menuButtonIcon { display: none; } #menuToggle:checked~#verticalMenu { transform: translateX(0px); } @media (min-width: 767px) { #menuButton, #verticalMenu { display: none; } } #menuToggle:checked~#verticalMenu { transform: translateX(0px); } #verticalMenu { border: 12px solid #ffffff; padding: 0; margin: 0 0 0 auto; z-index: 20000; right: 0px; box-sizing: border-box; transition: all 0.35s; background-color: #ffffff; transform: translateX(100%); top: 0px; max-width: 80vw; width: 100%; position: fixed; height: 100vh; padding-top:10px; } #verticalMenu li>a{ margin: auto; font-size: 18px; } #verticalMenu li p{ margin: auto; width: fit-content; font-size: 12px; } #verticalMenu h3 { min-width: fit-content; margin: 20px; } #verticalMenu h3 a{ width: fit-content; color: var(--main-color); transition: 0.5s; } #verticalMenu h3 a:hover{ color: var(--main-color2); } .navMenuLinkContent { padding: 10px 16px; color: hsla(210, 26%, 7%, 0.7); font-size: 18px; margin-right: auto; position: relative; overflow: hidden; } .navMenuLinkContent::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: -100%; background: var(--main-color); transition: 0.2s; } .navMenuLinkContent:hover::after { color: var(--main-color); left: 0; } .navMenuLink { color: var(--main-color); list-style-type: none; white-space: nowrap; display: flex; align-items: center; } #menuButton { z-index: 3; color: #0e1318; display: flex; justify-content: center; align-items: center; } #menuButton:hover { cursor: pointer; color: var(--main-color); } #menuToggle:checked~#menuButton { background-color: rgba(30, 41, 51, 45); z-index: 2; top: 0px; width: 100vw; position: fixed; opacity: 0.55; height: 100vh; } @media (min-width: 768px) { #menuButton, #verticalMenu { display: none; } } .info_contact a { color: #ffffff; } .slider_section { margin-top: 70px; } .loader-page { display: flex; justify-content: center; align-items: center; position: absolute; display: block; background: #000; height: 100%; min-height: 100vh; width: 100%; left: 0; top: 0; z-index: 111111; } .hidden { visibility: hidden; opacity: 0; transform: scale(45); display: none; } .loding { position: absolute; display: flex; align-items: center; flex-direction: column; top: calc(50vh - 100px); right:calc(50% - 250px); height: 200px; width: 500px; z-index: 11111111; } :root { --main-color: #2c2d35; --main-transition: 0.5s; --effect: hover 1s linear infinite; --white-color: white; --black-color: black; --midnight-black: #121212; --yellow-color: yellow; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; } .loader-letters { display: inline-block; text-transform: uppercase; text-align: center; font-weight: 600; transform: scale(.5); color: var(--main-color); -webkit-text-stroke: 2px gray; font-size: 4em; } .loader:before, .loader:after { border-radius: 50%; content: ''; display: block; height: 20px; width: 20px; } .loader:before { animation: ball1 1s infinite; background-color: #cb2025; box-shadow: 30px 0 0 #f8b334; margin-bottom: 10px; } .loader:after { animation: ball2 1s infinite; background-color: #00a096; box-shadow: 30px 0 0 #97bf0d; } @keyframes hover { 0% { transform: scale(.5); color: var(--main-color); -webkit-text-stroke: 2px gray; } 20% { transform: scale(1); color:midnightblue; -webkit-text-stroke: 3px var(--main-color); filter: drop-shadow(0 0 1px var(--main-color))drop-shadow(0 0 1px var(--main-color))drop-shadow(0 0 3px red)drop-shadow(0 0 5px red)hue-rotate(10turn); } 50% { transform: scale(.5); color: var(--main-color); -webkit-text-stroke: 2px gray; } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg) scale(0.8); -moz-transform: rotate(0deg) scale(0.8); } 50% { -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); } 100% { -webkit-transform: rotate(720deg) scale(0.8); -moz-transform: rotate(720deg) scale(0.8); } } @keyframes ball1 { 0% { box-shadow: 30px 0 0 #f8b334; } 50% { box-shadow: 0 0 0 #f8b334; margin-bottom: 0; -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 #f8b334; margin-bottom: 10px; } } @keyframes ball2 { 0% { box-shadow: 30px 0 0 #97bf0d; } 50% { box-shadow: 0 0 0 #97bf0d; margin-top: -20px; -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 #97bf0d; margin-top: 0; } }