html {
  background-image: url(atom7.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
textarea {
    resize : none;
	background : #DCDCDC;
}

.font1 {
	position: absolute;
	top: -25px;
	left: 20px;
    font-family: Impact, Charcoal, sans-serif;
	text-align: center;
    font-weight: 400;
    font-size: 200px;
    color: rgba(255, 255, 255);
    mix-blend-mode: multiply;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 12px 5px rgba(30, 144, 255, 0.9);
}
.font2 {
	position: absolute;
	top: 5%;
	left: 8%;
    font-family: Impact, Charcoal, sans-serif;
	text-align: center;
    font-weight: 400;
    font-size: 40px;
    color: rgba(255, 255, 255);
    mix-blend-mode: overlay;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 12px 5px rgba(30, 144, 255, 0.9);
}
.font1B {
	position: absolute;
	top: -25px;
	left: 20px;
    font-family: Impact, Charcoal, sans-serif;
	text-align: center;
    font-weight: 400;
    font-size: 200px;
    color: rgba(255, 255, 255);
    mix-blend-mode: multiply;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 12px 5px rgba(30, 144, 255, 0.9);
}
.font2B {
	position: absolute;
	bottom: 40px;
	right: 30px;
    font-family: Impact, Charcoal, sans-serif;
	text-align: center;
    font-weight: 400;
    font-size: 40px;
    color: rgba(255, 255, 255);
    mix-blend-mode: multiply;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 12px 5px rgba(30, 144, 255, 0.9);
}


.file-input-container {
  position: relative;
  display: inline-block;
}
.file-input {
  display: none;
}
.file-label {
  display: block;
  width: 90px;
  height: 27px;
  border-radius: 4px;
  background-color: rgba(30, 144, 255, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C0C0C0;
  font-weight: bold;
  font-family: 'Arial', 'Verdana', sans-serif;
  text-shadow: 1px 1px 1px #000;
  cursor: pointer;
  transition: transform .2s ease-out;
}
.file-icon {
  width: 20px;
  margin-right: 7px;
}
.file-label:hover {
  transform: scale(1.02);
  background-color: rgba(70, 130, 180, 1);
}
.file-label:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.button1 {
  border: 0;
  line-height: 1.7;
  padding: 0 10px;
  font-size: 1rem;
  text-align: center;
  color: #C0C0C0;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: rgba(30, 144, 255, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: transform .2s ease-out;
}
.button1:hover {
  transform: scale(1.02);
  background-color: rgba(70, 130, 180, 1);
}
.button1:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.button2 {
  border: 0;
  line-height: 1.7;
  padding: 0 10px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: transform .2s ease-out;
}
.button2:hover {
  transform: scale(1.02);
  background-color: rgba(255, 0, 0, 1);
}
.button2:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.button3 {
  border: 0;
  line-height: 1.7;
  padding: 0 10px;
  font-size: 1rem;
  font-family: 'Arial', 'Verdana', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: default;
  color: #C0C0C0;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: rgba(30, 144, 255, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: transform .2s ease-out;
}
.button3:hover {
  transform: scale(1.02);
  background-color: rgba(70, 130, 180, 1);
}
.button3:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.button4 {
  border: 0;
  line-height: 1.7;
  padding: 0 10px;
  font-size: 1rem;
  font-family: 'Arial', 'Verdana', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: default;
  color: #C0C0C0;
  /* font-weight: 550; */
  /* font-weight: bold; */
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: rgba(178, 0, 0, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: transform .2s ease-out;
}
.button4:hover {
  transform: scale(1.02);
  background-color: rgba(255, 0, 0, 1);
}
.button4:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.iw-modal-btn {
  border: 0;
  line-height: 1.6;
  padding: 0 10px;
  font-size: 17px;
  font-family: 'Arial', 'Verdana', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: default;
  color: #C0C0C0;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: rgba(30, 144, 255, 1);
  background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 30%,
  rgba(0, 0, 0, 0)
  );
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: transform .2s ease-out;
}
.iw-modal-btn:hover {
  transform: scale(1.02);
  background-color: rgba(70, 130, 180, 1);
}
.iw-modal-btn:active {
  box-shadow:
  inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/*CSS-свойства для заднего фона*/
.iw-modal {
opacity: 0; /*изначально этот блок должен быть прозрачным*/ 
background: rgba(0, 0, 0, 0.3); /*задаём цвет фона*/
pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
position: fixed; 
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1; /*при клике блок становится видимым*/
pointer-events: auto; /*теперь по блоку можно кликать мышкой*/
overflow-y: auto; /*прокрутка по вертикли страницы*/
}
.iw-modal-wrapper {
width: 300px;
height: 200px;
margin: auto; /*выравниваем модальное окно по центру по горизонтали 800px */
margin-top: 20%; /*отступ сверху можно задавать в px, % или vh */
}
.iw-modal-wrapper2 {
width: 370px;
height: 200px;
margin: auto; /*выравниваем модальное окно по центру по горизонтали 765px */
margin-top: 20%; /*отступ сверху можно задавать в px, % или vh*/
}
.iw-modal-wrapper3 {
width: 350px;
height: 230px;
margin: auto; /*выравниваем модальное окно по центру по горизонтали 800px */
margin-top: 42vh; /*отступ сверху можно задавать в px, % или vh*/
}
.iw-modal-wrapper4 {
width: 640px;
height: 200px;
margin: auto; /*выравниваем модальное окно по центру по горизонтали 800px */
margin-top: 42vh; /*отступ сверху можно задавать в px, % или vh*/
}
/*CSS-свойства для блока, содержащего контент модального окна */ 
.iw-CSS-modal-inner {
position: relative;
background: rgba(0, 0, 139, 0.5); /*цвет фона*/
border: 1px solid #1E90FF; /*цвет и толщина рамки*/
border-radius: 6px; /*радиус скругления углов*/
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
padding: 5px;/*внутренний отступ*/
background: rgba(0, 0, 139, 0.5);/*цвет фона*/
position:relative;
}
.iw-modal-title {
font-size: 18px; /*размер шрифта*/
color:#555; /*цвет шрифта*/
font-weight:bold; /*жирность шрифта*/
line-height: 1.5; /*высота строки*/
margin-top: 0;
margin-bottom: 0;
}
/*CSS для кнопки закрытия*/
.iw-close {
position:absolute;
top: 13px; /*отступ сверху*/
right: 20px; /*отступ справа*/
font-size: 20px; /*размер шрифта*/
color: red; /*цвет шрифта*/
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000; /*цвет шрифта при наведении*/
cursor: pointer;
}
/*CSS для блока с текстом*/
.iw-modal-text {
padding: 15px 20px; /*внутренний отступ*/
}
/**MEDIA**/
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}
}


.checkbox-wrapper-1 *,
.checkbox-wrapper-1 ::after,
.checkbox-wrapper-1 ::before {
  box-sizing: border-box;
}
.checkbox-wrapper-1 [type=checkbox].substituted {
  margin: 0;
  width: 0;
  height: 0;
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkbox-wrapper-1 [type=checkbox].substituted + label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  height: 1.15em;
  width: 1.15em;
  margin-right: 0.6em;
  color: rgba(0, 0, 0, 0.275);
  border: solid 0.06em;
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;
  border-radius: 0.2em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;
  background-size: 0;
  will-change: color, border, background, background-size, box-shadow;
  transform: translate3d(0, 0, 0);
  transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;
}
.checkbox-wrapper-1 [type=checkbox].substituted:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:enabled + label:active:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset;
  background-color: #f0f0f0;
}
.checkbox-wrapper-1 [type=checkbox].substituted:checked + label:before {
  background-color: #3B99FC;
  background-size: 0.75em;
  color: rgba(0, 0, 0, 0.075);
}
.checkbox-wrapper-1 [type=checkbox].substituted:checked:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:checked:enabled + label:active:before {
  background-color: #0a7ffb;
  color: rgba(0, 0, 0, 0.275);
}
.checkbox-wrapper-1 [type=checkbox].substituted:focus + label:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
}
.checkbox-wrapper-1 [type=checkbox].substituted:focus:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:focus + label:active:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
}
.checkbox-wrapper-1 [type=checkbox].substituted:disabled + label:before {
  opacity: 0.5;
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark + label:before {
  color: rgba(255, 255, 255, 0.275);
  background-color: #222;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted.dark:enabled + label:active:before {
  background-color: #444;
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(255, 255, 255, 0.1) inset;
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked + label:before {
  background-color: #a97035;
  color: rgba(255, 255, 255, 0.075);
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked:enabled + label:active:before {
  background-color: #c68035;
  color: rgba(0, 0, 0, 0.275);
}
.checkbox-wrapper-1 [type=checkbox].substituted + label {
  -webkit-user-select: none;
  user-select: none;
}