body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    height: auto; /* Упевнись, що сторінка не має фіксованої висоти */
    overflow: auto; /* Переконайся, що прокрутка дозволена */

}



// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 700

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 700

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Стилі для меню */
.black-menu {
    background: linear-gradient(135deg, #000000, #000000);
    padding: 15px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0.9;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 42px;
}

.logo-link {
    text-decoration: none;
    color: white;
}

.menu-options {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* елементи в ряд */
    align-items: center;
}

 .menu-options li {
    margin-right: 30px;}

nav ul li:last-child {
    margin-right: 50px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    position: relative;
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #ccccff;
    transition: width 1s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: #ccccff;
}

.company-logo {
    width: 80px;
    height: auto;
    margin-top: -10px;
    margin-bottom: 0px;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    margin-right: 40px;
}
  .mobile-menu {
    display: none;
  }


  @media (max-width: 960px) {
    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 250px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 1002;
        padding: 20px;
    }

    .mobile-menu.open {
        display: flex;
    }

    .mobile-menu nav ul {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu nav ul li {
        margin: 20px 0;
    }

    .mobile-menu nav ul li a {
        color: white;
        font-size: 20px;
    }

    .close-btn {
        font-size: 30px;
        color: white;
        cursor: pointer;
        align-self: flex-end;
    }

    .nav { display: none;
    }

    .menu-options {
      display: none;
    }
     .black-menu {
       height: 45px;
     }
   }



   @media (max-width: 460px) {
       .logo h1 {
           font-size: 24px;
       }

       .nav ul li a {
           font-size: 16px;
       }

       .intro-button {
           font-size: 18px;
           padding: 6px 12px;
       }

       .black-menu {
         height: 32px;
       }

     .company-logo {
       width: 50px;
       height: 50px;
       }

       .Menu2 {
         list-style-type: none;
       }

       .footer-content {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           width: 100%;
           font-size: 16px;
           height: auto; /* Заміна на auto для адаптації висоти */
           padding: 20px 0; /* Додаємо відступи зверху та знизу */
       }

       .contact-info {
           text-align: center !important;
           margin: 50px 35px 110px 0;
           position: relative;
       }

       .contact-info p, .contact-info a {
           color: white;
           text-decoration: none;
           margin: 5px 0; /* Додаємо відступи між елементами */
       }

       .social-media {
           margin: 15px 0;
           display: flex;
           justify-content: center;
           gap: 15px; /* Відступи між іконками */
       }

       .social-media a {
           font-size: 20px;
           color: white;
       }

       .contact-button {
           background-color: #8781FF;
           color: white;
           text-decoration: none;
           border-radius: 5px;
           font-weight: bold;
           padding: 10px 20px;
           margin: 0 0 85px;
           display: inline-block;
           text-align: center;
       }

       .copyright {
           text-align: center;
           color: white;
           font-size: 14px;
           margin-top: 20px;
       }
     }





     .quote-image {
         width: 100%; /* Задаємо ширину зображення на всю ширину блоку */
         height: 450px; /* Висота зображення 450 пікселів */
         object-fit: cover; /* Зображення буде обрізатися, щоб заповнити блок, зберігаючи пропорції */
     }

     .quote-block {
         position: relative; /* Встановлюємо відносне позиціонування для коректного розміщення внутрішніх елементів */
         text-align: center; /* Центруємо текст всередині блоку */
         color: white; /* Колір тексту білий */
     }

     #blog-title {
         position: absolute; /* Абсолютне позиціонування заголовку */
         top: 100px; /* Відступ зверху 100 пікселів */
         left: 120px; /* Відступ зліва 150 пікселів */
         font-size: 115px; /* Розмір шрифту заголовку */
         font-family: 'Oswald', sans-serif; /* Використовуємо шрифт Oswald */
         font-weight: bold; /* Робимо текст жирним */
         text-transform: uppercase; /* Перетворюємо текст на великі літери */
         z-index: 10; /* Встановлюємо пріоритет для відображення заголовку поверх інших елементів */
     }

     .quote-text {
         position: absolute; /* Абсолютне позиціонування тексту цитати */
         top: 65%; /* Відступ від верхнього краю на 65% */
         left: 70%; /* Відступ від лівого краю на 75% */
         transform: translate(-50%, -50%); /* Центрування тексту відносно точки позиціонування */
         font-size: 26px; /* Розмір шрифту цитати */
         font-weight: bold; /* Жирний текст */
         font-family: 'Amatic SC', sans-serif; /* Використовуємо шрифт Amatic SC */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 2); /* Додаємо тінь тексту для кращої видимості на світлих зображеннях */
     }

     .quote-author {
         position: absolute; /* Абсолютне позиціонування автора цитати */
         bottom: 30px; /* Відступ знизу 30 пікселів */
         right: 120px; /* Відступ справа 120 пікселів */
         font-size: 23px; /* Розмір шрифту автора */
         font-family: 'Amatic SC', sans-serif; /* Використовуємо шрифт Amatic SC */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* Додаємо тінь тексту для кращої видимості на світлих зображеннях */
     }






     /* Основні стилі для сторінки */
     html, body {
         height: 100%; /* Забезпечує повну висоту для контейнерів */
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         display: flex;
         flex-direction: column;
         background-color: #FFFFF0;
     }

     /* Контейнер для контенту */
     .content-wrapper {
         margin-top: 10px;
         position: relative;
         display: flex; /* Горизонтальне розташування сайдбару та статей */
         flex-grow: 1; /* Займає весь доступний простір */
         margin-bottom: 10px;

     }

     /* Стилі для сайдбару */
     .sidebar {
         width: 220px;
         padding: 25px;
         background-color:#f2f6d0;
         box-shadow: 2px 0 5px rgba(0, 0, 0, 0.4);
         border-radius: 0 15px 15px 0;
         display: flex;
         flex-direction: column;
         overflow-y: auto; /* Вертикальна прокрутка для сайдбару */
         height: 100vh;
         position: -webkit-sticky;
         position: sticky;
         top: 80px; /* Фіксація на 80px від верху */
     }

     /* Приховування скроллбара для WebKit-браузерів (Chrome, Safari) */
     .sidebar-content::-webkit-scrollbar {
         width: 0px;
         background: transparent; /* Забезпечує прозорість */
     }

     /* Приховування скроллбара для Firefox */
     .sidebar-content {
         scrollbar-width: none; /* Firefox */
     }

     /* Приховування скроллбара для Edge, Internet Explorer */
     .sidebar-content {
         -ms-overflow-style: none; /* IE and Edge */
     }

     /* Вміст сайдбару */
     .sidebar-content {
         flex-grow: 1;
         overflow-y: scroll; /* Вертикальна прокрутка */
         overflow-x: hidden; /* Приховування горизонтальної прокрутки */
     }

     /* Футер сайдбару */
     .sidebar-footer {
         position: relative; /* Відносне позиціонування */
         padding: 10px 0;
         text-align: center;
         background-color: #f2f6d0;
         border-top: 1px solid #000;
         display: flex;
         justify-content: center; /* Центрування тексту горизонтально */
         align-items: center; /* Центрування тексту вертикально */
     }

     /* Нахилений текст у футері сайдбару */
     .rotated-text {
         font-size: 35px; /* Розмір шрифту */
         font-family: 'Inter', sans-serif; /* Використання шрифту Inter без засічок */
         font-weight: 900; /* Жирний текст */
         color: #000; /* Чорний колір тексту */
         transform: rotate(-5deg); /* Поворот тексту на 5 градусів */
         display: inline-block; /* Забезпечує коректне відображення тексту */
         margin: 10px; /* Відступи */
         margin-right: 30px;
         margin-top: 20px;
     }

     /* Приховуємо елементи, що будуть видимі тільки на мобільних */
     .sidebar-close {
         display: none;
     }

     /* Пошукове поле */
     .search-box {
         width: 90%; /* Ширина пошукового поля */
         padding: 10px; /* Відступи всередині поля */
         margin-bottom: 20px; /* Відступ знизу */
         font-size: 16px; /* Розмір шрифту */
         border: 1px solid #ccc; /* Рамка для поля */
         border-radius: 15px; /* Закруглені кути для поля */
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Внутрішня тінь */
     }

     /* Стилі для контейнера пошуку */
     .search-container {
         position: relative;
     }

     /* Стилі для підказок */
     .suggestions-list {
         position: absolute;
         top: 110%;
         left: 0;
         right: 0;
         background-color: white;
         /* border: 1px solid #ccc; */
         border-radius: 5px;
         z-index: 1000;
         list-style-type: none;
         padding: 0;
         margin: 0;
         max-height: 200px;
         overflow-y: auto;
     }

     .suggestions-list li {
         padding: 10px;
         cursor: pointer;
     }

     .suggestions-list li:hover {
         background-color: #f0f0f0;
     }

     /* Заголовки і списки в сайдбарі */
     .sidebar h2, .sidebar ul {
         margin-top: 0; /* Відсутність відступу зверху */
     }

     /* Елементи списку в сайдбарі */
     .sidebar ul li {
         margin-bottom: 5.5px; /* Відступ між пунктами */
         font-family: "Oswald";
     }

     /* Посилання в сайдбарі */
     .sidebar ul li a {
         text-decoration: none; /* Прибираємо підкреслення */
         color: #333; /* Колір тексту */
         font-family: 'Roboto', sans-serif; /* Стиль шрифту */
         font-size: 15px; /* Розмір шрифту */
     }

     .sidebar ul li a:hover {
         color: #FF4500; /* Теплий оранжевий колір тексту при наведенні */
     }

     /* Заголовки в сайдбарі */
     .sidebar h2 {
         font-family: 'Roboto Condensed', sans-serif;
         font-weight: 300;
     }





     .articles-header {
         grid-column: 1 / -1; /* Заголовок займає весь рядок зверху */
         text-align: center; /* Центрування заголовку */
         font-family: 'Roboto', sans-serif;
         font-size: 38px; /* Розмір шрифту */
         margin-bottom: 15px; /* Відступ знизу після заголовку */
     }

     .article {
         background-color: #ffffff; /* Білий фон блоку */
         border: 1px solid #ddd; /* Рамка блоку*/
         border-radius: 5px; /* Закруглені кути блоку */
         padding: 13px; /* Внутрішні відступи блоку */
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Тінь для блоку */
         display: flex;
         flex-direction: column;
         height: 470px; /* Фіксована висота блоку */
         max-width: 360px; /* Фіксована ширина блоку */
         margin-bottom: 20px; /* Відступ між блоками */
         position: relative; /* Для фіксування кнопки внизу */
     }

     .article img {
         width: calc(100% - 4px); /* Картинка зменшена на 2мм з кожного боку */
         height: 200px; /* Фіксована висота картинки */
         object-fit: cover; /* Збереження пропорцій картинки */
         border-radius: 5px; /* Закруглені кути картинки */
         margin-bottom: 10px; /* Відступ після картинки */
     }

     .article h3 {
         font-family: 'Roboto', sans-serif; /* Стиль шрифту для заголовку */
         font-size: 22px; /* Розмір шрифту заголовку */
         margin: 5px 0 10px 0; /* Фіксовані відступи для заголовку */
     }

     .article p {
         font-family: 'Roboto', sans-serif; /* Стиль шрифту для опису */
         font-size: 15px; /* Розмір шрифту опису */
         line-height: 1.6; /* Висота рядка для зручного читання */
         margin-bottom: 50px; /* Відступ для кнопки внизу */
         flex-grow: 1; /* Заповнення вільного простору описом */
     }

     .custom-button {
         position: absolute; /* Абсолютне позиціонування кнопки */
         bottom: 10px; /* Відступ від нижнього краю блоку */
         right: 10px; /* Відступ від правого краю блоку */
     }

     .custom-button a {
         display: inline-block;
         text-decoration: none;
         color: #ff6b81; /* Колір тексту кнопки */
         border: 2px solid #ff6b81; /* Рамка кнопки */
         padding: 10px 20px; /* Внутрішні відступи кнопки */
         border-radius: 5px; /* Закруглені кути кнопки */
         background-color: transparent; /* Прозорий фон кнопки */
         transition: background-color 0.3s, color 0.3s; /* Плавний перехід при наведенні */
     }

     .custom-button a:hover {
         background-color: #ff6b81; /* Колір фону при наведенні */
         color: white; /* Колір тексту при наведенні */
     }

     .article-date {
         position: absolute; /* Абсолютне позиціонування */
         bottom: 20px; /* Відступ від нижнього краю блоку */
         left: 20px; /* Відступ від лівого краю блоку */
         font-size: 12px; /* Розмір шрифту дати */
         color: #888; /* Колір тексту дати */
         font-family: 'Roboto', sans-serif; /* Стиль шрифту */
     }

     .articles-area {
         flex: 1;
         padding: 2%;
         background-color: #FFFFF0;
         display: grid;
         grid-template-columns: repeat(2, minmax(300px, 1fr)); /* Два стовпці для статей */
         grid-gap: 30px; /* Відстань між блоками */
         justify-items: center; /* Центрування блоків по горизонталі */
         justify-content: center; /* Центрування всієї сітки */
         position: relative; /* Для правильного позиціонування пагінації */
         padding-bottom: 60px;
         margin-left: 25px;
         margin-left: 25px; /* Простір для пагінації під статтями */
     }


     /* Ліва кнопка */
     .prev-page {
         position: absolute;
         left: 370px; /* Відступ від лівого краю контейнера */
         bottom: 20px; /* Відступ від нижнього краю контейнера */
         background: none;
         border: none;
         font-size: 36px;
         cursor: pointer;
         color: #333;
     }

     .prev-page:disabled {
         color: #ccc; /* Сірий колір для неактивних стрілочок */
         cursor: not-allowed;
     }

     .prev-page:hover:not(:disabled) {
         color: #4a4a4a; /* Колір стрілочок при наведенні */
     }

     /* Права кнопка */
     .next-page {
         position: absolute;
         right: 370px; /* Відступ від правого краю контейнера */
         bottom: 20px; /* Відступ від нижнього краю контейнера */
         background: none;
         border: none;
         font-size: 36px;
         cursor: pointer;
         color: #333;
     }

     .next-page:disabled {
         color: #ccc; /* Сірий колір для неактивних стрілочок */
         cursor: not-allowed;
     }

     .next-page:hover:not(:disabled) {
         color: #4a4a4a; /* Колір стрілочок при наведенні */
     }


     /* Зникання кнопки під час відкриття сайдбару */
     .hidden {
         display: none;
     }

     /* Стиль для перекриття екрану, коли сайдбар відкритий */
     .sidebar-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5); /* Напівпрозорий фон */
         z-index: 99 ; /* Розташування позаду сайдбару */
     }

     .sidebar-overlay.open {
         display: block; /* Показати перекриття, коли сайдбар відкритий */
     }



     /* Показуємо сайдбар, коли він відкритий */
     .sidebar.sidebar-open {
         left: 0; /* Переміщення сайдбару на екран */
     }

     /* Стиль для кнопки закриття сайдбару */
     .sidebar-close {
         display: none;
         position: absolute;
         top: 15px;
         right: 15px;
         background-color: transparent;
         border: none;
         font-size: 24px;
         cursor: pointer;
     }
     .sidebar-toggle{
       display: none;
     }

     .pagination {
         font-size: 20px;
         padding: 10px;
         height: 20px;
     }

     /* Медіа-запити для мобільних пристроїв */
     @media (max-width: 460px) {
         /* Приховуємо стандартний сайдбар на мобільних */
         .sidebar {
             display: block;
             position: fixed;
             top: 0;
             transition: left 0.3s ease; /* Плавний перехід для появи */
             left: -100%; /* Початкове положення поза екраном */
             width: 50%; /* Ширина сайдбару на мобільному */
             height: 100%;
             background-color: #f2f6d0; /* Фоновий колір сайдбару */
             z-index: 1000; /* Високий z-index для перекриття інших елементів */
             padding: 15px; /* Відступи всередині */
             overflow-y: auto; /* Прокрутка для довгих списків */
         }


         /* Показуємо сайдбар, коли він відкритий */
         .sidebar.open {
             display: block;
             left: 0; /* Показуємо сайдбар при відкритті */
         }

  .sidebar-overlay {
    display: none; /* Початково прихований */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозорий чорний фон */
    z-index: 999; /* Позаду сайдбару */
    transition: opacity 0.3s ease; /* Плавний перехід для оверлею */
}

         /* Стилі для кнопки відкриття сайдбару */
         /* CSS */
         .sidebar-toggle {
             position: fixed;
             top: 100px; /* Відстань від верху в 1 см (приблизно 10 пікселів) */
             left: -6%;
             z-index: 1002;
             display: block;
             background-color: #f2f6d0;
             color: #000;
             border: none;
             border-radius: 20px;
             padding: 12px 30px;
             font-family: 'Arial', sans-serif;
             font-size: 18px;
             box-shadow: 2px 0 5px rgba(0, 0, 0, 1);
             cursor: pointer;
             width: 95px;
             opacity: 1; /* Початково прихована */
             transform: translateY(-20px); /* Початково зміщена вгору */
             transition: opacity 0.5s ease, transform 0.5s ease; /* Анімація появи */
         }

         .articles-header {
        margin-right: 20px;
         }



         /* Стилі для кнопки закриття сайдбару */
         .sidebar-close {
             display: block;
             position: absolute;
             top: 15px;
             right: 15px;
             background-color: transparent;
             border: none;
             font-size: 24px;
             cursor: pointer;
         }

         /* Показати оверлей, коли сайдбар відкритий */
         .sidebar.open + .sidebar-overlay {
             display: block;
         }
         .sidebar-toggle.hidden {
    display: none; /* Приховуємо кнопку меню, коли сайдбар відкритий */
}

.sidebar-overlay.open {
    display: block; /* Відкриваємо оверлей */
    opacity: 1; /* Повна прозорість */
}
     }


     @media (max-width: 460px) {
         #blog-title {
             font-size: 80px; /* Перший рівень зменшення */
             text-align: center;
             left: 0;
             right: 0;

         }

         .quote-image {
             height: 450px; /* Зменшена висота для мобільних екранів */

         }

         .quote-text {
             position: absolute;
             font-size: 22px; /* Перший рівень зменшення */
             left: 50%;
             width: 70%;
             text-align: center; /* Центрування цитати */
             top: 70%;
             margin: 0 auto;
         }

         .quote-author {
             font-size: 18px; /* Перший рівень зменшення */
             text-align: center; /**/
             margin-top: -10px;
             margin-right: -40px;
         }
     }

     @media (max-width: 400px) {
       #blog-title {
           font-size:70px; /* Перший рівень зменшення */
           text-align: center;
           left: 0;
           right: 0;

       }

       .quote-image {
           height: 450px; /* Зменшена висота для мобільних екранів */

       }

       .quote-text {
           position: absolute;
           font-size: 20px; /* Перший рівень зменшення */
           left: 50%;
           width: 70%;
           text-align: center; /* Центрування цитати */
           top: 70%;
           margin: 0 auto;
       }

       .quote-author {
           font-size: 16px; /* Перший рівень зменшення */
           text-align: center; /**/
           margin-top: -10px;
           margin-right: -40px;
       }
     }

     @media (max-width: 350px) {
       #blog-title {
           font-size: 60px; /* Перший рівень зменшення */
           text-align: center;
           left: 0;
           right: 0;

       }

       .quote-image {
           height: 450px; /* Зменшена висота для мобільних екранів */

       }

       .quote-text {
           position: absolute;
           font-size: 18px; /* Перший рівень зменшення */
           left: 50%;
           width: 70%;
           text-align: center; /* Центрування цитати */
           top: 70%;
           margin: 0 auto;
       }

       .quote-author {
           font-size: 14px; /* Перший рівень зменшення */
           text-align: center; /**/
           margin-top: -10px;
           margin-right: -40px;
       }
     }






     @media (max-width: 470px) {
         .articles-area {
             grid-template-columns: 1fr;
             padding: 0 10px; /* Зменшуємо відступи зліва і справа для менших екранів */
         }

         .article {
             max-width: 100%; /* Статті займають весь доступний простір */
             right: 3.5%;
         }

         .pagination {
             font-size: 20px;
             padding: 10px;

             height: 20px;
         }

         .prev-page{
             font-size: 35px;
             left: 32%;

         }
          .next-page{
            font-size: 35px;
            left: 57%;
          }

     }

     @media (max-width: 400px) {
         .articles-area {
             grid-template-columns: 1fr;
             padding: 0 8px; /* Ще менші відступи */
         }

         .article {
             max-width: 100%;
         }

         .pagination {
             font-size: 18px;
             padding: 0;
         }

         .prev-page, .next-page {
             font-size: 25px;

         }
     }





































  footer {
      background-color:#121118;
      color:white;
      padding:40px 30px;
      text-align:center;
      position:relative;
  }

  .footer-content {
      display:flex;
      justify-content:space-between;
      align-items:center;
      width:100%;
      font-size:20px;
  }

  .contact-info, .social-media {
      flex:1;
      text-align:left;
  }

  .contact-info p, .contact-info a {
      display:block;
      margin-bottom:15px;
      color:white;
      text-decoration:none;
      margin-left:30px;
      font-family: Times New Roman;
  }

  .social-media {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
  }

  .social-media a {
      font-size:24px;
      margin:0 10px;
      color:white;
  }

  .contact-button {
      background-color:#8781FF;
      color:white;
      padding:10px 20px;
      text-decoration:none;
      border-radius:5px;
      font-weight:bold;
      position:absolute;
      margin-left: 20px;
      bottom:40px;
  }

  .contact-button:hover {
      background-color:#0056b3;
  }

  .copy rights {
      font-size:14px;
      color:#ccc;
      position:absolute;
      bottom:10px;
      width:100%;
      text-align:center;
  }