@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

:root {
  font-size: clamp(12px,0.9vw,50px);
}

h1{
  text-align: center;
  margin: 0;
}
p{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
}
body {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Bree Serif';
  -webkit-tap-highlight-color: transparent;
}
img {  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.background{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  height: 100vh;
  width: 100vw;
  margin: 0;
  transition: transform 1.2s;
  background-image: url(/Photos/Hannah-Gaff-small.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.background img{
  object-fit: cover;
  object-position: center;
  height: 180vh;
  width: 180vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.background.loaded img {
  opacity: 1;
}
.background::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: loading 2.5s infinite;
}

@keyframes loading {
  0% {
    background-color: rgba(255, 255, 255, 0);  
  }
  50% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

.background.loaded::before {
  animation: none;
  content: none;
}

#textpopup {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
  color: #fff;
  font-size: 1.2rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav{
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
}
.home{
  display: flex;
  height: clamp(20px,2rem,90px);
  background-color: #fa4141;
  opacity: 0.8;
  backdrop-filter: blur(5px);
  border-radius: 50%;
  padding: 0.7rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: transform 0.5s ease;
}
.home svg{  
  display: flex;
  height: clamp(20px,2rem,90px);
  fill: #fff;
  z-index: 2;
}
.home:hover{
transform: scale(1.2);
opacity: 1;
}

.contact{
  display: flex;
  height: clamp(20px,2rem,90px);
  background-color: #fa4141;
  opacity: 0.8;
  backdrop-filter: blur(5px);
  border-radius: 50%;
  padding: 0.7rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: transform 0.5s ease;
}
.contact svg{  
  display: flex;
  height: clamp(20px,2rem,90px);
  fill: #fff;
  z-index: 2;
}
.contact:hover{
transform: scale(1.2);
opacity: 1;
}
.popupChild1{
  width: 30%;
  color: #fff;
  text-align: center;
  background-color: rgb(250, 65, 65, 80%);
}
.popupChild1 h2{
  font-size: 1.5rem;
}
.socialContainer{
  width: 100%;
  display: flex;
  justify-content: center;
}
.social{
  width: 90%;
  display: flex;
  justify-content: space-between;
}
.socialicon{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  width: 3rem;
  height: 3rem;
  transition: transform 0.5s ease;
  cursor: pointer;
}
.socialicon:focus{
  outline: none
}
.socialicon:hover{
  transform: scale(1.2);
}
.socialicon svg{
  opacity: 0.8;
  height: 60%;
  z-index: 2;
  fill: #fff;
} 
.socialicon:hover
svg{
  opacity: 1;
}
.facebook{
  background-color: #3C599F;
}
.instagram{
    background-image: linear-gradient(155deg, #4C57A2 8%, #87439A 50%, #e02870 85%);
    position: relative;
    overflow: hidden;
    &:after{
      content: '';
      display: block;
      position: absolute;
      top: 30%;
        left: -60%;
      width: 150%;
      height: 150%;
      background: radial-gradient(rgba(246, 221, 132,1) 15%, 
        rgba(255, 45, 45, 0.65) 50%, 
        rgba(0, 0, 0, 0) 70%);
      }
  }
  .youtube{
    background-color: #C52F30;
  }
  .linkedin{
    background-color: #007bb6 ;
  }
.gmail{
  background-color: #fff;
}
.popupChild{
  border: none;
  cursor: default;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  border-radius: 15px;
}
.popupChildV{
  padding: 0%;
  width: 80%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.close-dialog{
  position: absolute;
  display: flex;
  top: 8px;
  right: 8px;
  height: 2rem;
  width: 2rem;
  fill: #ffff;
  background: none;
  border: none;
  cursor: pointer;
}
.close-dialog:focus {
  outline: none;
}
#videoplayer{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popupChild::backdrop {
  background: rgba(16 18 27 / 40%);
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.playVideo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: transform 0.6s ease, opacity 0.6s ease;
  width: 10%;
  opacity: 0.8;
  }
.playVideo img{
width: 100%;
}
  .playbutton{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .playbutton:hover
  .playVideo {
    opacity: 1;
    }

.content{
  height: 100%;
  width: 100%;
  margin: 0;
  transition: transform 1.2s;
}
.layer{
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.layerMain{
  font-size: 1.7rem;
}

.circle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 1.2s, opacity 0.6s ease;
  font-size: 1em;
  text-align: center;
  border-radius: 100%;
  z-index: 1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.circle p{
  color: #fff;
  z-index: 2;
}

.circleBK{
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  transition: transform 1.2s, opacity 0.6s ease;
  border-radius: 100%;
  opacity: 0.8;
}
.circle:hover
.circleBK{
  opacity: 1;
}
.circle:hover{
  transform: scale(1.2);
}
.circlechild {
  position: absolute;
  display: flex;
  font-size: 0.5rem;
  justify-content: center;
  align-items: center;
  cursor: default;
  transition: transform 1.2s;
  color: #fff;
  cursor: pointer;
}
.childContent{
  display: flex;
  font-size: 0.5rem;
  justify-content: center;
  align-items: center;
  cursor: default;
}
.inset{
  position: absolute;
}

/* About*/

.circle1{
  font-size: 2.2rem;
  width: 15rem;
  height: 15rem;
}
.circle1 .circleBK{
  background-color: #fa4141;
}
.circle1child {
  width: 15rem; 
  height: 15rem;
}
.circle1childContent {
  flex-direction: column;
  align-content: center;
  border-radius: 100%;
  background-color: #fa4141;
  font-size: 0.55rem;
  width: 15rem;
  height: 15rem;
}
.circle1childContent .img1 {
  position: relative;
  width: 55%;
  inset: -1% auto 0 auto;
}

.circle1childContent .img1 img{
width: 100%;
}

.circle1childContent h1{
  font-size: 1.2em;
  font-weight: 500;
}
.circle1childContent p{
  text-align: center;
  font-size: 0.65em;
  font-weight: 200;
  padding: 0 2% 5% 2%;
}
.circle1inset{
  inset: 25% auto auto 5%;
}
/* END of About */

/* Social clowning */

.circle2{
  width: 14rem;
  height: 14rem;
}
.circle2 .circleBK{
  background-color: #fa4141;
}
.circle2child {
  width: 14rem;
  height: 14rem;
}
.circle2childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #fa4141;
  width: 14rem;
  height: 14rem;
  border-radius: 100%;
}
.circle2childContent .h1{
  width: 100%;
  line-height: 1;
  margin: 1% 0 4% 0;
  font-weight: 400;
  font-size: 1.5em;
}
.circle2childContent .img1{
  width: 40%;
}
.circle2childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle2childContent .p1{
  margin: 0 2% 0 2%;
  font-size: 0.7em;
  font-weight: 200;
  width: 40%;
}
.circle2childContent .img2{
  margin: 2% 4% 0 0;
  width: 55%;
}
.circle2childContent .img2 img{
  width: 100%;
  height: 100%;
}
.circle2childContent .img3{
  display: flex;
  align-self: start;
  width: 40%;
}
.circle2childContent .img3 img{
  width: 100%;
  height: 100%;
}
.circle2inset{
  inset: auto auto 50% 22.5%;
}

.circle6{
  width: 4rem;
  height: 4rem;
}
.circle6 .circleBK{
  background-color: #3c50ff;
}
.circle6child {
  width: 4rem;
  height: 4rem;
}
.circle6childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #3c50ff;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle6childContent .h1{
  width: 100%;
  margin: 1% 0 3% 0;
  font-size: 0.4em;
  font-weight: 200;
}
.circle6childContent .img1{
  width: 50%;
}
.circle6childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle6childContent .img2{
  position: absolute;
  inset: 47% auto auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100%;
  width: 17%;
  height: 17%;
}
.circle6childContent .img2 img{
  width: 80%;
}
.circle6childContent .p1{
  margin: 0 2% 0 2%;
  font-size: 0.21em;
  font-weight: 100;
  width: 35%;
}
.circle6childContent .projects{
display: flex;
flex-direction: column;
width: 100%;
line-height: 1.5;
}
.circle6childContent .projects h2{
  font-size: 0.3em;
  font-weight: 100;
  margin: 0 0 0 30%;
}
.circle6childContent .projects ul{
  font-size: 0.25em;
  font-weight: 100;
  margin: 0 0 0 35%;
}
.circle6childContent .projects ul li{
 line-height: normal;
}
.circle6inset{
  inset: 3% 0 auto auto;
}

.circle7{
  width: 4rem;
  height: 4rem;
}
.circle7 .circleBK{
  background-color: #fa4141;
}
.circle7child {
  width: 4rem;
  height: 4rem;
}
.circle7childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  background-color: #fa4141;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle7childContent .text{
display: flex;
flex-wrap: wrap;
width: 40%;
margin: 5% 0 0 0;
padding: 0 2% 0 2%;
}
.circle7childContent .text .h1{
  width: 100%;
  font-size: 0.4em;
  font-weight: 200;
  text-align: right;
  margin-bottom: 5%;
}
.circle7childContent .text .p1{
  font-size: 0.21em;
  font-weight: 100;
  text-align: right;
}
.circle7childContent .img1{
  margin: 9% -5% auto 0;
  width: 45%;
}
.circle7childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle7childContent .img2{
  position: absolute;
  inset: 15% 0 auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100%;
  width: 20%;
  height: 20%;
}
.circle7childContent .img2 img{
  width: 80%;
}

.circle7inset{
  inset: 36% -5% auto auto;
}

.circle8{
  width: 4rem;
  height: 4rem;
}
.circle8 .circleBK{
  background-color: #ffd20f;
}
.circle8child {
  width: 4rem;
  height: 4rem;
}
.circle8childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #ffd20f;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle8childContent .h1{
  width: 100%;
  margin: 1% 0 3% 0;
  font-size: 0.4em;
  font-weight: 200;
}
.circle8childContent .text{
  width: 45%;
}
.circle8childContent .text .p1{
  margin: 5% 3% 2% 4%;
  text-align: right;
  font-size: 0.21em;
  font-weight: 100;
}
.circle8childContent .img1{
  margin: 5% -2% auto 0;
  width: 50%;
}
.circle8childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle8childContent .img2{
  position: absolute;
  inset: 45% -5% auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100%;
  width: 17%;
  height: 17%;
}
.circle8childContent .img2 img{
  width: 80%;
}

.circle8childContent .projects{
display: flex;
flex-direction: column;
width: 100%;
line-height: 1.5;
}
.circle8childContent .projects h2{
  font-size: 0.25em;
  font-weight: 100;
  margin: 0 0 0 35%;
}
.circle8childContent .projects ul{
  font-size: 0.21em;
  font-weight: 100;
  margin: 0 0 0 40%;
}
.circle8childContent .projects ul li{
 line-height: normal;
}
.circle8inset{
  inset: auto 0 31% auto;
}

.circle9{
  font-size: 0.3em;
  width: 1.14rem;
  height: 1.14rem;
}
.circle9 .circleBK{
  background-color: #fa4141;
}
.circle9child {
  width: 1.14rem;
  height: 1.14rem;
}
.circle9childContent {
  background-color: #fa4141;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 100%;
}
.circle9childContent .img1{
  width: 80%;
}

.circle9childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle9inset{
  inset: 3% 0 auto auto;
}

.circle10{
  font-size: 0.3em;
  width: 1.14rem;
  height: 1.14rem;
}
.circle10 .circleBK{
  background-color: #ffd20f;
}
.circle10child {
  width: 1.14rem;
  height: 1.14rem;
}
.circle10childContent {
  background-color: #ffd20f;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 100%;
}
.circle10childContent .img1{
  width: 80%;
}
.circle10childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle10inset{
  inset: 36% -5% auto auto;
}

.circle11{
  font-size: 0.3em;
  width: 1.14rem;
  height: 1.14rem;
}
.circle11 .circleBK{
  background-color: #2d9146;
}
.circle11child {
  width: 1.14rem;
  height: 1.14rem;
}
.circle11childContent {
  background-color: #2d9146;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 100%;
}
.circle11childContent .img1{
  width: 80%;
}
.circle11childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle11inset{
  inset: auto 0 31% auto;
}

.circle12{
  font-size: 0.3em;
  width: 1.14rem;
  height: 1.14rem;
}
.circle12 .circleBK{
  background-color: #3c50ff;
}
.circle12child {
  width: 1.14rem;
  height: 1.14rem;
}
.circle12childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #3c50ff;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 100%;
}
.circle12childContent .h1{
  width: 100%;
  margin: 5% 0 2% 0;
  font-size: 0.1em;
  font-weight: 200;
}
.circle12childContent .p1{
  width: 65%;
  font-weight: 100;
  font-size: 0.06em;  
}
.circle12childContent .img1{
  display: flex;
  width: 45%;
  margin: 3% 1% auto -2%;
  }
.circle12childContent .img1 img{
  width: 100%;
}
.circle12childContent .img2{
  display: flex;
  width: 55%;
  margin: 4% -2% auto 0;
}
.circle12childContent .img2 img{
  width: 100%;
}
.circle12inset{
  inset: 3% 0 auto auto;
}

.circle13{
  font-size: 0.3em;
  width: 1.14rem;
  height: 1.14rem;
}
.circle13 .circleBK{
  background-color: #fa4141;
}
.circle13child {
  width: 1.14rem;
  height: 1.14rem;
}
.circle13childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #fa4141;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 100%;
}
.circle13childContent .h1{
  width: 100%;
  margin: 5% 0 2% 0;
  font-size: 0.11em;
  font-weight: 200;
}
.circle13childContent .p1{
  width: 65%;
  font-weight: 100;
  font-size: 0.06em;  
  margin: 0 0 0 5%;
}
.circle13childContent .img1{
  display: flex;
  width: 25%;
  margin: 0 -5% 0 0;
  }
.circle13childContent .img1 img{
  width: 100%;
}
.circle13childContent .img2{
  display: flex;
  width: 80%;
  margin: 2% auto -7% auto;
}
.circle13childContent .img2 img{
  width: 100%;
}
.circle13inset{
  inset: 36% -5% auto auto;
}
/* END Social clowning */

/* Movment Theatre */

.circle3{
  width: 13rem;
  height: 13rem;
}

.circle3 .circleBK{
  background-color: #fa4141;
}
.circle3child {
  width: 13rem;
  height: 13rem;
}
.circle3childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #fa4141;
  width: 13rem;
  height: 13rem;
  border-radius: 100%;
}
.circle3childContent .h1{
  width: 100%;
  line-height: 1;
  margin: 1% 0 4% 0;
  font-weight: 400;
  font-size: 1.3em;
}
.circle3childContent .img1{
  margin: 0 0 auto -8%;
  width: 55%;
}
.circle3childContent .img1 img{
  width: 100%;
  height: 100%;
}

.circle3childContent .p1{
  margin: 0 2% 0 2%;
  font-size: 0.6em;
  font-weight: 100;
  width: 35%;
}
.circle3childContent .projects{
  display: flex;
  flex-direction: column;
  width: 100%;
  line-height: 1.5;
}
.circle3childContent .projects h2{
  font-size: 0.8em;
  font-weight: 100;
  margin: 0 0 0 25%;
}
.circle3childContent .projects ul{
  font-size: 0.6em;
  font-weight: 100;
  margin: 0 0 0 30%;
}
.circle3childContent .projects ul li{
 line-height: normal;
}
.circle3inset{
  inset: auto auto 30% 45%;
}

.circle14{
  width: 4rem;
  height: 4rem;
}
.circle14 .circleBK{
  background-color: #3c50ff;
}
.circle14child {
  width: 4rem;
  height: 4rem;
}
.circle14childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #3c50ff;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle14childContent .h1{
  width: 100%;
  line-height: 1;
  margin: 1% 0 7% 0;
  font-weight: 400;
  font-size: 0.5em;
}
.circle14childContent .img1{
  margin: 0 0 auto -2%;
  width: 60%;
}
.circle14childContent .img1 img{
  width: 100%;
  height: 100%;
}

.circle14childContent .p1{
  margin: 0 2% 0 2%;
  font-size: 0.21em;
  font-weight: 100;
  width: 35%;
}
.circle14inset{
  inset: 0.5% 0 auto auto;
}

.circle15{
  width: 4rem;
  height: 4rem;
}
.circle15 .circleBK{
  background-color: #ffd20f;
}
.circle15child {
  width: 4rem;
  height: 4rem;
}
.circle15childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #ffd20f;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle15childContent .h1{
  width: 100%;
  line-height: 1;
  margin: 0 0 5% 0;
  font-weight: 400;
  font-size: 0.5em;
}
.circle15childContent .img1{
  margin: 0 -5% auto 0;
  width: 57%;
}
.circle15childContent .img1 img{
  width: 100%;
  height: 100%;
}

.circle15childContent .p1{
  margin: 0 2% auto 2%;
  font-size: 0.21em;
  font-weight: 100;
  text-align: right;
  width: 35%;
}
.circle15inset{
  inset: 36% -5% auto auto;
}

/* END of Movment Theatre */

/* Teaching and Directing */
.circle4{
  font-size: 1.8rem;
  width: 14rem;
  height: 14rem;
}
.circle4 .circleBK{
  background-color: #fa4141;
}
.circle4child {
  width: 14rem;
  height: 14rem;
}
.circle4childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #fa4141;
  width: 14rem;
  height: 14rem;
  border-radius: 100%;
}
.circle4childContent .h1{
  width: 100%;
  line-height: 1;
  margin: 5% 0 4% 0;
  font-weight: 400;
  font-size: 1.5em;
}
.circle4childContent .img1{
  margin: 0 0 auto -2%;
  width: 55%;
}
.circle4childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle4childContent .projects{
  display: flex;
  flex-direction: column;
  width: 45%;
  line-height: 1.5;
}
.circle4childContent .projects h2{
  font-size: 0.8em;
  font-weight: 100;
  margin: 0 0 0 4%;
}
.circle4childContent .projects ul{
  font-size: 0.6em;
  font-weight: 100;
  margin: 0 0 0 12%;
}
.circle4childContent .projects ul li{
 line-height: normal;
}
.circle4childContent .img2{
  margin: 1% 0 0 auto;
  width: 55%;
}
.circle4childContent .img2 img{
  width: 100%;
  height: 100%;
}
.circle4inset{
  inset: auto 35% 50% auto;
}

.circle16{
  width: 4rem;
  height: 4rem;
}
.circle16 .circleBK{
  background-color: #3c50ff;
}
.circle16child {
  width: 4rem;
  height: 4rem;
}
.circle16childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #3c50ff;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle16childContent .h1{
  width: 100%;
  font-size: 0.4em;
  font-weight: 200;
  margin-bottom: 5%;
}
.circle16childContent .img1{
  margin: 0 0 auto 0;
  width: 45%;
}
.circle16childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle16childContent .text{
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 0 auto 0 2%;
}
.circle16childContent .text .p1{
  font-size: 0.21em;
  font-weight: 100;
  margin-right: 10%;
}
.circle16childContent .text .img2{
  width: 80%;
}
.circle16childContent .text .img2 img{
  background-color: #fff;
  padding: 5%;
  width: 100%;
}
.circle16inset{
  inset: 0.5% 0 auto auto;
}

.circle17{
  width: 4rem;
  height: 4rem;
}
.circle17 .circleBK{
  background-color: #ffd20f;
}
.circle17child {
  width: 4rem;
  height: 4rem;
}
.circle17childContent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #ffd20f;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}
.circle17childContent .h1{
  width: 100%;
  font-size: 0.4em;
  font-weight: 200;
  margin-bottom: 5%;
}
.circle17childContent .img1{
  margin: 0 -2% auto 0;
  width: 45%;
}
.circle17childContent .img1 img{
  width: 100%;
  height: 100%;
}
.circle17childContent .text{
  display: flex;
  flex-direction: column;
  width: 45%;
  margin: 0 1% 0 5%;
}
.circle17childContent .highlights{
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 0 0 auto;
}
.circle17childContent .highlights ul{
  font-size: 0.2em;
  font-weight: 100;
}
.circle17childContent .highlights ul li{
 line-height: normal;
}
.circle17childContent .text .img2{
  width: 80%;
  margin: 4% -50% 0 auto;
}
.circle17childContent .text .img2 img{
  background-color: #fff;
  padding: 5%;
  width: 100%;
}
.circle17inset{
  inset: 36% -5% auto auto;
}
/* END of Teaching and Directing */

/* TimeLine */

.circle5{
  font-size: 2.2rem;
  width: 15rem;
  height: 15rem;
}
.circle5 .circleBK{
  background-color: #fa4141;
}
.circle5child {
  width: 15rem;
  height: 15rem;
}
.circle5childContent {
  background-color: #fa4141;
  width: 15rem;
  height: 15rem;
  border-radius: 100%;
}
.circle5childContent .h1{
  width: 100%;
  font-size: 3em;
  font-weight: 200;
  margin-bottom: 5%;
}
.circle5inset{
  inset: 25% 17% auto auto;
}

/* END TimeLine */

/* MOBILE */
@media (orientation: portrait){
  :root {
    font-size: clamp(8px,2.1vw,18px);
  }
  .background{
    height: 110vh;
    width: 110vw;
  }
  .nav{
    justify-content: space-between;
  }
  .popupChildV{
  width: 100%;
}
.popupChild1{
  width: 90%;
}
.popupChild1 h2{
  font-size: 3rem;
}
.close-dialog{
  width: 3rem;
  height: 3rem;
}
.socialicon{
  width: 7rem;
  height: 7rem;
}

#textpopup {
  position: fixed;
  text-wrap: nowrap;
  top: 0.5rem;
  left: 50%;
  right:initial;
  transform: translate(-50%, 0);
  color: #fff;
  font-size: 1.9rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* About*/

.circle1inset{
  inset: 10% auto auto 5%;
}
/* END of About */

/* Social clowning */

.circle2inset{
  inset: auto auto 35% 5%;
}

.circle6inset{
  inset: -30% auto auto 0;
}

.circle7inset{
  inset: -35% auto auto 35%;
}

.circle8inset{
  inset: -30% 27% auto auto;
}

.circle9inset{
  inset: -30% auto auto 0;
}

.circle10inset{
  inset: -35% auto auto 35%;
}

.circle11inset{
  inset: -30% 27% auto auto;
}

.circle12inset{
  inset: -30% auto auto 0;
}

.circle13inset{
  inset: -35% auto auto 35%;
}
/* END Social clowning */

/* Movment Theatre */

.circle3inset{
  inset: auto auto 22% 35%;
}

.circle14inset{
  inset: -30% auto auto 0;
}

.circle15inset{
  inset: -35% auto auto 35%;
}

/* END of Movment Theatre */

/* Teaching and Directing */

.circle4inset{
  inset: auto 37% 35% auto;
}

.circle16inset{
  inset: -30% auto auto 0;
}

.circle17inset{
  inset: -35% auto auto 35%;
}
/* END of Teaching and Directing */

/* TimeLine */

.circle5inset{
  inset: 10% 37% auto auto;
}

/* END TimeLine */
}

/* Tablet */

@media (orientation: portrait){
  :root {
    font-size: clamp(8px,2.1vw,18px);
  }
  .background{
    height: 110vh;
    width: 110vw;
  }
/* About*/

.circle1inset{
  inset: 10% auto auto 5%;
}
/* END of About */

/* Social clowning */

.circle2inset{
  inset: auto auto 35% 5%;
}

.circle6inset{
  inset: -30% auto auto 0;
}

.circle7inset{
  inset: -35% auto auto 35%;
}

.circle8inset{
  inset: -30% 27% auto auto;
}

.circle9inset{
  inset: -30% auto auto 0;
}

.circle10inset{
  inset: -35% auto auto 35%;
}

.circle11inset{
  inset: -30% 27% auto auto;
}

.circle12inset{
  inset: -30% auto auto 0;
}

.circle13inset{
  inset: -35% auto auto 35%;
}
/* END Social clowning */

/* Movment Theatre */

.circle3inset{
  inset: auto auto 22% 35%;
}

.circle14inset{
  inset: -30% auto auto 0;
}

.circle15inset{
  inset: -35% auto auto 35%;
}

/* END of Movment Theatre */

/* Teaching and Directing */

.circle4inset{
  inset: auto 37% 35% auto;
}

.circle16inset{
  inset: -30% auto auto 0;
}

.circle17inset{
  inset: -35% auto auto 35%;
}
/* END of Teaching and Directing */

/* TimeLine */

.circle5inset{
  inset: 10% 37% auto auto;
}

/* END TimeLine */
}