* {
	padding: 0px;
	margin: 0px;
	border: none;
}
body {
    font-family: Roboto;
    font-c	
}
h1 {
    text-align: center;
    margin: 0.5vw;
    font-size: calc(12px + (34 - 12) * ((100vw - 320px) / (1366 - 320)));
}

.data {
    color: #000000;
    margin: 1vw;
   text-align: right; 
   font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1366 - 320)));
}
.vremja {
    color: #000000;
    margin: 1vw;
    text-align: right;
    font-style: italic;
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1366 - 320)));
}
p {
    text-align: left;
    color: #000000;
    line-height: 1.5em;
    margin: 5vw;
    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1366 - 320)));  
}
q {
    text-align: left;
    color: #000000;
    font-style: italic;
    margin: 1vw;
    padding:  1vw;
    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1366 - 320)));  
}
h2 {
    text-align: center;
}
h3 {
    text-align: left;
margin-left: 5vw;
}
ul {
    text-align: left;
margin-left: 5vw;
margin-top: 1vw;
  line-height: 1em;
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1366 - 320)));
}

ol {
    text-align: left;
margin-left: 5vw;
  line-height: 1,5em;
    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1366 - 320)));
}
futer {
    color: #000000;
    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1366 - 320)));
text-align: center;   
}


.center {
    text-align: center;
margin: 0;
    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1366 - 320)));
}
.breakoutr {
    float: right;
    width: 35%;
    
    padding: 1vw;
    margin-left: 1vw;
    
    background-color: #ccc;
    color: #000;
    
    text-align: left;
    line-height: 120%;
    font-style: italic;
    }
    .breakoutr2 {
        float: left;
        width: 35%;
        
        padding: 1vw;
        margin-left: 1vw;
        margin-right: 2vw;
        background-color: #ccc;
        color: #000;
        
        text-align: left;
        line-height: 120%;
        font-style: italic;
        }
img {
        width: 100%;
        float:left; 
    margin: 1vw; 
   
    }
    figure {
        display: flex;
        flex-flow: column;
        padding: 2vw;
        max-width: 55%;
        float:left; 
    margin: 1vw; 

      }
      
      
      
      figcaption {
        font: italic smaller sans-serif;
        padding: 3px;
        text-align: center;
      }





.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Затемнение фона */
  display: none; /* По умолчанию скрыто */
  z-index: 1000; /* Над основной страницей */
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 40px;
  border-radius: 8px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

/* Стили для скрытия */
.popup-container:target,
.overlay:target {
  display: block;
}

.close-popup {
  position: absolute;
  top: 1px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
}
.ff input{display: block; width:100%; margin-bottom:15px; border:3px solid #999; padding:10px; text-align:center;}

.ff input[type=submit]{background:#2662d9; font-size:32px; font-weight:bold; color:white; border:none; padding:15px; margin:0 auto; width:100%;}

.animated-button9 {
    background: linear-gradient(-30deg, #0b0b3d 50%, #08082b 50%);
    padding: 20px 40px;
    margin: 12px;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    overflow: hidden;
    color: #d4d4f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  
  .animated-button9::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #8585ad;
    opacity: 0;
    -webkit-transition: .2s opacity ease-in-out;
    transition: .2s opacity ease-in-out;
  }
  
  .animated-button9:hover::before {
    opacity: 0.2;
  }
  
  .animated-button9 span {
    position: absolute;
  }
  
  .animated-button9 span:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to left, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
  }
  
  @keyframes animateTop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  
  .animated-button9 span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to top, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
            animation: 2s animateRight linear -1s infinite;
  }
  
  @keyframes animateRight {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }
  
  .animated-button9 span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to right, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateBottom linear infinite;
            animation: 2s animateBottom linear infinite;
  }
  
  @keyframes animateBottom {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  
  .animated-button9 span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to bottom, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
            animation: 2s animateLeft linear -1s infinite;
  }
  
  @keyframes animateLeft {
    0% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }