@media (max-width: 820px) {
h1 {
font-size: 1.6em;
padding: 0; 
margin: 0;
}
.reddot {
      vertical-align: -12px;
    width: 18px;
    height: 18px;
}
.reddot-end {
      vertical-align: -3px;
}
.nobreak {
display: block;
}
}


@media (max-width: 768px) {
h1 {
font-size: 1.4em;
margin: 0;
}
.nobreak {
display: block;
}

.charity {
      margin: 0 auto;
    display: table;
}

.page-template-page-contact h2 {
  padding-right: 0;
}
.portfolio-overlay h3 {
    font-size: 0.8em;
}

.portfolio-overlay h4 {
    font-size: 0.8em;

}

.circle-wrapper::before {
width: 200px;
height: 200px;
}
.flex-c,.flex-top {
display: block;
}
.padder {
padding: 8% 60px 8% 5%;
}

main h2 {
        font-size: 1.3em;
}

.reddot {
      vertical-align: -11px;
    width: 15px;
    height: 15px;
    margin: 0 3px 0 4px;
}
.reddot-end {
  vertical-align: -2px;
}

.header {
width: 100%;
padding: 5%;
margin: 0;
text-align: center;
}


.circle-wrapper img {
max-height: 400px;
}
.circle-wrapper::before {
width: 250px;
height: 250px;
}

.quote {
width: 100%;
}



.default-img {
max-height: 250px;
margin: 0 auto;
padding: 0;
display: block;
}
.client-logo img {
width: calc(33%);
}

.portfolio-link {
    margin: 30px auto;
}

  .map-mask-container {
    width: 300px;
    height: 300px;
    /* Use the smaller clipPath for smaller screens */
    clip-path: url(#bubbleMaskSmall);
    -webkit-clip-path: url(#bubbleMaskSmall);
  }



.footer {
padding-right: 5%;
}
.flex-footer {
display: block;
}

}

/* menu (responsive) */
@media (max-width: 1024px) {
.nav-container {
padding: 0;
margin: 0;
}

.navbar button {
display: block;
}

.navbar {
position: relative;
}

.navbar .menu-items {
display: flex;
}

.navbar .nav-container li {
list-style: none;
}

.navbar .nav-container a {
text-decoration: none;
color: #6f6f6f;
font-weight: 500;
font-size: 1.2rem;
padding: 0.7rem;
}

.navbar .nav-container a:hover{
font-weight: bolder;
}

#nav-icon {
width: 40px;
height: 40px;
cursor: pointer;
border: 0;
background: rgba(255, 255, 255, 1);
position: fixed;
z-index: 999;
top: 20px;
right: 20px;
box-sizing: border-box;
border-radius: 9999px;
padding: 0;
}

#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 25px;
background: #000;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}


/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 12px;
left: 8px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 19px;
left: 8px
}

#nav-icon span:nth-child(4) {
top: 26px;
left: 8px;
}

#nav-icon.open span:nth-child(1) {
top: 21px;
width: 0%;
left: 50%;
}

#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}

.menu-items {
height: 100vh;
width: 100%;
transform: translateX(-100%);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px);
position: fixed;
top: 0;
z-index: 998;
right: 0;
}

.menu-items ul {
padding: 0;
margin: 0;
}

.menu-items li {
font-size: 1.5rem;
font-weight: 500;
padding: 0;
margin: 0;
}
.menu-items a {
display: block;
color: #404040;
}
/* remove all pipes from mobile menu */
.menu li::after {
content: "";
display: none;
}

.menu-items.open {
transition: transform 0.3s ease-in-out; 

transform: translateX(0); 
}
}

/* bouncing logo */
.logo-container {
position: relative;
}
.logo {
position: relative;
width: 250px;
height: 123px;
display: block;
padding: 0;
margin: 0;
user-select: none; /* Standard syntax */
}
#bounce {
position: absolute;
top: 1px;
width: 250px;
height: 125px;
display: block;
padding: 0;
margin: 0;
pointer-events: none;
}
#dot {
width: 12px;
height: 12px;
border-radius: 999px;
background: white;
position: absolute;
left: 0;
}

.es {
position: absolute;
pointer-events: none;
top: 68px;
width: 36px;
}
.firste {
left: 87px;
}
.seconde {
left: 187px;
}

.spin {
animation: animName 0.5s linear;
}


@keyframes animName {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
} /* end of menu responsive */