body {
    padding:0;
    margin:0;
    background:#E22C38;
    min-height:100vh;
    max-height:100vh;
    overflow-x:hidden; 
}

* {
    font-family: 'YotaDigit';
    font-weight: normal;
    color:#FFF;
    box-sizing:border-box;
    position:relative;
    outline: none;
}

.main {
    overflow-x:hidden;
}

.wrapper {
    min-height:100vh;
    width:100%;
    padding:50px 15px;
    max-width:1190px;
    margin:0 auto;
}

.content {
    margin-top:50px;
    /*overflow:hidden;*/
}

.content__text {
    display:flex;
    flex-direction:row;
    align-items: center;
    min-height:360px;
    width:100%;
}

.content__text *::selection {
    background:transparent;
    color:#FFF;
}

.content__text--current,
.content__text--next {
    font-weight:800;
    font-size:96px;
    line-height:90px;
}
.content__text--next {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    align-items: center;
    z-index:2;
}

.control-panel {
    margin-top:80px;
    display:flex;
    flex-direction:row;
}

.control-panel__buttons {
    margin-right:80px;
    text-align:center;
}

button.more {
    display:flex;
    align-items: center;
    justify-content: center;
    background:#FFF;
    color:#E22C38;
    font-weight:800;
    font-size:14px;
    letter-spacing: 0.8px;
    line-height:20px;
    text-transform: uppercase;
    text-align:center;
    border:none;
    border-radius:100px;
    padding: 14px 80px;
    min-width:220px;
    max-width:220px;
    cursor:pointer;
    transition:.4s ease;
}

button.more:hover {
    color:#E22C38;
}

.more__circle {
    display:block;
    margin-right:6px;
    height:20px;
    /*transform:rotate(0deg);
    transition:.4s ease-in-out;*/
}

.not-help {
    display:inline-block;
    padding:0;
    border:none;
    background:transparent;
    font-size:14px;
    line-height:18px;
    margin-top:20px;
    border-bottom:1px dashed #FFF;
    text-decoration: none;
    opacity:1;
    cursor:pointer;
    transition:.4s ease;
}

.not-help:hover {
    opacity:0.8;
}

.control-panel__social {
    display:flex;
    flex-direction:row;
    align-items:center;
    align-self:flex-start;
    min-height:48px;
}

.control-panel__social--text {
    font-size:14px;
    line-height:18px;
}

.control-panel__social--list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:row;
    align-items: center;
}

.control-panel__social--list li {
    padding:0 25px;
}

.control-panel__social--list li a {
    opacity:1;
    transition:.4s ease;
}

.control-panel__social--list li a:hover {
    opacity:0.8;
}

.control-panel__social--list li span {
    display:block;
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

.control-panel__social--list li span > a {
    display:block !important;
    width:100%;
    height:100%;
}

.content__motivation {
    display:none;
}

.content__motivation.active {
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:#E22C38;
    z-index:5;
}

.content__motivation--img__container {
    margin-right:50px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    flex:1;
    max-width:740px;
}

.content__motivation--img__container::after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:15;
}

.content__motivation--img__container > p {
    margin:0;
    padding:0 15px;
    text-align:center;
}

.content__motivation--img__container > p > a {
    display:inline-block;
    font-size:4px;
    font-weight:300;
    text-decoration:none;
    opacity:.8;
}

.content__motivation--img__container img {
    max-width:100%;
}

.content__motivation--controls {
    display:flex;
    flex-direction: column;
    justify-content: center;
    max-width:400px;
}

.content__motivation--text {
    font-weight:800;
    font-size:48px;
    line-height:50px;
    color:#FFF;
    min-height:200px;
}

.content__motivation--controls__buttons {
    display:flex;
    align-items:center;
    margin-top:50px;
}

.content__motivation--more {
    display:flex;
    align-items: center;
    justify-content: center;
    background:#FFF;
    color:#E22C38;
    font-weight:800;
    font-size:14px;
    letter-spacing: 0.8px;
    line-height:20px;
    text-transform: uppercase;
    text-align:center;
    border:none;
    border-radius:100px;
    padding: 14px 80px;
    min-width:220px;
    max-width:220px;
    cursor:pointer;
    transition:.4s ease;
}

.content__motivation--more:hover {
    color:rgba(0,174,239,.8);
}

.content__motivation--back {
    display:inline-block;
    padding:0;
    border:none;
    background:transparent;
    font-size:14px;
    line-height:18px;
    border-bottom:1px dashed #FFF;
    text-decoration: none;
    opacity:1;
    cursor:pointer;
    margin-left:20px;
    /*opacity:0;
    visibility: hidden;*/
    transition:.4s ease;
}

/*.content__motivation--back.active {
    opacity:1;
    visibility: visible;
}*/

.content__motivation--back:hover {
    opacity:0.8;
}

/*** ADMIN ***/

.admin-title {
    font-weight:800;
    text-align:center;
    color:#FFF;
    text-transform:uppercase;
    font-size:42px;
    align-self:center;
    position: absolute;
    width: 100%;
    line-height: 92px;
    margin: 0;
}

.admin-container {
    background:#FFF;
    border-radius: 15px;
    padding:30px;
    width:100%;
    display:flex;
    flex-direction:column;
    margin-top:30px;
}

.admin-tabs_row {
    display:flex;
    border:1px solid #ccc;
    border-radius:4px;
    align-self:center;
}

.admin-tabs_row * {
    padding: 5px 15px;
    color:#333;
    transition:.3s;
}

.admin-tabs_row div:first-of-type {
    border-right:1px solid #ccc;
}

.admin-tabs_row div.active {
    background-color:#eee;
}

.admin-tabs_row div {
    cursor:pointer;
}

.admin-tabs_row div:hover {
    background-color:#eee;
}

.admin-row {
    display:flex;
    flex-direction:row;
    align-self: center;
}

.admin-content > div {
    display:none;
}

.admin-content > div.active {
    display:flex;
}

.admin-edit_text {
    flex-direction:column;
}

.admin-gif_edit {
    flex:1;
    padding-left:30px;
}

.admin-edit_gif {
    flex-direction:row;
}

.admin-content_title {
    text-align:center;
    color:#333;
}

#admin-gif_add-form {
    display:flex;
    flex-direction:column;
    border:1px solid #ccc;
    border-radius:6px;
    overflow:hidden;
}

#admin-gif_add-form input:not(:last-of-type){
    border-bottom:1px solid #ccc;
}

#gif_add-sound {
    position:relative;
    cursor:pointer;
}

#gif_add-sound::after {
    content:'Добавить звук';
    display:flex;
    justify-content: center;
    align-items:center;
    background:#aaa;
    color:#FFF;
    text-transform:uppercase;
    position:absolute;
    z-index:10;
    top:0;
    right:0;
    left:0;
    bottom:0;
    transition:background .2s, color .2s;
}

#gif_add-sound.not-empty::after {
    content:'Звук добавлен';
    display:flex;
    justify-content: center;
    align-items:center;
    background:#E22C38;
    color:#FFF;
    text-transform:uppercase;
    position:absolute;
    z-index:10;
    top:0;
    right:0;
    left:0;
    bottom:0;
}

#admin-text_add-form {
    display:flex;
    flex-direction:row;
    border:1px solid #ccc;
    border-radius:6px;
    overflow:hidden;
}

#admin-text_add-form *,
#admin-gif_add-form * {
    border:none;
    padding:8px 20px;
    font-size:16px;
}

#text_add-submit,
#gif_add-submit {
    border-left:1px solid #ccc;
    background:#efefef;
    transition: .2s;
}

#text_add-submit:hover,
#gif_add-submit:hover {
    background:#ddd;
    cursor:pointer;
}

#text_add-input,
#gif_add-name,
#gif_add-text,
#gif_add-code {
    flex:1;
}

.admin-gif_add {
    max-width:300px;
}

input {
    color:#333;
}

.admin-text_edit-table {
    border-collapse: collapse;
    border:2px solid #ddd;
    width:100%;
}

.admin-text_edit-table * {
    color:#333;
}

.admin-text_edit-table td:first-of-type {
    text-align:center;
}

.admin-text_edit-table tr {
    background:transparent;
    transition:.2s;
}

.admin-text_edit-table tr:not(:first-of-type):hover {
    background:rgb(248, 247, 247);
    cursor:default;
}

.admin-text_edit-table td,
.admin-text_edit-table th {
    border:1px solid #ddd;
    padding:5px 15px;
}

.admin-text_edit-table th {
    font-weight: bold;
    padding:10px 15px;
    background:#eee;
    color:#222;
}

.admin-text_edit-btns {
    text-align:center;
}

.admin-text_edit-btns a {
    display:inline-block;
    width:16px;
    margin:0 4px;
    vertical-align: middle;
    font-size:0;
}

.admin-text_edit-btns a img {
    width:16px;
}

.admin-text_edit-delete img {
    width:16px;
    fill:red;
}

.admin-text_edit-visibility {
    opacity:0.8;
    transition:.2s;
}

.admin-text_edit-visibility:hover {
    opacity:1;
}

.toast {
    overflow: hidden;
    color:#333;
    background-color: #FFF;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: none;
    position: relative;
    padding: 0.75rem 2rem 0.75rem 0.75rem;
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius:6px;
}
    
.toast__close {
    position: absolute;
    top: 0;
    right: 10px;
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.6;
    appearance: button;
    margin: 0;
    font-family: inherit;
    border-radius: 0;
}

.toast_show {
    display: block;
}  

.toast:not(:last-child) {
    margin-bottom: 0.75rem;
}

.admin-gif_edit-table {
    border-collapse: collapse;
    border:2px solid #ddd;
    width:100%;
}

.admin-gif_edit-table * {
    color:#333;
}

.admin-gif_edit-table td:first-of-type {
    text-align:center;
}

.admin-gif_edit-table tr {
    background:transparent;
    transition:.2s;
}

.admin-gif_edit-table tr:not(:first-of-type):hover {
    background:rgb(248, 247, 247);
    cursor:default;
}

.admin-gif_edit-table td,
.admin-gif_edit-table th {
    border:1px solid #ddd;
    padding:5px 15px;
}

.admin-gif_edit-table th {
    font-weight: bold;
    padding:10px 15px;
    background:#eee;
    color:#222;
}

.admin-gif_edit-table-img p {
    font-size:0;
}

.admin-gif_edit-btns {
    text-align:center;
}

.admin-gif_edit-btns a {
    display:inline-block;
    width:20px;
    vertical-align: middle;
}

.admin_login-box {
    background:#FFF;
    max-width:300px;
    margin:150px auto 0;
    padding:15px;
    border-radius:6px;
}

.admin_login-title {
    display:block;
    font-weight: 800;
    text-align: center;
    color: #333;
    text-transform: uppercase;
    font-size: 32px;
    width: 100%;
    margin: 0 0 15px;
}

#admin-login {
    display:flex;
    flex-direction:column;
    border:1px solid #ccc;
    border-radius:6px;
    overflow:hidden;
}

#admin-login * {
    border:none;
    padding:8px 20px;
    font-size:16px;
}

#admin-login input:not(:last-of-type) {
    border-bottom:1px solid #ccc;
}

#admin-login_btn {
    background:#efefef;
    transition: .2s;
}

#admin-login_btn:hover {
    background:#ddd;
    cursor:pointer;
}