/* Copyright 2024 Samen Zoet & InnerCreation MultiMedia Design*/

*, html {
  margin: 0;
  scroll-behavior: smooth;
}

body {
  background-image: url(/img/bg-texture-100.png);
  background-attachment: fixed;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }

/* FRONTPAGE CSS */

#container-fp {
  font-family: Dosis;
  color: rebeccapurple;
  /* height: 100vh; */
}

.content-fp {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}

.top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 150px;
  position: relative;
  z-index: 1;
}

.mid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 500px;
  z-index: 0;
}

.bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 150px;
  position: relative;
  z-index: 1;
}

.pos1 {
  width: 160px;
  height: 160px;
  margin-top: 150px;
}

.pos2 {
  width: 150px;
  height: 150px;
}

.pos3 {
  width: 140px;
  height: 140px;
  margin-top: 150px;
}

.pos4 {
  width: 140px;
  height: 140px;
  margin-top: -150px;
}

.pos5 {
  width: 150px;
  height: 150px;
}

.pos6 {
  width: 160px;
  height: 160px;
  margin-top: -150px;
}

.fp-img {
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.8;
  transition: linear 0.2s;
}

.fp-img:hover {
  opacity: 1.0;
  transition: linear 0.2s;
}

.logo {
  border-radius: 50%;
  height: 500px;
  width: 500px;
  margin-left: 20px;
  /* background: coral; */
  overflow: hidden;

}

.logo > img {
  width: 100%;
}

.circle {
border-radius: 50%;
/* height: 150px;
width: 150px; */
background: #ffbbbb;
border: 3px solid #ff86be;
margin-left: 30px;
margin-right: 30px;
/* overflow: hidden; */
}

.spacer {
  height: 20px;
}

/* Tooltip container */
.tooltip-up, .tooltip-dwn {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip-up .tooltiptext-up {
  /* visibility: hidden; */
  width: 120px;
  background-color: rebeccapurple;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -40px;
  left: 12px;
  opacity: 0;
}

.tooltip-dwn .tooltiptext-dwn {
  /* visibility: hidden; */
  width: 120px;
  background-color: rebeccapurple;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  bottom: -40px;
  left: 16px;
  opacity: 0;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-up:hover .tooltiptext-up {
  /* visibility: visible; */
  opacity: 1;
  transition: linear 0.2s
}

.tooltip-dwn:hover .tooltiptext-dwn {
  /* visibility: visible; */
  opacity: 1;
  transition: linear 0.2s
}

.tooltip-up .tooltiptext-up::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rebeccapurple transparent transparent transparent;
}

.tooltip-dwn .tooltiptext-dwn::after {
  content: " ";
  position: absolute;
  bottom: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rebeccapurple transparent;
}

.top {
    animation-name: fadeInAnimation, fancyIn;
    animation-iteration-count: 1;
    animation-duration: 2s;
    }
.bottom {
      animation-name: fadeInAnimation, fancyIn;
      animation-iteration-count: 1;
      animation-duration: 2s;
    }
.logo {
  animation-name: fancyOut;
  animation-iteration-count: 1;
  animation-duration: 1s;
    }
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
@keyframes fancyOut {
      0% {
          transform: scale(110%);
      }
      100% {
          transform: scale(100%);
      }
    }
@keyframes fancyIn {
      0% {
          transform: scale(90%);
      }
      100% {
          transform: scale(100%);
      }
    }

/* END FRONTPAGE CSS */

#container {
  background-image: url(/img/bg-cake.png);
  background-position: center center;
  font-family: Dosis;
  color: rebeccapurple;
  /* height: 100vh; */
  background-attachment: fixed;
}

.content {
  background-image: url(/img/bg-texture-70.png);
  position: relative;
  max-width: 1000px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  box-shadow: 0px 0px 25px #7c7769;
}

.content {
  animation-name: fadeInAnimation;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.content.border {
  --s: 5px;  /* control the size of the wave */
  --w: 1000px; /* preferred image width */

  width: round(var(--w),4*var(--s));
  /* aspect-ratio: 1; */
  padding: var(--s);
  border: var(--s) solid #0000;
  box-sizing: border-box;
  /* background: conic-gradient(#CD8C52,#5E9FA3,#CD8C52) border-box; */
  border-radius: calc(3.5*var(--s));
  mask:
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px))
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);
}

.inner-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.header {
  height: 60px;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 50px;
}

.nav {
  height: 48px;
  background: linear-gradient(90deg, #ffbbbb, transparent);
  border-radius: 4px;
  border: none;
  padding: 6px;
}

.title {
  display: inline-block;
}

img.arrow {

}

.nav-pic {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #ff86be;
  overflow: hidden;
  background: white;
  position: absolute;
  top: 44px;

}

.pic {
  width: 100%;
  filter: sepia(0.3);
}

.nav-arrow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #ff86be;
  float: right;
  display: flex;
  /* overflow: hidden; */
  /* background: white; */
  margin-top: -18px;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}

h1, h2, {
  font-size: 48px;
}

h3 {
  font-size: 38px;
  text-shadow: 0 0 3px bisque;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

.footer {
  height: 150px;
  width: 100%;
  text-align: center;
}

.inner {
  position: relative;
  top: 50px;
}

.inner p {
  margin-bottom: 5px;
}

.intro {
  font-size: 18px;
}

.intro p {
  margin-top: 5px;
}

.info {
  width: 100%;
  text-align: left;
  font-size: 18px;
  margin-top: 20px;
}

.thumb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffbbbb;
  border: 8px solid #ff86be;
  /* overflow: hidden; */
  /* box-shadow: 3px 3px 10px #918978; */
  margin: 5px;
  opacity: 0.8;
  transform: scale(100%);
  transition: linear 0.2s;
  object-fit: cover;
}

.thumb:hover {
  opacity: 1.0;
  transform: scale(110%);
  transition: linear 0.2s;
}

.polygon {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,93.3% 75%,75% 93.3%,50% 100%,25% 93.3%,6.7% 75%,0% 50%,6.7% 25%,25% 6.7%,50% 0%,75% 6.7%,93.3% 25%);
}

.flower18 {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/14.796% 14.796% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),96.985% 67.101% var(--g),88.302% 82.139% var(--g),75% 93.301% var(--g),58.682% 99.24% var(--g),41.318% 99.24% var(--g),25% 93.301% var(--g),11.698% 82.139% var(--g),3.015% 67.101% var(--g),0% 50% var(--g),3.015% 32.899% var(--g),11.698% 17.861% var(--g),25% 6.699% var(--g),41.318% 0.76% var(--g),58.682% 0.76% var(--g),75% 6.699% var(--g),88.302% 17.861% var(--g),96.985% 32.899% var(--g),radial-gradient(100% 100%,#000 41.955%,#0000 calc(41.955% + 1px));

  -webkit-mask: 100% 50% var(--g),96.985% 67.101% var(--g),88.302% 82.139% var(--g),75% 93.301% var(--g),58.682% 99.24% var(--g),41.318% 99.24% var(--g),25% 93.301% var(--g),11.698% 82.139% var(--g),3.015% 67.101% var(--g),0% 50% var(--g),3.015% 32.899% var(--g),11.698% 17.861% var(--g),25% 6.699% var(--g),41.318% 0.76% var(--g),58.682% 0.76% var(--g),75% 6.699% var(--g),88.302% 17.861% var(--g),96.985% 32.899% var(--g),radial-gradient(100% 100%,#000 41.955%,#0000 calc(41.955% + 1px));

}

.flower20 {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/13.528% 13.528% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),97.553% 65.451% var(--g),90.451% 79.389% var(--g),79.389% 90.451% var(--g),65.451% 97.553% var(--g),50% 100% var(--g),34.549% 97.553% var(--g),20.611% 90.451% var(--g),9.549% 79.389% var(--g),2.447% 65.451% var(--g),0% 50% var(--g),2.447% 34.549% var(--g),9.549% 20.611% var(--g),20.611% 9.549% var(--g),34.549% 2.447% var(--g),50% 0% var(--g),65.451% 2.447% var(--g),79.389% 9.549% var(--g),90.451% 20.611% var(--g),97.553% 34.549% var(--g),radial-gradient(100% 100%,#000 42.704%,#0000 calc(42.704% + 1px));

  -webkit-mask: 100% 50% var(--g),97.553% 65.451% var(--g),90.451% 79.389% var(--g),79.389% 90.451% var(--g),65.451% 97.553% var(--g),50% 100% var(--g),34.549% 97.553% var(--g),20.611% 90.451% var(--g),9.549% 79.389% var(--g),2.447% 65.451% var(--g),0% 50% var(--g),2.447% 34.549% var(--g),9.549% 20.611% var(--g),20.611% 9.549% var(--g),34.549% 2.447% var(--g),50% 0% var(--g),65.451% 2.447% var(--g),79.389% 9.549% var(--g),90.451% 20.611% var(--g),97.553% 34.549% var(--g),radial-gradient(100% 100%,#000 42.704%,#0000 calc(42.704% + 1px));

}

.flower35 {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/8.226% 8.226% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),99.196% 58.928% var(--g),96.812% 67.569% var(--g),92.922% 75.645% var(--g),87.654% 82.897% var(--g),81.174% 89.092% var(--g),73.693% 94.03% var(--g),65.451% 97.553% var(--g),56.712% 99.547% var(--g),47.757% 99.95% var(--g),38.874% 98.746% var(--g),30.349% 95.976% var(--g),22.455% 91.729% var(--g),15.447% 86.14% var(--g),9.549% 79.389% var(--g),4.952% 71.694% var(--g),1.802% 63.302% var(--g),0.201% 54.482% var(--g),0.201% 45.518% var(--g),1.802% 36.698% var(--g),4.952% 28.306% var(--g),9.549% 20.611% var(--g),15.447% 13.86% var(--g),22.455% 8.271% var(--g),30.349% 4.024% var(--g),38.874% 1.254% var(--g),47.757% 0.05% var(--g),56.712% 0.453% var(--g),65.451% 2.447% var(--g),73.693% 5.97% var(--g),81.174% 10.908% var(--g),87.654% 17.103% var(--g),92.922% 24.355% var(--g),96.812% 32.431% var(--g),99.196% 41.072% var(--g),radial-gradient(100% 100%,#000 45.702%,#0000 calc(45.702% + 1px));

  -webkit-mask: 100% 50% var(--g),99.196% 58.928% var(--g),96.812% 67.569% var(--g),92.922% 75.645% var(--g),87.654% 82.897% var(--g),81.174% 89.092% var(--g),73.693% 94.03% var(--g),65.451% 97.553% var(--g),56.712% 99.547% var(--g),47.757% 99.95% var(--g),38.874% 98.746% var(--g),30.349% 95.976% var(--g),22.455% 91.729% var(--g),15.447% 86.14% var(--g),9.549% 79.389% var(--g),4.952% 71.694% var(--g),1.802% 63.302% var(--g),0.201% 54.482% var(--g),0.201% 45.518% var(--g),1.802% 36.698% var(--g),4.952% 28.306% var(--g),9.549% 20.611% var(--g),15.447% 13.86% var(--g),22.455% 8.271% var(--g),30.349% 4.024% var(--g),38.874% 1.254% var(--g),47.757% 0.05% var(--g),56.712% 0.453% var(--g),65.451% 2.447% var(--g),73.693% 5.97% var(--g),81.174% 10.908% var(--g),87.654% 17.103% var(--g),92.922% 24.355% var(--g),96.812% 32.431% var(--g),99.196% 41.072% var(--g),radial-gradient(100% 100%,#000 45.702%,#0000 calc(45.702% + 1px));

}

.flower32 {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/8.926% 8.926% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),99.039% 59.755% var(--g),96.194% 69.134% var(--g),91.573% 77.779% var(--g),85.355% 85.355% var(--g),77.779% 91.573% var(--g),69.134% 96.194% var(--g),59.755% 99.039% var(--g),50% 100% var(--g),40.245% 99.039% var(--g),30.866% 96.194% var(--g),22.221% 91.573% var(--g),14.645% 85.355% var(--g),8.427% 77.779% var(--g),3.806% 69.134% var(--g),0.961% 59.755% var(--g),0% 50% var(--g),0.961% 40.245% var(--g),3.806% 30.866% var(--g),8.427% 22.221% var(--g),14.645% 14.645% var(--g),22.221% 8.427% var(--g),30.866% 3.806% var(--g),40.245% 0.961% var(--g),50% 0% var(--g),59.755% 0.961% var(--g),69.134% 3.806% var(--g),77.779% 8.427% var(--g),85.355% 14.645% var(--g),91.573% 22.221% var(--g),96.194% 30.866% var(--g),99.039% 40.245% var(--g),radial-gradient(100% 100%,#000 45.317%,#0000 calc(45.317% + 1px));

  -webkit-mask: 100% 50% var(--g),99.039% 59.755% var(--g),96.194% 69.134% var(--g),91.573% 77.779% var(--g),85.355% 85.355% var(--g),77.779% 91.573% var(--g),69.134% 96.194% var(--g),59.755% 99.039% var(--g),50% 100% var(--g),40.245% 99.039% var(--g),30.866% 96.194% var(--g),22.221% 91.573% var(--g),14.645% 85.355% var(--g),8.427% 77.779% var(--g),3.806% 69.134% var(--g),0.961% 59.755% var(--g),0% 50% var(--g),0.961% 40.245% var(--g),3.806% 30.866% var(--g),8.427% 22.221% var(--g),14.645% 14.645% var(--g),22.221% 8.427% var(--g),30.866% 3.806% var(--g),40.245% 0.961% var(--g),50% 0% var(--g),59.755% 0.961% var(--g),69.134% 3.806% var(--g),77.779% 8.427% var(--g),85.355% 14.645% var(--g),91.573% 22.221% var(--g),96.194% 30.866% var(--g),99.039% 40.245% var(--g),radial-gradient(100% 100%,#000 45.317%,#0000 calc(45.317% + 1px));

}

.flower40 {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/7.276% 7.276% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),99.384% 57.822% var(--g),97.553% 65.451% var(--g),94.55% 72.7% var(--g),90.451% 79.389% var(--g),85.355% 85.355% var(--g),79.389% 90.451% var(--g),72.7% 94.55% var(--g),65.451% 97.553% var(--g),57.822% 99.384% var(--g),50% 100% var(--g),42.178% 99.384% var(--g),34.549% 97.553% var(--g),27.3% 94.55% var(--g),20.611% 90.451% var(--g),14.645% 85.355% var(--g),9.549% 79.389% var(--g),5.45% 72.7% var(--g),2.447% 65.451% var(--g),0.616% 57.822% var(--g),0% 50% var(--g),0.616% 42.178% var(--g),2.447% 34.549% var(--g),5.45% 27.3% var(--g),9.549% 20.611% var(--g),14.645% 14.645% var(--g),20.611% 9.549% var(--g),27.3% 5.45% var(--g),34.549% 2.447% var(--g),42.178% 0.616% var(--g),50% 0% var(--g),57.822% 0.616% var(--g),65.451% 2.447% var(--g),72.7% 5.45% var(--g),79.389% 9.549% var(--g),85.355% 14.645% var(--g),90.451% 20.611% var(--g),94.55% 27.3% var(--g),97.553% 34.549% var(--g),99.384% 42.178% var(--g),radial-gradient(100% 100%,#000 46.22%,#0000 calc(46.22% + 1px));

  -webkit-mask: 100% 50% var(--g),99.384% 57.822% var(--g),97.553% 65.451% var(--g),94.55% 72.7% var(--g),90.451% 79.389% var(--g),85.355% 85.355% var(--g),79.389% 90.451% var(--g),72.7% 94.55% var(--g),65.451% 97.553% var(--g),57.822% 99.384% var(--g),50% 100% var(--g),42.178% 99.384% var(--g),34.549% 97.553% var(--g),27.3% 94.55% var(--g),20.611% 90.451% var(--g),14.645% 85.355% var(--g),9.549% 79.389% var(--g),5.45% 72.7% var(--g),2.447% 65.451% var(--g),0.616% 57.822% var(--g),0% 50% var(--g),0.616% 42.178% var(--g),2.447% 34.549% var(--g),5.45% 27.3% var(--g),9.549% 20.611% var(--g),14.645% 14.645% var(--g),20.611% 9.549% var(--g),27.3% 5.45% var(--g),34.549% 2.447% var(--g),42.178% 0.616% var(--g),50% 0% var(--g),57.822% 0.616% var(--g),65.451% 2.447% var(--g),72.7% 5.45% var(--g),79.389% 9.549% var(--g),85.355% 14.645% var(--g),90.451% 20.611% var(--g),94.55% 27.3% var(--g),97.553% 34.549% var(--g),99.384% 42.178% var(--g),radial-gradient(100% 100%,#000 46.22%,#0000 calc(46.22% + 1px));

}

.starburst {
  width: 100px; /* adjust to control the size */
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,96.74% 54.91%,98.91% 60.4%,94.7% 64.52%,95.68% 70.34%,90.7% 73.5%,90.45% 79.39%,84.93% 81.45%,83.46% 87.16%,77.63% 88.02%,75% 93.3%,69.12% 92.94%,65.45% 97.55%,59.77% 95.97%,55.23% 99.73%,50% 97%,44.77% 99.73%,40.23% 95.97%,34.55% 97.55%,30.88% 92.94%,25% 93.3%,22.37% 88.02%,16.54% 87.16%,15.07% 81.45%,9.55% 79.39%,9.3% 73.5%,4.32% 70.34%,5.3% 64.52%,1.09% 60.4%,3.26% 54.91%,0% 50%,3.26% 45.09%,1.09% 39.6%,5.3% 35.48%,4.32% 29.66%,9.3% 26.5%,9.55% 20.61%,15.07% 18.55%,16.54% 12.84%,22.37% 11.98%,25% 6.7%,30.88% 7.06%,34.55% 2.45%,40.23% 4.03%,44.77% 0.27%,50% 3%,55.23% 0.27%,59.77% 4.03%,65.45% 2.45%,69.12% 7.06%,75% 6.7%,77.63% 11.98%,83.46% 12.84%,84.93% 18.55%,90.45% 20.61%,90.7% 26.5%,95.68% 29.66%,94.7% 35.48%,98.91% 39.6%,96.74% 45.09%);
}

.gallery {
  text-align: center;
  margin-top: 25px;
}

.gallery a {
  text-decoration: none;
}

a, a:active, a:visited {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  transition: linear 0.2s;
}

a:hover {
  color: rebeccapurple;
  font-weight: bold;
  transition: linear 0.2s;
}

/* Tooltip container */
.navtip {
  position: relative;
  /* display: inline-block; */
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.navtip .navtiptext {
  /* visibility: hidden; */
  width: 120px;
  background-color: rebeccapurple;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -40px;
  left: -20px;
  opacity: 0;
}

/* Show the tooltip text when you mouse over the tooltip container */
.navtip:hover .navtiptext {
  /* visibility: visible; */
  opacity: 1;
  transition: linear 0.2s
}

.navtip .navtiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rebeccapurple transparent transparent transparent;
}

.nav-arrow, .toTop img {
  transform: scale(100%);
  transition: 0.2s ease-in-out;
}

.nav-arrow:hover, .toTop img:hover {
  transform: scale(105%);
  transition: 0.2s ease-in-out;
}

.hidden {
  display: none;
}

.flex {
  display: flex !important;
}

.hr, hr {
  width: 75%;
  border-radius: 25%;
  border: 1px solid #ff86be;
  margin-top: 25px;
}

  .hover-underline-animation {
  display: inline-block;
  position: relative;
  }

  .hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ff86be;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  }

  .hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
  }

  .toTop {
    width: 100%;
    text-align: right;
  }
  .toTop img {
    border-radius: 50%;
    border: 1px solid #ff86be;
    padding: 5px;
  }

  .bold {
    font-weight: bold;
  }

  @media (max-width:400px){
    .navtiptext {display: none;}
    .nav-arrow {width: 70px; height: 70px; margin-top: -13px;}
  }

  @media(max-width: 1600px) {

    .content-fp { margin-top: 20px; }
  }
  @media(max-width: 600px) {

    .content-fp { transform: scale(0.6); top: -100px;}
    .circle { margin-left: 20px; margin-right: 20px; }
    .nav-pic { top: 30px; z-index: -1; }
  }