html {scroll-padding-top: 61px;}
.wrapper:not(#homepage-content .wrapper) {padding: 80px 70px 0px;}
.wrapper.homepage {padding: 10px 70px 0px !important;}

nav {height: 60px !important; display: inline-block; font-size: 0;}
nav .nav-content {padding: 10px 0; width: calc(100% - 140px); max-width: 1400px; transform: translateX(-50%); left: 50%; position: relative;}
nav li {display: inline-block; background: rgb(15, 58, 107); height: 100%; border-radius: 50vh; margin: 0 0 0 7px; border: 1px solid rgba(255, 255, 255, 0.5); transition: .2s ease;}
nav li.active {background: rgb(22,86,159); text-decoration: underline;}
nav li.active a {text-decoration: underline;}
nav li:hover {transform: scale(1.065); background: rgb(22,86,159)}
nav li:hover > a {color: white}
nav .nav-menu {position: relative; display: inline-block; padding: 0; height: 100%; vertical-align: top;}
nav a {color: #BAD9A4; text-decoration: none;}
nav a:hover {}
nav a.active {}

nav #more-menu-container {position: relative; display: none; width: 100%;}
nav #more-menu-container.visible {display: inline-block;}
nav #more-button {position: relative; border: 0; background: transparent; filter: invert(1); position: absolute; height: 30px; top: -37px; right: -2px; cursor: pointer; border-radius: 10px; padding: 5px;}
nav #more-button:hover {background: black;}
nav #nav-menu-more {display:none; position: absolute; top: -10px; right: 0; background: white; padding: 10px; border-radius: 10px;}
nav #nav-menu-more.active {display: inline-block;}
nav #nav-menu-more a {display: block; font-size: 16px;}

#hamburger, .hamburger-close, .mobile-menu, .hamburger-button {display: none !important;}

/* Heading*/
.carousel {height: auto; aspect-ratio: 1.8/1;}
.carousel-heading {bottom: 10px; left: 10px; right: 10px;}
.carousel .arrow-prev {left: 10px;}
.carousel .arrow-next {right: 10px;}
.carousel-heading-container p {font-size: 26px;}

.mini-items-heading {grid-template-columns: repeat(auto-fill, minmax(0, calc(25% - 9px)))}

#homepage-content .homepage-content-element div.blog-list .list-item, #homepage-content .homepage-content-element div.reviews-list .list-item {margin: 0;}
#homepage-content .homepage-content-element h1 {font-size: 38px; margin: 35px 0;}

h1 {margin: 20px auto 15px;}
.page-title {font-size: 38px;}

.text-container {padding: 30px 0 50px;}

footer {padding: 20px 70px 40px; background: white;}
footer p {}

/* Contact form */
.contact-form-text-container {padding: 0;}
.contact-form-text-container *:first-child {margin-top: 0;}

/* List - Grid v2*/
div.grid-list {margin: 40px 0 30px; grid-template-columns: repeat(auto-fill, minmax(0, calc(33% - 6px))); gap: 12px; grid-gap: 12px;}
div.grid-list .list-item {object-fit: cover;}
div.grid-list .list-item .grid-list-item-img, div.grid-list .empty-img {/*width:350px;*/ height: 250px; object-fit: cover;}
div.grid-list .list-item .grid-list-item-title {font-size: 21px;}

/* Gallery */
div.gallery-grid-list {margin: 40px 0 30px; grid-template-columns: repeat(auto-fill, minmax(0, calc(33% - 6px))); gap: 12px; grid-gap: 12px;}
div.gallery-grid-list .list-item {object-fit: cover; height: fit-content;}
div.gallery-grid-list .list-item .item-img {object-fit: cover;}

/* List - Blog*/
div.blog-list {margin: 40px 0 30px; grid-template-columns: repeat(auto-fill, minmax(0, calc(50% - 8px)));}

/* List - Reviews*/
div.reviews-list {margin: 25px 0 25px; grid-template-columns: repeat(auto-fill, minmax(0, calc(50% - 8px)));}

/* Documentation Element */
.side-section-list {position: fixed; width: 150px; height: calc(100vh - 70px); top: 70px; padding: 0; margin: 0;}
.side-section-list h2 {display: block;}
.side-section-list a {display: block; margin: 0 10px 8px 0;}
.wrapper.documentation-element .content-wrapper {position: relative; width: calc(100% - 150px); left: 150px; border-left: 1px solid darkgray; padding-left: 50px;}

@keyframes phoneRinging {
	0% {transform: translate(0, -50%) rotate(0);}
	15% {transform: translate(0, -50%) rotate(10deg) scale(1.02);}
    30% {transform: translate(0, -50%) rotate(-10deg) scale(0.98);}
	45% {transform: translate(0, -50%) rotate(10deg) scale(1.02);}
    60% {transform: translate(0, -50%) rotate(-10deg) scale(0.98);}
	75% {transform: translate(0, -50%) rotate(10deg) scale(1.02);}
    90% {transform: translate(0, -50%) rotate(-10deg) scale(0.98);}
	100% {transform: translate(0, -50%) rotate(0);}
}

@media screen and (min-width: 1150px) {
    nav .nav-phone {background: rgb(15, 58, 107); display: inline-block; height: 40px; vertical-align: text-bottom; border-radius: 50vh; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.5); position: absolute; top: 10px; right: 0px; transition: .2s ease;}
    nav.homepage:not(.nav-detached) .nav-phone {right: 20px;}
    nav .nav-phone img {height: 20px; width: 20px; position: absolute; top: 50%; transform: translate(0, -50%);}
    nav .nav-phone p {font-size: 18px; font-size: 18px; line-height: 20px; margin: 0 0 0 30px; font-weight: bold; color: #BAD9A4; transition: .2s ease;}
    nav .nav-phone:hover {transform: scale(1.065); background: rgb(22,86,159)}
    nav .nav-phone:hover img {filter: brightness(0) invert(1); animation: phoneRinging .5s}
    nav .nav-phone:hover p {color: white;}
}

@media screen and (min-width: 1450px) {
    div.grid-list {grid-template-columns: repeat(auto-fill, minmax(0, calc(20% - 10px)));}
    div.gallery-grid-list {grid-template-columns: repeat(auto-fill, minmax(0, calc(20% - 10px)));}
}