/* 						Logo fonts 					*/
@font-face {
   font-family: 'Abstrasctik';
   src: 	url("ABSTRASCTIK.otf") format("opentype");
	src: 	url('abstrasctik-webfont.woff2') format('woff2'),
			url('abstrasctik-webfont.woff' ) format('woff' );
}
@font-face {
	font-family: 'padalomaregular';
	src: 	url('padaloma-webfont.woff2') format('woff2'),
			url('padaloma-webfont.woff' ) format('woff' );
	font-weight: normal;
	font-style: normal;
}



.mainhead {
	font-family:'Abstrasctik', Gadget, sans-serif;
  /*
	font-family: 'padalomaregular';
  font-family: 'Kanit', sans-serif;
  font-family: 'Anton', sans-serif;
  */
}
@media screen and (min-width: 801px) {  .mainhead {    font-size: 7vw;  }} /* If the screen size is 601px wide or more, set the font-size of <h1> to 80px */
@media screen and (max-width: 800px) {  .mainhead {    font-size: 13vw;  }} /* If the screen size is 600px wide or less, set the font-size of <h1> to 30px */


.forcewrap-ANmars2023 {
	white-space:normal !important;
	word-wrap: break-word;
}


/* 						Code block 2024 					*/
.devblock-ANmar2024 {
    background-color: black; /* Black background */
    color: white; /* White text for visibility */
    font-family: roboto, Verdana, Segoe, sans-serif; /* Tahoma font with fallbacks */
    padding: 20px; /* Padding for better readability */
    border-radius: 8px; /* Rounded corners for a nicer look */
}



/* Progress circle GotoTop button */
:root {
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
	/*
	font-size: 20px;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
	*/
}

.anmaflex {
	display:flex;
	flex-direction: column;
}
.progressgototop-wrap {
	position: fixed;
	right: 80px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progressgototop-wrap.active-progressgototop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progressgototop-wrap::after {
	font-family: 'Material Icons';
	content: '\e5d8';
	/*
	font-family: 'unicons';
	content: '\e84b';
	*/
	position: absolute;
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progressgototop-wrap:hover::after {
	opacity: 0;
}
.progressgototop-wrap::before {
	position: absolute;
	font-family: 'Material Icons';
	content: '\e5d8';
	/*
	font-family: 'unicons';
	content: '\e84b';
	*/
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progressgototop-wrap:hover::before {
	opacity: 1;
}
.progressgototop-wrap svg path { 
	fill: none; 
}
.progressgototop-wrap svg.progressgototop-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}






/* Loader from https://css-loaders.com/continuous/ */
.loader-continues6 {
  width: 120px;
  height: 20px;
  background: 
    radial-gradient(circle 10px,#ccc 95%,#0000 )  right /calc(200% + 20px) 100%,
    linear-gradient(#ccc 0 0) center/100% 6px; 
  background-repeat: no-repeat; 
  -webkit-mask: radial-gradient(circle 4px,#0000 93%,#000 ) right/calc(200% + 20px) 100%;
  animation: l6 1s infinite linear;
}
@keyframes l6 {
  100% {background-position: left;-webkit-mask-position:left}
}


/* Ribbon Top-Left from https://css-generators.com/ribbon-shapes/ */
/* HTML: <div class="ribbon">Your text content</div> */
.ribbon-newversions {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon-newversions {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  position: absolute;
  right: 20px;
  top: calc(-1*var(--f));
  padding: .2em;
  background: #C8CF02;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
  clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 calc(100% - var(--r)),calc(50% - var(--f)/2) 100%,calc(100% - var(--f)) calc(100% - var(--r)),calc(100% - var(--f)) var(--f),100% var(--f));
}

.ribbon-topleftcount {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.ribbon-topleftcount {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  position: absolute;
  top: 20px;
  left: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: var(--bs-success); /* #987F69; */
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(0 0,0 calc(100% - var(--f)),var(--f) 100%,
      var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2),100% 0);
}
.ribbon-bottomleftcount {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.ribbon-bottomleftcount {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  position: absolute;
  bottom: 20px;
  left: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: var(--bs-success); /* #E3AD40; */
  border-top: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(0 100%,0 var(--f),var(--f) 0,
      var(--f) var(--f),100% var(--f),
      calc(100% - var(--r)) calc(50% + var(--f)/2),100% 100%);
}


/* Ribbon Top-Left from https://css-generators.com/ribbon-shapes/ */
.ANmaribbonTL {
  font-size: 18px;
  /* font-weight: bold; */
  color: #fff;
}
.ANmaribbonTL {
  --f: .2em; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: var(--bs-danger); /* the main color  */
  /* background-color: #BD1550; / * the main color  */ */
}