/* *,
html,
body {
display: none !important;
} */
.quality-gallery {
position: relative;
top: 200px;
margin-bottom: 130px;
}
.gallery {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 5px;
grid-row-gap: 5px;
padding: 0 3em 3em 2.5em;
}
.gallery img {
width: 100%;
}
.quality-photo {
height: 187px !important;
}
.quality-photo-2 {
height: 215px !important;
}
section ul {
padding: 30px;
}
.gallery-buttons .first-button {
width: 100px !important;
}
.portfolio-heading {
font-family: inherit !important;
font-weight: 100 !important;
padding-top: 1em !important;
padding-right: 1em !important;
padding-bottom: 0 !important;
padding-left: 1em !important;
}
section ul li {
position: relative !important;
white-space: nowrap !important;
list-style: none;
background: #000000;
padding: 10px;
margin: 5px;
letter-spacing: 1px;
width: auto !important;
display: inline-flex;
justify-content: space-evenly;
cursor: pointer;
color: rgb(255, 255, 255);
border: 0.09px #000 solid;
border-radius: 50px !important;
filter: drop-shadow(2px 5px 2px rgba(0, 0, 0, 0.747));
}
section ul li.active {
color: rgb(0, 0, 0);
background: #ffffff;
border: 0.1px rgb(0, 0, 0) solid;
}
.first-gallery-button {
position: relative !important;
left: 4px !important;
}
.gallery-buttons {
animation: gallery-buttons 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes gallery-buttons {
0% {
left: -2000px;
}
70% {
left: -20px;
}
90% {
left: 10px;
}
100% {
left: 0;
}
}
@media(max-width:320px) {
.first-gallery-button {
position: relative !important;
left: 4px !important;
}
.gallery {
padding: 0 !important;
}
}
@media(max-width:360px) {
.first-gallery-button {
left: 0 !important;
}
.gallery {
padding: 0 !important;
}
}
@media(max-width:540px) {
.first-gallery-button {
left: 0 !important;
}
.gallery {
padding: 0 3em 3em 2.5em !important;
}
}