/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap');

/* @media */

@media screen and (min-width: 756px) {

.area {
 max-width: 720px;
}

}

/* core */

html {
 height: 100%;
 font-size: 100%;
}

body {
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 300;
 color: #000;
 background-color: #ffffff;
 padding: 0px;
 margin: 0px;
}

.area {
 margin: 0 auto;
 height: 100%;
 padding-left: 18px;
 padding-right: 18px;
}

a:link { color: #6b77e8;}
a:visited { color: #6b77e8;}
a:active { color: #6b77e8;}
a:hover { color: #6b77e8;}

.main {
 padding-bottom: 24px;
}

.pad {
 padding-top: 12px;
 padding-bottom: 12px;
}

/* header */

.top {
 height: 58px;
 color: #000;
 font-family: 'Montserrat', sans-serif;
 font-size: 21px;
 text-transform: uppercase;
 font-weight: 300;
 border-bottom: 1px solid #f9f9f9;
}

.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.top-menu {
 height: 58px;
 border-bottom: 1px solid #1c1c1c;
}

/* footer */

.bottom {
 color: #000;
 font-family: 'Montserrat', sans-serif;
 font-weight: 300;
 border-top: 1px solid #f9f9f9;
 padding-top: 18px;
 padding-bottom: 18px;
 line-height: 22px;
}

/* logo */

a.logo {
 color: #000;
 height: 58px;
 line-height: 58px;
 background-image: url("../pics/logo.png");
 background-repeat: no-repeat;
 background-position: left 12px;
 padding-left: 48px;
}

a.logo::after {
 content: "home";
}

a.logo:link { color: #000; text-decoration: none;}
a.logo:visited { color: #000; text-decoration: none;}
a.logo:active { color: #000; text-decoration: none;}
a.logo:hover { color: #000; text-decoration: none;}

/* menu */

.menu {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
}

.menu-link {
 cursor: pointer;
 display: flex;
 align-items: center;
 height: 58px;
}

.menu-text::after {
 content: "menu";
}

.menu-icon {
 font-size: 30px;
 margin-left: -4px;
 color: #111111;
}

.menu-list {
 width: 100%;
 display: none;
 background-color: #000000;
 position: fixed;
 height: 100%;
 top: 0;
 right: 0;
 z-index: 2;
}

.menu-list ul {
 padding: 0px;
 margin: 0px;
 list-style-image: none;
}

.menu-list ul li {
 list-style-type: none;
}

a.menu-close {
 cursor: pointer;
 background-image: url("../pics/menu-close.png");
 background-repeat: no-repeat;
 background-position: center top;
 width: 58px;
 height: 58px;
 display: block;
 float: right;
}

a.menu-close:hover { background-position: center -58px;}

.menu-items {
 float: right;
 margin-top: 7px;
 text-align: right;
}

a.submenu-link {
 font-size: 32px;
 line-height: 58px;
 color: #f5f5f5;
 font-family: 'Montserrat', sans-serif;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 4px;
 text-decoration: none;
}

a.submenu-link:visited { color: #f5f5f5; text-decoration: none;}
a.submenu-link:active { color: #f5f5f5; text-decoration: none;}
a.submenu-link:hover { color: #6b77e8; text-decoration: none;}

/* main */

h1, h2 {
 margin: 0px;
 padding-top: 16px;
 padding-bottom: 16px;
 color: #111111;
 font-family: 'Montserrat', sans-serif;
 font-size: 32px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 2px;
}

/* form */

.msg-text {
 padding: 9px 11px 9px 11px;
 background-color: #e6e9ff;
 border-radius: 3px;
 color: #000000;
 line-height: 22px;
}

.error-text {
 display: none;
 margin-top: 18px;
 padding: 9px 11px 9px 11px;
 background-color: #ffd5fc;
 border-radius: 3px;
 color: #000000;
 line-height: 22px;
}

.field {
 display: inline-block;
 padding-top: 16px;
 padding-bottom: 2px;
}

.title {
 display: block;
 padding: 9px 11px 9px 11px;
 background-color: #e6e9ff;
 color: #000000;
 line-height: 22px;
 border-radius: 3px 3px 0px 0px;
}

.wait {
 display: none;
 margin-left: 16px;
 width: 16px;
 height: 40px;
 background-image: url(../pics/loading.gif);
 background-position: 0px 15px;
 background-repeat: no-repeat;
}

.input-text {
 background: none repeat scroll 0 0 #f8f9ff;
 border: 1px inset rgba(0, 0, 0, 0.05);
 border-radius: 3px;
 padding: 8px 10px 8px 10px;
 width: 100%;
 box-sizing: border-box;
 word-wrap: break-word;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 300;
 color: #000;
 line-height: 22px;
}

.input-text:disabled {
 background: none repeat scroll 0 0 #ffffff;
}

.input-text:focus {
 background-color: #eff2ff;
}

.input-textarea {
 margin-bottom: -4px;
}

.submit {
 border-style: none;
 border-radius: 3px;
 color: #FFFFFF;
 cursor: pointer;
 height: 40px;
 padding: 0px 12px 0px 12px;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 300;
 letter-spacing: 1px;
 text-transform: uppercase;
 box-shadow: 0 14px 14px -14px rgba(0,0,0,.5);
 -webkit-transition: all 200ms ease-out;
 -moz-transition: all 200ms ease-out;
 -o-transition: all 200ms ease-out;
 transition: all 200ms ease-out;
 min-width: 100px;
}

a.submit {
 line-height: 62px;
 border-style: none;
 border-radius: 3px;
 color: #FFFFFF;
 cursor: pointer;
 height: 40px;
 padding: 11px 16px 10px 16px;
 text-decoration: none;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 300;
 letter-spacing: 1px;
 text-transform: uppercase;
 box-shadow: 0 14px 14px -14px rgba(0,0,0,.5);
 -webkit-transition: all 200ms ease-out;
 -moz-transition: all 200ms ease-out;
 -o-transition: all 200ms ease-out;
 transition: all 200ms ease-out;
 min-width: 100px;
}

.submit:hover {
 transform: translate(0, 2px);
 box-shadow: 0 18px 18px -16px rgb(0,0,0,.3);
 -webkit-transition: all 200ms ease-out;
 -moz-transition: all 200ms ease-out;
 -o-transition: all 200ms ease-out;
 transition: all 200ms ease-out;
}

.submit:disabled {
 transform: translate(0, 2px);
 box-shadow: 0 18px 18px -16px rgb(0,0,0,.3);
}

.primary {
 background-color: #6b77e8;
}

.primary:hover {
 background-color: #505cc9;
}

.primary:disabled {
 background-color: #ced1e9;
}

.accent {
 background-color: #d100c5;
}

.accent:hover {
 background-color: #a30099;
}

.accent:disabled {
 background-color: #e7aee3;
}

.div-submit {
 padding-top: 18px;
 display: flex;
}

.not-allowed {
 cursor: not-allowed;
}

/* block */

.strong {
 font-weight: 700;
}

.block-text {
 position: relative;
 margin-top: 40px;
 border-radius: 3px;
 z-index: 1;
 box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.block-data {
 padding: 0px 11px 11px 11px;
}

.chain {
 position: absolute;
 left: -10px;
 width: 8px;
 bottom: -215px;
 height: 243px;
 border-top: 2px solid #101010;
 border-left: 2px solid #101010;
 border-bottom: 2px solid #101010;
 border-radius: 0px 0px 0px 0px;
}