* {
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

body {
  overscroll-behavior-y: contain;
}

.opacity {
  opacity: 0.4;
}

input:disabled {
  color: black;
}

.fade-in-top {
  -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  
}

.scale-in-center {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-7-1 16:14:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-7-1 16:23:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
@keyframes fade-in-top {
   0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}


.slide-out-left {
  -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-7-2 18:6:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
}


::-webkit-scrollbar {
  width: 0;
}


.roundImg {
    border-radius: 10px; /* Радиус скругления */
    box-shadow: 0 0 8px 8px white inset;
    
   }
   
   
   .maxW {
     max-width: 300px;
     
   }
   
   
   .bg-img {
     background-image: url(../img/1.png);
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     background-color: #999;
   
   }
   
   
   .front{
     width: 100%;
   }

.flip-horizontal-bottom {
	-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}



   
    
    /* ----------------------------------------------
 * Generated by Animista on 2023-8-26 9:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}


.flip-in-diag-1-bl {
  -webkit-animation: flip-in-diag-1-bl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: flip-in-diag-1-bl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-26 9:37:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-diag-1-bl
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-diag-1-bl {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 80deg);
            transform: rotate3d(1, 1, 0, 80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    opacity: 1;
  }
}
@keyframes flip-in-diag-1-bl {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 80deg);
            transform: rotate3d(1, 1, 0, 80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    opacity: 1;
  }
}


.flip-in-hor-top {
  -webkit-animation: flip-in-hor-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: flip-in-hor-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2023-8-26 9:43:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-hor-top
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
            transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
            transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}




.bg{
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
 background-blend-mode: multiply,multiply;
}

.bg2{
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.bg3{
  background-color: #3f2c56;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23272032' fill-opacity='0.18'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.bg4{
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjNDAzYzNmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMxZTI5MmQiPjwvcGF0aD4KPC9zdmc+");
}

.bg5{
  background: #141E30;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


.text-background {
  overflow-x:hidden;
   overflow-y:hidden;
   word-wrap:break-word;
   width:97%;
   height:79%;
   position:absolute;
}

background-text {
  font-size: 30px;
  font-weight: 900;
  color: black;
  position: absolute;
  z-index: -1;
}

 .container1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .containerbackground {
   position: absolute;
   display: inline-block;
   top: 0;
   right: 0;
  margin:1px;
  padding: 1px;
   left: 0;
   color: gray;
   
   
   text-align: center;
   vertical-align: middle;
   font-weight: 900;
 }
 

            
         .btn-grad {
            background-image: linear-gradient(to right, #16222A 0%, #3A6073  51%, #16222A  100%);
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
  .bg8{
      background: #355C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  }
  
  .bg9{
    background-image: linear-gradient( 355.3deg,  rgba(255,0,132,1) -66.6%, rgba(51,0,27,1) 96.6% );
  }
  
  .bg10{
    background-image: radial-gradient( circle 874px at 9.8% 8%,  rgba(255,20,175,1) 0%, rgba(22,22,22,1) 58.4% );
  }
  
  .bg11{
    background-image: radial-gradient( circle 815px at 23.4% -21.8%,  rgba(9,29,85,1) 0.2%, rgba(0,0,0,1) 100.2% );
  }
  
  .bg12{
    background-image: linear-gradient( 109.6deg,  rgba(5,84,94,1) 16%, #bbb 91.1% );
  }
  
  
.level_1 {
  background-color: #B3E0F2; /* Светло-голубой фон */
  color: #003366; /* Темно-голубой текст */
}

.level_2 {
  background-color: #8AC7E6; /* Голубой фон */
  color: #003366; /* Темно-голубой текст */
}

.level_3 {
  background-color: #67AEDB; /* Голубой фон */
  color: #003366; /* Темно-голубой текст */
}

.level_4 {
  background: linear-gradient(#4D94C6, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_5 {
  background: linear-gradient(#3385B3, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_6 {
  background: linear-gradient(#1F7599, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_7 {
  background: linear-gradient(#105F80, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_8 {
  background: linear-gradient(#004B66, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_9 {
  background: linear-gradient(#002533, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}

.level_10 {
  background: linear-gradient(#001319, #003366); /* Градиент от светло-голубого к темно-голубому */
  color: #FFFFFF; /* Белый текст */
}


.bgc1{
  background: -webkit-linear-gradient(231deg,#d08bfd,#a97cfd,#7a71f9); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(231deg,#d08bfd,#a97cfd,#7a71f9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bgc2{
  background: -webkit-linear-gradient(90deg,#4cb7b0,#0098c4,#026fc4); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(90deg,#4cb7b0,#0098c4,#026fc4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bgc3{
  background: -webkit-linear-gradient(90deg,#61d8f0,#93b9e0,#c3dcf5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(90deg,#61d8f0,#93b9e0,#c3dcf5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}