html {font-family: 'Montserrat', Arial, sans-serif;font-size: 16px;font-style:normal;font-weight:400;line-height:1.2;background:#fff;color:#000;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;overflow-y:scroll;}
::selection {background: #c4c4c7;color: #000;text-shadow: none;}
*, ::after, ::before {box-sizing: inherit;}
a {text-decoration: none !important;}

body {box-sizing: border-box;margin: 0;padding: 0;height: 100vh;}
section {box-sizing: border-box;display:block;height: 100%;background: #fff url(../images/002.jpg)no-repeat;background-position:0 0;background-size:cover !important;background-clip: padding-box !important;}
.wrapper {height: 100vh; width: 100%; box-sizing: border-box;padding: 3% 0;}
.main {position: relative;box-sizing: border-box;margin: 0 auto;width: 90%;min-height: 100%;border-radius: 15px;background: #f1f0f4 url(../images/logo-vokrug-g3.png) no-repeat;background-position:97% 85%;background-size: auto 90%;display: flex;align-items:center; justify-content: center;box-shadow: 0 4px 35px rgb(48 22 79/90%);border: 10px solid #fff;}
.title {position: absolute; top: 10px; left: 30px;}
.title h1 {font-size: 64px;font-weight: 900;color: #d6d5d9;margin: 0; padding: 0;}
.text-background {display: inline-block;-webkit-background-clip: text;background-color: #ed1c24;color: transparent!important; background-image: linear-gradient(
150deg,#3a2059 0 15%,#60165e 40%,#ed1c24 82%,#f4d000 100%);}
.container-wrapper {display: block;box-sizing: border-box;margin: 0 auto;height: 100%;margin: auto 0;}
.container {display: flex;flex-wrap: wrap;align-items:center;justify-content: flex-start;margin: 0; padding:0; list-style: none;max-width: 1100px;min-height: 100%;margin: 0 auto;}
.container>div {width: 50%;height: 100%;display: block;text-align: center;}
.card {box-sizing: border-box;position: relative;display: flex;align-items:center;justify-content: center;flex-direction: column;margin: 15px;box-shadow: 0 5px 18px rgb(58 32 89 / 12%);backdrop-filter: blur(6px);background: #dbdadf;border-radius: 15px;padding: 6px;}
.card>div {display: block;background: #fff;padding: 15px;border-radius: 9px;width: 100%;height: 100%;}
.card h2 {margin: 10px 0;padding: 0;font-size: 24px;font-weight: 700;color: #3a2059;margin-top: 8px;text-transform: uppercase;}
a.card-1:hover, a.card-2:hover, a.card-3:hover, a.card-4:hover {box-shadow: 0 8px 32px rgb(58 32 89 / 29%);/*transform: translateY(1px);*/transition: all .2s ease;}
a.card-1:hover {background: #d0a119;}
a.card-2:hover {background: linear-gradient(150deg,#ed1c24 0, #3a2059 60% 100%);}
a.card-3:hover, a.card-3:active, a.card-3:focus {background: linear-gradient(150deg,#ed1c24 0 5%,#f4d000 30%, #43aa4c 45%, #0054a1 75%,#60165e 90%, #3a2059 100%);}
a.card-4:hover {background: #b2b1b5;}
.icon {position: relative;}
.icon::before {content: "";margin-left: -5px;margin-top: -5px;width: 60px;height: 60px;border-radius: 50%;background: #f9f8fd;z-index: 0;}
.icon>img {z-index: 3;}
.card-name {display: inline !important;}
.vlogo {position: absolute;top: -12px; right: -12px;}
.vbutton {display: inline-block;padding: 12px 38px;border-radius: 25px;background: transparent; border: 1px solid #e6e5e8;font-size: 15px;color: #ed1c24;transition: all .35s ease;}
a.card-1:hover .vbutton, a.card-2:hover .vbutton, a.card-3:hover .vbutton, a.card-4:hover .vbutton {background: #ed1c24;color: #fff;border-color: #ed1c24;}
.logo-s {display: none !important;}
.notif {display: block !important;position: absolute;top:16px; left: 50%;transform: translateX(-50%);padding: 20px;border-radius: 5px;background: rgba(255, 255, 255, .7);backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(7px);box-shadow: 0 3px 26px rgb(58 32 89 / 28%);font-size: 18px;font-weight: 600;color: #ed1c24;opacity: 0;visibility: hidden;z-index: 5;}
a.card-3:hover .notif, a.card-4:hover .notif {opacity: 1;visibility: visible;transition: all .3s ease .12s;}
@media (max-width: 1400px) and (min-width:1201px) {
    .title {top: 8px;}
    .title h1 {font-size: 54px;}
}
@media (max-width: 1200px) and (min-width:1025px) {
    .title {top: 7px;}
    .title h1 {font-size: 48px;}
}
@media (max-width: 1024px) and (min-width:813px) {
    .main {background-position:97% 96%;background-size: auto 70%;width: 94%;border-width: 8px;}
    .wrapper {padding: 2% 0;}
    .title {top: 5px;}
    .title h1 {font-size: 38px;color: #c6c5c9;}
    .container {margin-top: 17px;}
    .card {margin:1.5% 10px;padding: 4px;height: 32vh;}
    .card>div {padding: 3% 7px;border-radius: 12px;display: flex;align-items:center;justify-content: center;flex-direction: column;}
    .card h2 {font-size: 18px;margin: 6px 0;}
    .notif {font-size: 15px;padding: 16px 20px;}
    .vbutton {padding: 7px 24px;font-size: 14px;}
    .icon img {width: auto;height: 30px;}
}
@media (max-width: 812px) and (min-width:568px) {
    .wrapper {padding: 2% 0;}
    .title {top:0; left: 50%;transform: translateX(-50%);margin-bottom: 10px;}
    .title h1 {font-size: 24px;color: #c6c5c9;}
    .main {background-position:97% 96%;background-size: 60% auto;width: 94%;border-width: 6px;}
    .container {margin-top: 14px;}
    .card {margin:1.1% 4px;padding: 4px;height: 34vh;}
    .card>div {padding: 3% 7px;border-radius: 12px;display: flex;align-items:center;justify-content: center;flex-direction: column;}
    .card h2 {font-size: 15px;}
    .notif {font-size: 15px;padding: 16px 20px;}
    .icon {display: none !important;}
    .vbutton {padding: 5px 20px;font-size: 13px;}
    .vlogo {position: absolute;top: -6px; right: -6px;}
    .logo-l {display: none !important;}
    .logo-s {display: block !important;}
    .notif {top:8px;font-size: 15px;padding: 10px 16px;}
}

@media (max-width: 567px) {
    .main {background-position:97% 96%;background-size: 60% auto;justify-content:space-around;width: 94%;border-width: 6px;}
    .title {top:0; left: 50%;transform: translateX(-50%);margin-bottom: 10px;}
    .title h1 {font-size: 29px;color: #c6c5c9;} 
    .container {margin-top: 17px;}  
    .container>div {width: 100%;height: 100%;}
    .card {margin:1.5% 10px;padding: 4px;height: 19vh;}
    .card>div {padding: 4.6% 14px;border-radius: 12px;display: flex;align-items:center;justify-content: center;flex-direction: column;}
    .card h2 {font-size: 15px;}
    .icon {display: none !important;}
    .vbutton {padding: 8px 30px;font-size: 14px;}
    .vlogo {position: absolute;top: -6px; right: -6px;}
    .logo-l {display: none !important;}
    .logo-s {display: block !important;}
    .notif {top:8px;font-size: 15px;padding: 10px 16px;}
}