:root{
  --button-color: #dc32b9;
  --button-color-hover: #ab248f;
  --floating-distance: -25%;
}

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Solpera;
  src: url('fonts/Solpera.otf');
}

body{
  overflow: hidden;
}

.clear{
  display: block;
  clear: both;
}

.float{
  float:left;
}

body {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(30,17,71,1) 4%, rgba(14,19,163,1) 100%);
}

#background {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

#background > div {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  background-repeat: no-repeat;
}

#school-bg {
  background: url("img/school-bg.png");
}

#family-bg {
  background: url("img/family-bg.png");
}

.luminosity-overlay {
  opacity: 0.25;
  mix-blend-mode: luminosity;
}

#logo{
  position: absolute;
}

#logo-circle{
  position: absolute;
  width: 100%;
  height: 100%;
}

#logo-outer-circle{
  position: absolute;
  background-color: #dc32b9;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

#logo-inner-circle{
  position: absolute;
  background: radial-gradient(#141283, #191264);
  width: 94%;
  height: 94%;
  border-radius: 50%;
  right: 0;
  top: 50%;
  transform: translateY(-49%);
}

#NC-logo{
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

.nav-main > div{
  text-align: center;
  width: 50%;
  float: left;
}

.nav-main a{
  font-family: Arial;
  line-height: 1.125;
  display: block;
  color: white;
  text-decoration: none;
  width: 85%;
  margin: 0 auto;
  background-color: var(--button-color);
  border-radius: 100px;
  transition: background-color 0.3s ease-in-out;
}

.nav-main a:hover{
  background-color: var(--button-color-hover);
  transition: background-color 0.25s ease-in-out;
}

#lang-change{
  position: absolute;
  right: 0;
  top: 0;
  font-family: Arial;
  padding: 1em;
}

#lang-change a{
  background: none;
  border: none;
  text-decoration: none;
  color: white;
  font-family: Arial;
  font-size: 3.5vh;
  cursor: pointer;
  transition: color 0.5s ease-in-out;
}

#lang-change a:hover{
  color: var(--button-color);
  transition: color 0.1s ease-in-out;
}

@keyframes floating{
  from {transform: translateY(0);}
  to {transform: translateY(var(--floating-distance));}
}

@keyframes slide-top{
  from{top: -60%;}
  to{top: 0;}
}

@keyframes slide-bottom{
  from{bottom: -65%;}
  to{bottom: 0;}
}

#bubbles-mobile{
  position: absolute;
  display: none;
  height: 40vh;
  width: 80vh;
  overflow: hidden;
}

#bubbles{
  display: none;
  position: absolute;
  overflow: hidden;
  height: 50%;
  width: 160vh;
}

.bubble-wrapper{
  position: absolute;
}

.pink{
  background-color: var(--button-color);
}

.aqua{
  background-color: #06948F;
}

.cyan{
  background-color: #19CFC7;
}

.red{
  background-color: #FF5D39;
}

.yellow{
  background-color: #FCC154;
}

.misc1{
  background-image: url("img/misc1.jpg");
}

.misc2{
  background-image: url("img/misc2.jpg");
}

.misc3{
  background-image: url("img/misc3.jpg");
}

.misc4{
  background-image: url("img/misc4.jpg");
}

.misc5{
  background-image: url("img/misc5.jpg");
}

.misc6{
  background-image: url("img/misc6.jpg");
}

.bubble{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: screen;
  animation-name: floating;
  animation-duration: inherit;
  animation-delay: 2.8s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@media screen and (max-aspect-ratio: 4/5) and (max-device-width: 1081px){
  #school-bg {
    background: url("img/school-bg-mobile.png");
  }

  #family-bg {
    background: url("img/family-bg-mobile.png");
  }
}


@media screen and (max-aspect-ratio: 4/5){
  #background > div{
      background-size: auto 60%;
      background-position-y: 80%;
  }

  #logo{
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vw;
    overflow: hidden;
  }

  #logo-circle{
    width: 102%;
    height: 102%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(55vw);
  }

  #school-bg {
    background-position-x: right;
  }

  #family-bg{
    background-position-x: left;
  }

  #NC-logo{
    display: block;
    width: 65vw;
    height: 65vw;
    bottom: -12%;
    left: 50%;
  }

  video.cs{
    transform: translateX(-37%);
  }

  video.en{
    transform: translateX(-48%);
  }

  #nav-desktop{
    display: none;
  }

  #nav-mobile{
    position: absolute;
    width: 100%;
    top: 55%;
  }

  #nav-mobile a{
    font-size: 3vh;
    line-height: 1.3;
  }

  #nav-mobile p{
    display: none;
  }

  #lang-change button{
    font-size: 2.5vh;
  }

  #fade{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(30,17,71,1) 4%, rgba(29,17,78,1) 11%, rgba(24,18,106,0) 40%, rgba(14,19,163,0) 100%);
  }

  #bubbles-mobile{
    display: block;
    animation-name: slide-top;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  #bubble1-m{
    width: 20vh;
    height: 20vh;
    top: 10%;
    left: 35%;
    animation-duration: 4s;
    --floating-distance: -8%;
  }
  
  #bubble2-m{
    width: 12vh;
    height: 12vh;
    top: 50%;
    left: 18%;
    animation-duration: 5s;
    --floating-distance: -40%;
  }
  
  #bubble3-m{
    width: 10vh;
    height: 10vh;
    top: 30%;
    left: 72%;
    animation-duration: 5.5s;
    --floating-distance: -30%;
  }
  
  #bubble4-m{
    width: 10vh;
    height: 10vh;
    top: 65%;
    left: 58%;
    animation-duration: 6.1s;
    animation-delay: 1s;
    --floating-distance: -55%;
  }
  
  #bubble5-m{
    width: 11vh;
    height: 11vh;
    top: 5%;
    left: 8%;
    animation-duration: 4.7s;
    --floating-distance: -50%;
  }
  
  #bubble6-m{
    width: 4vh;
    height: 4vh;
    top: 15%;
    left: 66%;
    animation-duration: 5.7s;
    --floating-distance: -85%;
  }
}

@media screen and (min-aspect-ratio: 4/5){
  #background > div{
      background-size: auto 120%;
      background-position-y: -40%;
  }

  #school-bg {
    background-position-x: calc(50% - 15vh);
  }

  #family-bg{
    background-position-x: calc(50% + 15vh);
  }

  #fade{
    display: none;
  }

  #logo{
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    width: 74vh;
    height: 74vh;
    overflow: hidden;
  }

  #NC-logo{
    display: block;
    width: 55vh;
    height: 55vh;
    top: -7%;
    left: 50%;
  }

  video.cs{
    transform: translateX(-38%);
  }

  video.en{
    transform: translateX(-49%);
  }

  #nav-mobile{
    display: none;
  }

  #nav-desktop{
    position: absolute;
    width: 50vh;
    left: 50%;
    transform: translateX(-48%);
    top: 58%;
  }

  #nav-desktop a{
    font-size: 3vh;
    line-height: 1.25;
    vertical-align: middle;
    padding: 1% 0;
  }

  .nav-school > a, .nav-school > p{
    margin-left: 0;
    margin-right: auto;
  }

  .nav-family > a, .nav-family > p{
    margin-right: 0;
    margin-left: auto;
  }

  #nav-desktop p{
    position: relative;
    margin-top: 3%;
    color: white;
    font-family: Arial;
    width: 85%;
    font-weight: 100;
    font-size: 1.75vh;
    text-align: center;
    line-height: 1.25;
  }

  #bubbles{
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-name: slide-bottom;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
  }

  #bubbles > div{
    display: block;
  }

  #bubble1{
    width: 22vh;
    height: 22vh;
    top: 30%;
    left: 13%;
    animation-duration: 4s;
    --floating-distance: -8%;
  }
  
  #bubble2{
    width: 14vh;
    height: 14vh;
    top: 72%;
    left: 5%;
    animation-duration: 5s;
    --floating-distance: -40%;
  }
  
  #bubble3{
    width: 12vh;
    height: 12vh;
    top: 50%;
    left: 30%;
    animation-duration: 5.5s;
    --floating-distance: -30%;
  }
  
  #bubble4 {
    width: 12vh;
    height: 12vh;
    top: 85%;
    left: 24%;
    animation-duration: 6.1s;
    animation-delay: 1s;
    --floating-distance: -55%;
  }
  
  #bubble5 {
    width: 13vh;
    height: 13vh;
    top: 30%;
    left: 1%;
    animation-duration: 4.7s;
    --floating-distance: -50%;
  }
  
  #bubble6 {
    width: 6vh;
    height: 6vh;
    top: 32%;
    left: 28%;
    animation-duration: 5.7s;
    --floating-distance: -85%;
  }

  #bubble7 {
    width: 15vh;
    height: 15vh;
    left: 40%;
    top: 67%;
    animation-duration: 6s;
    --floating-distance: -20%;
  }

  #bubble8 {
    width: 4vh;
    height: 4vh;
    left: 52%;
    top: 72%;
    animation-duration: 4s;
    --floating-distance: -120%;
  }

  #bubble9 {
    width: 18vh;
    height: 18vh;
    left: 55%;
    top: 85%;
    animation-duration: 6s;
    --floating-distance: -30%;
  }

  #bubble10 {
    width: 24vh;
    height: 24vh;
    left: 59%;
    top: 25%;
    animation-duration: 5.8s;
    --floating-distance: -30%;
  }

  #bubble11{
    width: 12vh;
    height: 12vh;
    left: 71%;
    top: 73%;
    animation-duration: 6.3s;
    --floating-distance: -35%;
  }

  #bubble12{
    width: 13vh;
    height: 13vh;
    left: 78%;
    top: 50%;
    animation-duration: 4.9s;
    --floating-distance: -60%;
  }

  #bubble13{
    width: 14vh;
    height: 14vh;
    left: 85%;
    top: 80%;
    animation-duration: 4.6s;
    --floating-distance: -15%;
  }

  #bubble14{
    width: 17vh;
    height: 17vh;
    right: 0%;
    top: 36%;
    animation-duration: 6.6s;
    --floating-distance: -50%;
  }

  #bubble15{
    width: 5vh;
    height: 5vh;
    left: 76%;
    top: 32%;
    animation-duration: 4.8s;
    --floating-distance: -170%;
  }
}

.cc_div .bar #s-inr {
  max-width: 41em !important; }

.cc-hl-cs {
  width: 6em; }

.cc-hl-en {
  width: 5.1em; }

@media screen and (max-width: 688px) {
  #s-ttl {
    display: none !important; } }

#s-c-bnc {
  vertical-align: top !important;
  padding-top: 0.5em !important; }

#s-c-bn, #s-c-bn:hover {
  background: unset !important;
  background-image: url("../assets/img/accordion-plus.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center;
  background-size: 100% !important;
  margin: 0 auto;
  transform: rotate(45deg);
  border-radius: 0 !important;
  top: 0.5em !important;
  height: 1em !important;
  width: 1em !important; }

#s-c-bn:before, #s-c-bn:after {
  content: unset !important; }

.cc_div .c-bn {
  background-color: #d532b9 !important;
  color: #FFFFFF !important;
  border-radius: 20px !important; }

#s-bns button:first-child {
  background: #d532b9 !important; }

#s-cnt button + button:hover {
  background: #d532b9 !important; }

#s-c-bn, #s-c-bn:hover {
  background-color: inherit !important;
  outline: 0; }

#cc_div #cm {
  display: none !important; }

#s-bns {
  position: relative !important;
  border-top: 0 !important;
  border-bottom: 1px solid #f1f3f5; }

#cookiesSettingsButton {
  position: fixed;
  right: auto;
  left: 0.25em;
  bottom: 0.25em;
  z-index: 1000;
  width: 4rem;
  height: 4rem;
  padding: 5px;
  font-size: 1.5em;
  outline: 0;
  border: 0;
  background: transparent;
  cursor: pointer; }

#cookiesSettingsButton img {
  width: 100%; }

#s-mds {
  padding: 1.3em 1.6em;
  display: block;
  width: 100%; }
  @media screen and (max-width: 688px) {
    #s-mds {
      padding-left: 0;
      padding-right: 0.8em; } }

#s-mds .p:first-child {
  margin-top: 0; }

#s-mds a {
  color: #d532b9; }

#s-cnt .b-bn .b-tl {
  background: #FFFFFF !important;
  border-radius: 0; }

#s-cnt .b-bn .b-tl:active, #s-cnt .b-bn .b-tl:hover {
  background: #0e13a3; }

#s-bl .c-bl.b-ex {
  background: transparent; }

#s-bl tbody tr:hover {
  background: inherit; }

#s-bl .b-acc .p {
  background-color: #FFFFFF; }

.cc_div .bar #s-bl tr:nth-child(even) {
  background: #FFFFFF; }

.cc_div .bar #s-bl tr:nth-child(odd) {
  background: #f7f7f7; }

.cc_div .b-bn .exp::before, .cc_div .act .b-bn .exp::before {
  border-color: #d532b9 !important; }

/* iframemanager */
@media screen and (min-width: 24rem) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 10px !important; } }

@media screen and (min-width: 36em) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 14px !important; } }

@media screen and (min-width: 48em) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 8px !important; } }

@media screen and (min-width: 64em) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 12px !important; } }

@media screen and (min-width: 85.375rem) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 17px !important; } }

@media screen and (min-width: 121rem) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 29px !important; } }

@media screen and (min-width: 140rem) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 35px !important; } }

@media screen and (min-width: 160rem) {
  div[data-service] .c-n-c .c-l-b::before {
    top: 42px !important; } }