/*FONTS*/
@font-face {
  font-family: "Graphik Regular";
  src: url(/wp-content/deepSea-assets/fonts/Graphik-Regular.woff2) format('woff2'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Regular.woff) format('woff'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Regular.otf) format('otf');
}
@font-face {
  font-family: "Graphik Medium";
  src: url(/wp-content/deepSea-assets/fonts/Graphik-Medium.woff2) format('woff2'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Medium.woff) format('woff'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Medium.otf) format('otf');
  font-weight: 500;
}
@font-face {
  font-family: "Graphik SemiBold";
  src: url(/wp-content/deepSea-assets/fonts/Graphik-Semibold.woff2) format('woff2'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Semibold.woff) format('woff'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Semibold.ttf) format('ttf');
}
@font-face {
  font-family: "Graphik Bold";
  src: url(/wp-content/deepSea-assets/fonts/Graphik-Bold.woff2) format('woff2'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Bold.woff) format('woff'),
  url(/wp-content/deepSea-assets/fonts/Graphik-Bold.ttf) format('ttf');
}
/*FONTS END*/
html, body {
  scrollbar-width: none;
}
html::-webkit-scrollbar,body::-webkit-scrollbar  {
  -webkit-appearance: none;
  width: 0;
}
body{
  height: 100vh;
  width: 100vw;
  font-family: "Graphik Medium",sans-serif;
  font-weight: 600;
  background-color: #F16647;
  font-size: 16px;
}
/* First Screen Achievements */
.containerAll{
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}
.containerInsideSub{
  width: 200vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.insideSubmarine{
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: inline-block;
  position: relative;
}
.movetoach.containerInsideSub{
  animation: translateFirst 1.5s forwards ease;
}
@keyframes translateFirst{
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(-100vw,0);
  }
}
.movetoach.movetoach2.containerInsideSub{
  width: 100vw;
  transform: translate(0,0);
  animation: none;
}
.movetoach2 .insideSubmarine{
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.containerFrameCharacter{
  position: relative;
  height: 83vh;
  height: 83dvh;
}
.containerFrame{
  position: relative;
  overflow: hidden;
  margin-top: 1vh;
  margin-top: 1dvh;

  border-radius: 2vw;
}
.frame{
  position: relative;
  border: 50px solid;
  border-image: url(/wp-content/deepSea-assets/images/border.svg);
  border-image-slice: 47;
  border-image-repeat: round;
}
.rockAch{
  position: relative;
  width: calc(100% + 100px);
  height: 70vh;
  height: 70dvh;
  display: block;
  margin-left: -50px;
  margin-top: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
  border-radius: 2vw;
  overflow: hidden;
}
.rockAch::before, .rockAch::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #002E86;
  border-radius: 2vw;
}
.rockAch::after{
  opacity: .5;
}
.rockSub{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1
}
.rockSub img{
  height: 70vh;
  height: 70dvh;
}
.fishermenSubmarine{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: -1;
  right: 0;
  justify-content: flex-end;
}
.fishermenSubmarine img{
  height: 15vh;
  height: 15dvh;
  margin-right: 85vh;
  margin-right: 85dvh;
  margin-top: 10vh;
  margin-top: 10dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.seaweedSub{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: flex-end;
  z-index: -1;
  justify-content: flex-end;
}
.seaweedSub img{
  height: 30vh;
  height: 30dvh;
  margin-left: 20vh;
  margin-left: 20dvh;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  transform-origin: center bottom;
  animation: seaweed 5s infinite alternate-reverse ease-in-out;
}
.seahorseSubmarine{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: center;
  transform-origin: center bottom;
  z-index: -1;
  justify-content: flex-end;
}
.seahorseSubmarine img{
  height: 10vh;
  height: 10dvh;
  display: block;
  margin-left: 50vh;
  margin-left: 50dvh;
  animation: seaMove 2s infinite alternate ease-in-out;
}
.fishSingleSub{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: flex-start;
  transform-origin: center bottom;
  z-index: -1;
  justify-content: flex-end;
}
.fishSingleSub img{
  height: 3vh;
  height: 3dvh;
  margin-top: 30vh;
  margin-top: 30dvh;
  display: block;
  margin-left: 20vh;
  margin-left: 20dvh;
  animation: fish 6s infinite ease-in-out;
}
.fishCoupleSub{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  bottom: 0;
  align-items: center;
  justify-content: flex-start;
  transform-origin: center bottom;
  z-index: -1;
  justify-content: flex-start;
}
.fishCoupleSub img{
  height: 3vh;
  height: 3dvh;
  display: block;
  margin-right: 20vh;
  margin-right: 20dvh;
  scale: -1 1;
  animation: fish 8s infinite reverse ease-in-out;
}
.mermaidsSub{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: flex-end;
  transform-origin: center bottom;
  z-index: -1;
  justify-content: flex-end;
}
.mermaidsSub img{
  height: 10vh;
  height: 10dvh;
  margin-left: 60vh;
  margin-left: 60dvh;
  margin-bottom: 5vh;
  margin-bottom: 5dvh;
  animation: seaMove 2s infinite alternate-reverse ease-in-out;
}
.seaweedSub2{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: flex-end;
  z-index: -1;
  justify-content: flex-end;
}
.seaweedSub2 img{
  height: 30vh;
  height: 30dvh;
  transform-origin: center bottom;
  margin-left: 50vh;
  margin-left: 50dvh;
  animation: seaweed 5s infinite alternate ease-in-out;
}
.bubblesSub{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  left: 0;
  bottom: 0;
  align-items: flex-end;
  justify-content: flex-start;
  transform-origin: center bottom;
  z-index: -1;
}
.bubblesSub img{
  height: 15vh;
  height: 15dvh;
  margin-right: 10vh;
  margin-right: 10dvh;
  animation: bubbles 8s infinite ease-out;
}
.textFrame{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: calc(20vw + 25vh);
  max-width: calc(20vw + 25dvh);
  flex-direction: column;
}
.textFrame h2{
  font-size: calc(1.5vw + 1.5vh);
  font-size: calc(1.5vw + 1.5dvh);
  line-height: 1.2em;
  font-family: "Graphik SemiBold",sans-serif;
  font-weight: 600;
  color: #CCD0DD;
  margin-bottom: 0;
  margin-top: 5vh;
  margin-top: 5dvh;
}
.textFrame button{
  font-family: "Graphik SemiBold",sans-serif;
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  border: none;
  background-color: #FF6B51;
  color: white;
  padding: 1em;
  line-height: 1;
  border-radius: 2vh;
  border-radius: 2dvh;
  margin-top: 1em;
  box-shadow: 0 0 10px black;
  animation: goButton .5s infinite alternate;
}
@keyframes goButton{
  0%{
    filter: brightness(1);
  }
  100%{
    filter: brightness(1.5);
  }
}
.bottomSub{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.bottomSub img{
  height: 30vh;
  height: 30dvh;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}
.character{
  position: absolute;
  left: 0;
  bottom: 0;
  margin-bottom: -2vh;
  margin-bottom: -2dvh;
  display: flex;
  justify-content: flex-end;
  scale:-1 1
}
.character img{
  height: 45vh;
  height: 45dvh;
}
.buttonAch, .buttonAch2{
  display: flex;
  gap: 1em;
  margin-top: .5em;
  position: relative;
  z-index: 2;
}
.buttonAch2{
  position: absolute;
  align-items: center;
  left: 0;
  margin-top: 0;
  gap: .5em;
}
.achTitle .buttonAch2{
  display: flex;
}
.sidebar > .buttonAch2{
  display: none;
} 
.buttonAch .exit, .buttonAch .exitMobile, .buttonAch .langSwitch, .buttonAch2 .viewPdf, .buttonAch2 .backAch{
  position: relative;
  display: inline-block;
  font-size: 1.2em;
  text-align: center;
  padding: .5em;
  text-decoration: none;
  color: white;
  background-color: #201F57;
  transform: translate(0, 0);
  box-shadow: .25em .25em 0 rgba(0,0,0,.2);
  filter: brightness(100%);
  transition: transform .2s, box-shadow .2s, filter .2s;
  border-radius: 1vh;
  border-radius: 1dvh;
  font-family: "Graphik Medium", sans-serif;
  font-weight: 500;
}
.buttonAch .exit{
  display: none;
}
.buttonAch .exitMobile{
  display: inline-block;
}
.buttonAch .langSwitch{
  background-color: white;
  color: #201F57;
}
.buttonAch2 .viewPdf{
  background-color: #D5D5D5;
  color: black;
}
.buttonAch2 .backAch{
  background-color: #F9DA49;
  color: #002E86;
}
.buttonAch a:hover, .buttonAch2 a:hover{
  transform: translate(.25em, .25em);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  filter: brightness(120%);
}
@keyframes fish{
  0%{
    transform: translate(0,0) scaleX(1);
  }
  50%{
    transform: translate(30vw,0) scaleX(1);
  }
  51%{
    transform: translate(30vw,0) scaleX(-1);
  }
  99%{
    transform: translate(0,0) scaleX(-1);
  }
  100%{
    transform: translate(0,0) scaleX(1);
  }
}
@keyframes seaMove{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-1.5vh);
    transform: translateY(-1.5dvh);
  }
}
@keyframes seaweed{
  0%{
    transform: rotate(-5deg) skew(-10deg);
  }
  100%{
    transform: rotate(5deg) skew(10deg);
  }
}
@keyframes bubbles{
  0%{
    transform: translate(0,30vh);
    transform: translate(0,30dvh);
    opacity: 1;
  }
  50%{
    opacity: .8;
  }
  80%{
    transform: translate(0,-50vh);
    transform: translate(0,-50dvh);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 0;
  }
}
.sidebarSub{
  width: 100%;
  padding-top: 2vh;
  padding-top: 2dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.sidebarSub > div:first-child{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.sidebarSub > div:nth-child(2){
  display: none;
}
.logoSub img{
  height: 15vh;
  height: 15dvh;
}
.radars{
  display: grid;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 100%;
  grid-template-columns: 42% 5% 42%;
  max-height: 15vh;
  max-height: 15dvh;
}
.radar1,.radar2{
  position: relative;
  margin: auto;
}
.radar1 img,.radar2 img{
  max-width: 100%;
  max-height: 15vh;
  max-height: 15dvh;
}
.radarLight{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1vh;
  width: 1dvh;
  height: 1vh;
  height: 1dvh;
  background-color: white;
  border-radius: 50%;
  margin: auto;
  transform: translate(2vh,-2vh);
  transform: translate(2dvh,-2dvh);
  animation: radarLight .5s infinite alternate;
}
.radarBar{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  margin: auto;
  height: 60%;
  width: 2px;
  transform-origin: center;
  animation: rotate 4s infinite linear;
  opacity: .2;
}
.light1{
  display: block;
  margin-top: 0;
  min-width: 2vh;
  min-width: 2dvh;
  min-height: 2vh;
  min-height: 2dvh;
  background-color: green;
  border-radius: 50%;
  animation: light .3s infinite;
}
.radar1 .radarLight{
  transform: translate(2vh,-2vh);
  transform: translate(2dvh,-2dvh);
  animation: radarLight 1s infinite alternate-reverse;
}
.measures{
  position: relative;
  min-width: 80%;
  margin-top: 1em;
  margin-bottom: 2em;
  background-color: #D6D5D4;
  padding: 1em 0;
  border-radius: 10px;
}
.measContainer{
  display: grid;
  justify-content: space-around;
  align-items: flex-start;
  grid-template-columns: 25% 25% 25%;
}
.firstTerm,.secondTerm,.thirdTerm{
  position: relative;
  text-align: center;
}
.firstTerm img,.secondTerm img, .thirdTerm img{
  max-width: 100%;
}
.firstTerm .slice, .secondTerm .slice, .thirdTerm .slice{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.thirdTerm .slice{
  justify-content: flex-start;
  align-items: center;
}
.firstTerm .slice img, .secondTerm .slice img{
  height: 40%;
  margin-top: 15%;
  transform-origin: center bottom;
  animation: meas 2s infinite alternate ease;
}
.secondTerm .slice img{
  animation: meas 1s infinite alternate-reverse ease;
}
.thirdTerm .slice img{
  max-width: 30%;
  margin-right: .5vw;
  animation: meas2 2s infinite alternate ease;
}
.numbersMeas{
  position: absolute;
  color: #EDF1F1;
  font-size: 2vw;
  bottom: 0;
  margin-bottom: 0;
  margin-right: 1vw;
  line-height: 1em;
}
@keyframes meas{
  0%{
    rotate: 0deg;
  }
  50%{
    rotate: -30deg;
  }
  100%{
    rotate: 30deg;
  }
}
@keyframes meas2{
  0%{
    transform: translate(0,-5vh);
    transform: translate(0,-5dvh);
  }
  50%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(0,5vh);
    transform: translate(0,5dvh);
  }
}
.knobs img{
  max-width: 100%;
}
@keyframes radarLight{
  0%{
    opacity: .5;
    filter: drop-shadow(0 0 0 white);
  }
  100%{
    opacity: 0;
    filter: drop-shadow(0 0 5px white);
  }
}
@keyframes light{
  0%{
    filter: drop-shadow(0 0 0 green) brightness(1);
  }
  100%{
    filter: drop-shadow(0 0 5px green) brightness(5);
  }
}
@keyframes rotate{
  0%{
    rotate: 0deg;
  }
  100%{
    rotate: 360deg;
  }
}
.achievements{
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: inline-block;
}
.containerBoth{
  height: 100vh;
  height: 100dvh;
}
.sb{
  display: flex;
}
.sidebar{
  position: relative;
  font-size: .7em;
  width: 100%;
}
.displayedAch{
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  line-height: 1.2em;
  padding: .25em;
  margin-top: .5em;
  margin-bottom: 0;
  border-top: 2px solid #D5D4D4;
  border-bottom: 2px solid #D5D4D4;
}
.displayedAch span{
  display: none;
}
.achTitle{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .5em;
  margin-top: 1vh;
  margin-top: 1dvh;
}
.achTitle h1{
  line-height: 1em;
  color: white;
  margin-bottom: 0;
  padding-left: 5px;
  text-align: right;
  font-size: calc(1.2vw + 1.2vh);
  font-size: calc(1.2vw + 1.2dvh);
}
.achTitle img{
  height: calc(40px + 1vh);
  height: calc(40px + 1dvh);
  filter: brightness(100);
}
#filters_container{
  position: relative;
  width: 100%;
  margin-bottom: .2em;
}
#filters_container h2{
  display: inline-block;
  color: white;
  font-size: calc(.85vw + 1vh);
  font-size: calc(.85vw + 1dvh);
  margin-top: 5px;
  margin-bottom: 5px;
}
.ach{
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ach_container{
  position: relative;
  padding:0 20px 0 15px;
  overflow: auto;
  background-color: #A3B9C3;
  border-radius: 2vw;
  border: 5px solid #A3B9C3;
  z-index: 1;
  height: 100%;
  touch-action: pan-y;
}
.ach_container::-webkit-scrollbar {
  width: 15px;
  height: 0;
  touch-action: pan-y;
}
.ach_container::-webkit-scrollbar-thumb {
  height: 2em;
  border: 0 solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-border-radius: 2vw;
  background-color: #417184;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
  cursor: pointer;
}
.ach_container::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
.ach_container::-webkit-scrollbar-corner {
  background-color: transparent;
}
@-moz-document url-prefix() {
  .ach_container{
    scrollbar-width:25px;
    scrollbar-color: #417184 transparent;
  }
}
.ach_container::before, .ach_container::after{
  content: "";
  position: sticky;
  background-color: #A3B9C3;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 15px;
  width: 100%;
  display: block;
  z-index: 1;
}
.ach_container::before{
  top:0;
  bottom: unset;
}
.ach_int_cont{
  display: none;
  background-color: white;
  border-radius: 2vw;
  padding:20px;
  min-height: calc(100% - 30px);
}
.ach_int_cont.showAch{
  display: block;
}
.filterDiv {
  display: none;
}
.ach_container .show {
  display: block;
}
/* DROPDOWN START */
.dropdown {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; 
  gap: .5em;
  margin-bottom:.25em
}
.dropbtn {
  position: relative;
  display: block;
  background-color: transparent;
  color: #2F6293;
  padding: .5em;
  font-size: calc(1.5vw + 1.5vh);
  font-size: calc(1.5vw + 1.5dvh);
  text-align: right;
  line-height: 1;
  border: none;
  cursor: pointer;
  border-radius: 1vh;
  border-radius: 1dvh;
  width: 100%;
  background-color: white;
  z-index: 0;
}
.dropbtn::before, .dropbtn::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  height: 50%;
  background-image: url(/wp-content/deepSea-assets/images/checkbox_empty.svg);
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: auto 80%;
}
.dropbtn::after{
  background-position: left 8px bottom 3px;
  display: block;
}
#prgBtn.dropbtn::after{
  background-image: url(/wp-content/deepSea-assets/images/checkbox_programs.svg);
}
.accordionSearchContainer button{
  display: block;
}
.dropbtnclicked{
  z-index: 10;
}
a.clearFilterSide{
  display: none;
  cursor: pointer;
  color: white;
  text-decoration: none;
  font-size: calc(.85vw + 1vh);
  font-size: calc(.85vw + 1dvh);
  padding-top: 3px;
}
.dropdown-content {
  display: block;
  position: relative;
  background-color: white;
  border-radius: 2vw;
  padding: 20px;
  width: 100%;
  min-height: calc(100% - 30px);
  overflow-y: auto;
  z-index: 1;
}
.btn{
  font-family: "Graphik Medium", sans-serif;
  font-weight: 500;
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  color: #1A1A1A;
  border: none;
  outline: none;
  padding: 2vh 1vh;
  padding: 2dvh 1dvh;
  line-height: 1em;
  background-image: none;
  padding-right: 0;
  background-color: white;
  background-position: left 15px center;
  background-repeat: no-repeat;
  background-size: auto 3vh;
  background-size: auto 3dvh;
  cursor: pointer;
  text-align: right;
  display: block;
  width: 100%;
  border-top: 1px solid #CCCCCC!important;
  border-radius: 0;
  outline: none;
  transition: background-position  .2s ease-out;
}
.btn:hover {
  background-position: left 5px center;
}
.btn.active {
  background-color: #CCCCCC;
  outline: none;
}
.dropdown-content .btn:last-child{
  border-bottom: 1px solid #CCCCCC;
}
.allDark{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.visibleDark .allDark{
  display: block;
}
.viewingAchFilter{
  position: relative;
  display: none;
  align-items: center;
  padding: 0 0 20px;
}
.viewingAchFilter.showTitleFilterActive{
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
  line-height: 1em;
}
.containerTitleFilterAch{
  display: block;
  width: 100%;
  border-bottom: 3px dotted #CCCCCC;
  margin-bottom: .25em;
  padding-bottom: .25em;
}
.containerTitleFilterAch p{
  display: block;
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  margin-right: .25em;
  margin-bottom: 0;
  line-height: 1.2em;
}
.containerTitleFilterAch span,.containerTitleFilterAch h3{
  margin-bottom: 0;
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  line-height: 1.2em;
}
.containerTitleFilterAch > span{
  position: relative;
  margin-right: .25em;
  float:right
}
.viewProgram{
  display: inline-block;
  color: #2F6293;
}
.containerTitleFilterAch h3, #achievementCounter{
  color: #2F6293;
}
.buttonFilterActive{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .25em 0 0;
}
.dropbtn.back{
  padding: 0;
  margin: 0;
  font-size: calc(1vw + 1vh);
  font-size: calc(1vw + 1dvh);
  width: auto;
  white-space: nowrap;
}
.back::before,.back::after {
  display: none;
}
.dropDownTitle{
  font-size: .85em;
}
.dropdown-content.hide {
  display: none;
}
.headingAchContent{
  display: flex;
  justify-content: space-between;
  padding: 0 0 2vh;
  padding: 0 0 2dvh;
}
.headingAchContent p{
  margin-bottom: 0;
  font-size: calc(1.2vw + 1vh);
  font-size: calc(1.2vw + 1dvh);
  line-height: 1.2em;
  width: 100%;
}
.headingAchContent p span{
  color: #2F6293;
  display: block;
}
.closeAch{
  cursor: pointer;
  position: relative;
  padding-left: .5em;
  font-size: calc(1vw + 1vh);
  font-size: calc(1vw + 1dvh);
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #CCCCCC;
}

/* DROPDOWN END */

/* ACCORDION START */
.accordion {
  font-family: "Graphik Medium", sans-serif;
  font-weight: 500;
  position: relative;
  width: 100%;
  background-color: #2F6293;
  color: white;
  font-size: max(1.2vw + 1.2vh);
  font-size: max(1.2vw + 1.2dvh);
  line-height: 1.2;
  cursor: pointer;
  padding: 3vh;
  padding-left: 6vw;
  text-align: right;
  border: none;
  outline: none;
  border-radius: 1vw;
  margin-top:10px;
}
.accordion.accordionActive{
  border-radius: 1vw 1vw 0 0;
}
.accordion::after, .accordion.accordionActive::after{
  content:'';
  background-image: url(/wp-content/deepSea-assets/images/accOpenButton.png);
  position: absolute;
  left:0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 3vw;
  height: 100%;
  width: 2vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.accordion.accordionActive::after{
  background-image: url(/wp-content/deepSea-assets/images/accCloseButton.png);
}
.panel {
  position: relative;
  color: #2F6293;
  margin-top: 0;
  padding: 3vw;
  background-color: #E6E6E6;
  display: none;
  border-radius: 0 0 1vw 1vw;
}
.panel p{
  font-size: calc(1vw + 1.2vh);
  font-size: calc(1vw + 1.2dvh);
  line-height: 1.2;
  margin: 0;
  font-family: "Graphik Regular", sans-serif;
  font-weight: 400;
  color: #2F6293;
}
@media (max-width:350px) and (orientation:portrait){
  .dropbtn{
    font-size: 1.2em;
  }
}
@media (min-width: 400px) {
  .dropbtn{
    padding-right: 30px;
    text-align: right;
  }
  .AllAchievements, .ProgramAchievements, .SectionAchievements, .SectorAchievements, .filterActiveCont p{
    font-size: calc(.85em + 1vw);
  }
}
@media (max-width:767px) and (orientation:portrait){
  .ach{
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
  }
}
@media (min-width: 576px) {
  body{
    font-size: 16px;
  }
  .achTitle img{
    height: 50px;
  }
  .achTitle h1{
    display: block;
    margin-top: 0;
  }
  .btn{
    font-size: calc(.85vw + 1vh);
    font-size: calc(.85vw + 1dvh);
    line-height: 1.2em;
    background-image: url(/wp-content/deepSea-assets/ar/images/arrowRightFilter.png);
    padding-left: 40px;
  }
  .sidebar{
    height: unset;
    font-size: 1em;
  }
  .ach{
    max-height: 100vh;
    max-height: 100dvh;
  }
  .ach_container{
    border-radius: 1vw;
    margin-top: 1.5vh;
    margin-top: 1.5dvh;
    margin-bottom: 1.5vh;
    margin-bottom: 1.5dvh;
  }
  .ach_container::-webkit-scrollbar {
    width: 25px;
  }
  .displayedAch{
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    font-size: calc(1.2vw + 1vh);
    font-size: calc(1.2vw + 1dvh);
  }
  .displayedAch span{
    display: inline-block;
  }
  .viewingAchFilter{
    padding: 0 0 25px;
  }
  .viewingAchFilter.showTitleFilterActive{
    flex-direction: row;
  }
  .ach_int_cont{
    padding:25px;
  }
  .achTitle{
    margin-top: 1.5vh;
    margin-top: 1.5dvh;
    margin-left: .5em;
  }
  .achTitle img{
    height: calc(50px + 5vh);
    height: calc(50px + 5dvh);
  }
  .dropdown {
    display: block;
    margin-bottom: 0;
  }
  .dropbtn {
    display: block;
    width: 100%;
    margin-top: .5em;
    padding: 2vh;
    padding: 2dvh;
    font-size: calc(1.2vw + 1vh);
    font-size: calc(1.2vw + 1dvh);
  }
  .filterActiveCont p{
    font-size: calc(1em + .5vw);
  }
  .filterActiveCont{
    padding: 1vh 2vh;
    padding: 1dvh 2dvh;
    margin-bottom: 1em;
  }
  .AllAchievements{
    display: block;
  }
  #filters_container h2{
    margin-top: 0;
    padding-left: .5em;
  }
  a.clearFilterSide{
    padding-left: .5em;
    padding-top: .5em;
  }
  .viewingAchFilter .showallbtn{
    padding-left: .5em;
    padding-left: .5em;
  }
  .panel p{
    font-size: calc(.85vw + 1vh);;
    font-size: calc(.85vw + 1dvh);;
  }
  .containerTitleFilterAch{
    display: block;
    width: 100%;
    border-left: 3px dotted #CCCCCC;
    padding-right: .5em;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .buttonFilterActive{
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    padding: 0;
  }
  .dropbtn.back{
    padding-left: .5em;
    padding-right: .5em;
    margin-bottom: .25em;
  }
  .dropbtn::before, .dropbtn::after{
    background-position: left 15px center;
  }
  .dropbtn::after{
    background-position: left 15px bottom 3px;
  }
  .dropdown-content {
    border-radius: 1vw;
    padding: 25px;
    min-height: calc(100% - 40px);
  }
  .buttonAch2{
    bottom: 0;
    margin-bottom: calc(1.5dvh + 0.25em);
    right: 0;
    gap: 1em;
  }
  .achTitle .buttonAch2{
    display: none;
  }
  .sidebar > .buttonAch2{
    display: flex;
  }
}
@media (min-width: 768px) {
  body{
    font-size: 18px;
  }
  .logoSub{
    margin-bottom: 1em;
  }
  .logoSub img{
    max-width: 100%;
    height: unset;
  }
  .containerFrameCharacter{
    height: 100vh;
    height: 100dvh;
  }
  .rockAch{
    height: 85vh;
    height: 85dvh;
  }
  .sidebarSub{
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .sidebarSub > div:first-child{
    flex-direction: column;
    width: unset;
  }
  .sidebarSub > div:nth-child(2){
    display: flex;
    flex-direction: column;
  }
  .containerFrame{
    margin-left: 2vw;
  }
  .radars{
    justify-content: space-between;
    max-height: unset;
  }
  .radar1 img, .radar2 img{
    max-height: unset;
  }
  .buttonAch{
    margin-top: 1em;
    margin-left: 2vw;
  }
  .buttonAch .exit{
    display: inline-block;
  }
  .buttonAch .exitMobile{
    display: none;
  }
}

@media (min-width: 992px) {
  .ach_int_cont{
    border-radius: 1vw;
    min-height: calc(100% - 40px);
  }
  .ach_container {
    padding: 0 25px 0 20px;
  }
  .ach_container::before, .ach_container::after{
    height: 20px;
  }
}

@media (min-width: 1200px) {
  body{
    font-size: 20px;
  }
}

@media (min-width: 1400px) {}
@media (max-height:550px) and (orientation:landscape){
  .buttonAch .exit, .buttonAch .exitMobile, .buttonAch .langSwitch, .buttonAch2 .viewPdf, .buttonAch2 .backAch{
    padding:0 .5em;
    font-size: 1em;
  }
  .buttonAch{
    margin-top: .5em;
  }
}
/* ACCORDION END */