@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Version: 2.71
*/
html,body,div,span,p,a,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,label,input,select,textarea,blockquote,tabre,tbody,th,td,object,iframe,figure{ margin: 0; padding: 0; border: 0; vertical-align: baseline; font-weight: normal; }
a{ color: #283893; text-decoration: none; }
a img{ border: 0; }
img{ display: block; padding: 0; margin: 0; }
p img{ display: inline-block; vertical-align: middle; }
input,select,textarea{ outline: 0; }
table{ border: 0; border-collapse: collapse; border-spacing: 0; }
table th{ border: 0; border-collapse: collapse; border-spacing: 0; font-weight: normal; }
table td{ border: 0; border-collapse: collapse; border-spacing: 0; }
.clear{ height: 1px; clear: both; }

@font-face{ font-family: 'SuperMolot'; src: url('/wp-content/themes/twentytwentyone/assets/fonts/supermolot.woff2'); }
@font-face{ font-family: 'SuperMolot-Bold'; src: url('/wp-content/themes/twentytwentyone/assets/fonts/supermolot-bold.woff2'); }

body{ display: block; min-height: 100vh; background: #fff url('/wp-content/themes/twentytwentyone/assets/images/presidenta.jpg') no-repeat bottom center; background-attachment: fixed; background-size: cover; margin: 0; padding: 0; box-sizing: border-box; font: 16px 'SuperMolot', Arial, Tahoma; color: #212121; }

.fs21{ font-size: 21px; } 
b,strong{ font-family: 'SuperMolot-Bold'; font-weight: normal; font-style: normal; }

header{ position: fixed; top: 0; left: 0; width: 100%; height: 42px; background: #283893; z-index: 100; }
header .container{ display: flex; justify-content: space-between; margin: 0 auto; padding: 0; background: none; border-radius: none; }
header a,
header span{ font: 14px 'SuperMolot'; height: 42px; line-height: 42px; color: #fff; text-decoration: none; cursor: pointer; }

.heading{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; color: #283893; font-size: 48px; text-align: center; text-decoration: none; text-shadow: -1px -1px 0px #283893, 1px 1px 0px #283893, -1px 1px 0px #283893, 1px -1px 0px #283893; padding: 100px 20px; box-sizing: border-box; }

.container{ max-width: 1020px; margin: 220px auto 20px; background: rgba(255,255,255,.8); border-radius: 26px; padding: 50px 60px; box-sizing: border-box; backdrop-filter: blur(12px); }
.container article h1{ font: 21px 'SuperMolot-Bold'; margin: 0 0 20px 0; line-height: 1.5; }
.container article h2{ font: 18px 'SuperMolot-Bold'; margin: 0 0 20px 0; line-height: 1.5; }
.container article h3{ font: 18px 'SuperMolot-Bold'; margin: 0 0 20px 0; line-height: 1.5; }
.container article p{ margin: 0 0 20px 0; line-height: 1.5; }
.container article a{ font-size: 21px; color: #015bcd; }
.container article img{ display: block; max-width: 100%; height: auto; margin-bottom: 10px; }
.container + .container{ margin: 20px auto; }
.container.news{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 100px!important; }
.container.news .item{ display: flex; flex-direction: column; width: calc(33.33% - 15px); }
.container.news .item .img a{ display: block; width: 100%; height: 220px; background: #f5f5f5; border-radius: 12px; }
.container.news .item .txt a{ display: block; margin-bottom: 10px; font: 14px 'SuperMolot-Bold'; color: #000; }
.container.news .item .txt .title{ display: block; margin-bottom: 10px; font: 16px 'SuperMolot-Bold'; color: #000; }
.container.news .item .txt .descr{ display: block; margin-bottom: 10px; font: 14px 'SuperMolot'; color: #000; }

.container.news .pages{ display: flex; flex-wrap: wrap; width: 100%; } 
.container.news .pages a,
.container.news .pages span{ display: block; position: relative; width: 38px; height: 40px; padding: 0 0 0 2px; font: 14px 'SuperMolot-Bold'; line-height: 40px; margin: 0 10px 10px 0; border-radius: 7px; background: #1e0a0a; color: #fff; border: 0; text-align: center; overflow: hidden; cursor: pointer; transition: all 0.4s ease; }
.container.news .pages a:hover,
.container.news .pages a.active,
.container.news .pages span:hover,
.container.news .pages span.active{ color: #fff; filter: saturate(1.4); transition: all 0.4s ease; }
.container.news .pages a:before,
.container.news .pages span:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(#760202, #420217); opacity: 0; z-index: -1; transition: opacity 0.4s ease; }
.container.news .pages a:hover:before,
.container.news .pages a.active:before,
.container.news .pages span:hover:before,
.container.news span.active:before{ opacity: 1; transition: opacity 0.4s ease; }

.container .goback{ display: block; font: 14px 'SuperMolot'; color: #000; }

.callback.container{ display: flex; gap: 6.5rem; background: rgba(248,248,248,.8); }
.callback .feedback{ display: flex; flex-wrap: wrap; gap: 20px; border-radius: 20px; }
.callback .feedback .group{ display: flex; flex-wrap: wrap; gap: 20px; width: calc(50% - 10px); }
.callback .feedback .title{ width: 100%; font: 24px 'SuperMolot'; color: #000; text-transform: uppercase; }
.callback .feedback .title span{ display: block; font: 16px 'SuperMolot'; color: #000; text-transform: none; }
.callback .feedback .form{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.callback .feedback .form input[type='text']{ width: 100%; height: 52px; font: 15px 'SuperMolot'; line-height: 52px; padding: 0 20px; background: #fff; background-size: 20px; background-repeat: no-repeat; background-position: right 20px center; box-sizing: border-box; }
.callback .feedback .form textarea{ display: block; width: 100%; height: 124px; padding: 16px 20px; font: 15px 'SuperMolot'; background: #fff; background-size: 17.5px; box-sizing: border-box; }
.callback .feedback .form .button{ display: table; padding: 0 40px; font: 18px 'SuperMolot'; height: 50px; line-height: 50px; background: #283893; color: #fff; text-align: center; cursor: pointer; transition: all .3s ease; }

.cookie-law{ display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 20px; right: 20px; max-width: 500px; padding: 10px 20px; font: 16px 'SuperMolot'; line-height: 1.2; background: rgba(255,255,255,.8); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; box-shadow: 1px 1px 20px rgba(0,0,0,.21); z-index: 20; transform: translateY(200px); transition: all .6s ease; }
.cookie-law.loaded{ opacity: 1; pointer-events: all; transform: translateY(0); }
.cookie-law.closed{ transform: translateY(200px)!important; }
.cookie-law a{ text-decoration: underline; }
.cookie-law .button{ display: table; padding: 0 40px; font: 18px 'SuperMolot'; height: 50px; line-height: 50px; background: #283893; color: #fff; text-align: center; cursor: pointer; transition: all .3s ease; }
.cookie-law .button{ display: table; margin-left: 20px; font-size: 16px; height: 46px; line-height: 46px; padding: 0 30px; }

footer .container{ display: flex; align-items: center; justify-content: space-between; padding: 30px 60px; }
footer .container a{ color: #000; }

.attention{ border-bottom: 1px solid #cc0000!important; background-image: url('/wp-content/themes/twentytwentyone/assets/images/attention.svg')!important; z-index: 2; }
.err_message{ display: block; position: relative; width: 100%; margin: 0; font-size: 14px; color: #ff1c2d; }
.consent .err_message{ margin: 0 0 5px; }
.acpt_error{ color: #ff1c2d!important; }

.success{ display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 80%; padding: 0; box-sizing: border-box; }
.success .message{ display: flex; align-items: center; flex-direction: row-reverse; align-content: center; gap: 20px; }
.success p{ margin: 0!important; }
.success p span{ display: block; margin: 0 0 10px 0; font: 26px 'SuperMolot'; }
.success .success-animation{ margin: 150px auto; }
.fancybox__container .success{ width: 100%; }
.checkmark{ display: block; width: 100px; min-width: 100px; height: 100px; border-radius: 50%; stroke-width: 2; stroke: #4caf50; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #4caf50; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; position: relative; top: 5px; right: 5px; margin: 0 auto; }
.checkmark__circle{ stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #4caf50; fill: #fff; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark__check{ transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

.error{ display: none; width: 100%; position: absolute; top: 0; bottom: 0; margin: auto; padding: 0; box-sizing: border-box; }
.popup .error{ width: 80%; }
.error img{ width: 100px!important; height: auto; }
.error .message{ display: flex; justify-content: center; align-items: center; flex-direction: row-reverse; align-content: center; gap: 20px; }
.error p{ margin: 0!important; }
.error p span{ display: block; margin: 0 0 10px 0!important; font: 26px 'SuperMolot'; }
.fancybox__container .error{ width: 100%; }

@keyframes stroke{ 100%{ stroke-dashoffset: 0; } }
@keyframes scale{ 0%, 100%{ transform: none; } 50%{ transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill{ 100% { box-shadow: inset 0px 0px 0px 3rem #e5b34e; } }

@media(max-width: 1100px){
  .heading{ font-size: 42px; }
}
@media(max-width: 500px){
  header .container{ padding: 0 20px; }
  .heading{ font-size: 32px; }
  .container{ padding: 50px 20px; }
  .container article p{ font-size: 14px; }
  .container article a{ font-size: 18px; }
  .container.news{ gap: 30px; }
  .container.news .item{ width: 100%; }
  .cookie-law{ left: 10px; right: 10px; bottom: 10px; padding: 10px 15px; font-size: 14px; }
  .cookie-law .button{ margin: 0 0 0 10px; }
}
@media(max-width:380px){
  .heading{ font-size: 28px; }
}
@media(max-width:330px){
  .heading{ font-size: 24px; }
}