@import "../dir.fonts/Roboto/Roboto-Regular.css";
@import "../dir.fonts/Roboto/Roboto-Bold.css";
@import "../dir.fonts/RobotoBlack/Roboto-Black.css";
@import "../dir.fonts/RobotoLight/Roboto-Light.css";
@import "../dir.fonts/RobotoMedium/Roboto-Medium.css";
@import "../dir.fonts/RobotoThin/Roboto-Thin.css";


html {  }
body { font-family: 'Roboto', sans-serif; background-image: linear-gradient(0deg, #ededf4, #fff); background-repeat: no-repeat; background-size: cover; background-position: center; margin:0; padding:0;}


.main-frame {display: flex; align-items: center; justify-content: center; height: 100%;}
.center-box {display: inline-block; width:300px;}
.main-logo {margin: 0 auto; display: block;}
.button-grid {display: grid; grid-gap: 10px; width: 300px; margin-top: 30px;}
.button-link {text-align: center; background: #3C4657; color: #fff; padding: 10px 20px; user-select: none; cursor: pointer; transition: 200ms;}
.button-link:hover {background: #5b6a84; }
.button-grid a {text-decoration: none; color: inherit;}
.main-copyright {width: 300px; margin-top: 30px; text-align: center;}

.text-align-center {text-align: center;}
.margin-0   {margin:0;}
.page-title {margin: 0 0 30px 0;}

.link-container {position: fixed; bottom: 15px; right: 15px;color: #ccc;}
.link-container-right {right: 15px;}
.link-container-left {left: 15px;}
.link-container a {color: #888; text-decoration: none; margin: 0 5px;}
.link-container a:hover {color: #000; text-decoration: underline;}
.link-container a.active {color: #000; text-decoration: underline;}


.main-wrapper {padding: 30px 20px 60px 20px; margin: 0 auto; width: 1000px; box-sizing: border-box;}


@media (max-width: 1000px) {

    .main-wrapper {width: 100%;}
}