@charset "utf-8";

/* CSS */
body {
    padding-top: 5px;
    background: url(/img/bg.jpg) #9798a6 repeat top center;
    color: #696171;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h6,
.h6 {
    font-size: 15px;
    font-weight: bold;
}

header {
    margin-top: -20px;
}

header .container {
    padding-top: 2px;
    padding-bottom: 2px;
}

header .nav>li>a {
    padding: 5px 7px;
}

img {
  /*  display: block;*/
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

.header h2 {
    font-size: 20px;
    margin: -5px 0;

    text-align: center;
}

.thumbnail {
    display: block;
    padding: 3px;
    margin-bottom: 10px;
    line-height: 1.42857;
}

.table {
    margin-bottom: 10px;
}

.container {
    background: rgba(255, 255, 255, 0.9);
    padding-top: 15px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

.container a {
    text-decoration: none;
}

.stat-n {
    margin-right: 10px;
    color: #68a4c4;
}

.list-group-item-heading {
    font-weight: bold
}

.carousel {
    margin-bottom: 15px;
    margin-top: 5px;
}

.carousel-caption {
    background: rgba(117, 117, 117, 0.6);
    padding: 7px;
    margin-bottom: -10px;
}

.carousel-indicators {
    margin-bottom: -10px;
}

.comment {
    border-bottom: 1px solid #ccc;
    color: #666;
}

.comment h5 {
    font-weight: bold;
}

.add-comment {
    width: 100%;
    max-width: 100%;
    min-width: 240px;
    max-height: 100px;
}

.comment-btn {
    width: 100px;
    height: 30px;
    background: #474949;
    border: none;
    color: #fff;
}

.comment-btn:hover {
    background: #3498DB;
}

.collapsed {
    cursor: pointer;
}

.progress {
    margin-bottom: 0;
}

.nav-tabs {
    border-bottom: none;
}

.tab-pane .row {
    margin-top: 20px;
}

.caption {
    text-align: justify;
    color: #666;
}

.navbar {
    border-radius: 0;
    box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.3);
}

#header {
    margin: 10px;
}

.pagination>.selected>a,
.pagination>.selected>span,
.pagination>.selected>a:hover,
.pagination>.selected>span:hover,
.pagination>.selected>a:focus,
.pagination>.selected>span:focus {
    background-color: #04ACB1;
    border-color: #1abc9c;
    color: #fff;
    cursor: default;
    z-index: 2;
}

.pagination>li>a,
.pagination>li>span {
    color: #336E7B;
}

.pagination>li>a:hover,
.pagination>li>span:hover {
    color: #00979B;
}

.nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
}

.navbar-default .navbar-nav>li>a {
    font-weight: bold;
}

.nav-pills>li>a {
    border-radius: 0px;
}

.buttons-6 {
    margin-bottom: 10px;
}

.panel-group .panel {

    border-radius: 0;
}

.panel-heading {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.list-group-item:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.btn-sm,
.btn-group-sm>.btn {
    border-radius: 0;
}

blockquote {
    padding: 5px 10px;
    margin: 0 0 20px;
    font-size: 12px;
    border-left: 5px solid #ddd;
    border-right: 5px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    border-radius: 0;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-radius: 0;
}

.input-group-addon {
    border-radius: 0;
}

.dropdown-menu {
    border-radius: 0;
}

.form-control {
    border-radius: 0;
}

.errorSummary {
    background: #68a4c4;
    color: #fff;
    padding: 5px 10px;
    margin: 0 0 10px 0;
}

.pull-title {
    color: #666;
    padding-bottom: 4px;
}

.auth .input-group {
    margin-bottom: 10px;
}

.navbar-default .navbar-nav>li>a:hover {
    background: #04ACB1;
    color: #fff;
}

.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item {
    padding: 10px 5px;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #04ACB1;
    border-color: #04ACB1;
}

.list-group a:hover {
    background: #00979B;
    color: #fff;
}

.list-group .activ {
    background: #00979B;
    color: #fff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    background: #00979B;
    color: #fff;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #04ACB1;
}

.panel-info>.panel-heading {
    color: #000;
    background-color: #65C6BB;
    border-color: #65C6BB;
}

.btn-primary {
    color: #fff;
    background-color: #04ACB1;
    border-color: #1abc9c;
}

.btn-primary:hover {
    background-color: #1abc9c;
    border-color: #1abc9c;
}

a {
    color: #336E7B;
    text-decoration: none;
}

a:hover {
    color: #00979B;
    text-decoration: none;
}

.blue {
    color: #00979B;
}

.thumbnail {
    border-radius: 0px;
}

footer {
    background: #fff;
    line-height: 30px;
    padding: 0 15px 0 15px;
    overflow: hidden;
}

.navbar>.container {
    padding-top: 0px;
    border: 0px solid #ccc;
    margin-bottom: 0px;
    background: #f8f8f8;
}

footer>.container {
    border: 0px solid #ccc;
    background: #68a4c4;
    color: #fff;
}

footer .thumbnail {
    border: 0px solid #ccc;
    background: #68a4c4;
}

footer a {
    color: #dfdfdf;
}

footer a:hover {
    color: #fff;
}

footer {
    background: #68a4c4;
    color: #fff;
}

.mg10 {
    margin: 0 -30px;
}

.btn {
    border-radius: 0;
}

.img-thumbnail {

    border-radius: 0px;
}

/* кнопка кверху*/

#toTop {
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
}

/* главная стр. 4 плитки*/
.destacados-4 {
    padding: 20px 0;
}

.destacados-4>div>div {
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.2s;
    background: #fff;
}

.destacados-4>div:hover>div {
    margin-top: -10px;
    border: 1px solid rgb(200, 200, 200);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
    background: rgba(200, 200, 200, 0.1);
    transition: 0.5s;
    background: #fff;
}

.destacados-4>div>div {
    border: 1px solid rgb(200, 200, 200);
    width: 100%;
    height: 170px;
}

.destacados-4>div>div>div {
    width: 100%;
}

.destacados-4 h3 {
    margin: 5px;
}

/* главная стр. Товар*/
.destacados {
    padding: 20px 0;
}

.destacados>div>div {
    padding: 5px;
    transition: 0.2s;
    background: #fff;
}

.destacados>div>div {
    border: 1px solid rgb(200, 200, 200);
    width: 100%;
}

.destacados h3 {
    margin: 5px;
}

/* img на главной */
.img .thumbnail {
    position: relative;
    overflow: hidden;
}

.img .caption {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(234, 234, 234, 0.75);
    width: 100%;
    height: 100%;
    padding: 2%;
    display: none;
    text-align: center;
    color: #fff !important;
    z-index: 2;
}

.img .caption img {
    display: block;
    position: relative
}

.img .caption h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 15px;
    padding: 10px;
    background: #68A4C4;
    margin: 10px 0 20px 0;
}

.img .caption a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 24px;
    background: #68A4C4;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #68A4C4;
    position: absolute;
    bottom: 5%;
    left: 27%;
    width: 96%;
    margin: -15% 0 0 -25%;
}

.img .caption a.info:hover {
    background: #428BCA;
}

.badge {
    border-radius: 0px;
}

/*  */
.fancyboxpopup {
    position: relative;
    display: block;

}

.fancyboxpopup img {
    height: 140px;
}

.viewfancypopup {
    background: transparent url("/img/view.png") no-repeat scroll center center;
    text-align: center;
    width: 100%;
    display: none;
    height: 75px;
    position: absolute;
    bottom: 50%;
    margin-bottom: -38px;
}

/*  */
#pinBoot {
    position: relative;
    max-width: 100%;
    width: 100%;
}

.white-panel img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.white-panel {
    position: absolute;
    background: white;
    border: 1px solid rgb(221, 221, 221);
    padding: 10px;
}

.white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    margin-top: -3px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.left {
    text-align: left;
    font-weight: bold;
}

#deg a {
    display: inline-block;
    /* Строчно-блочный элемент */
    padding: 5px 10px 10px 5px;
    /* Добавляем поля */
    text-decoration: none;
    /* Убираем подчёркивание у ссылки */
    cursor: pointer;
    /* Курсор в виде руки */
    background: #04ACB1;
    /* Фон для браузеров, не поддерживающих градиент */
    color: #fff;
    /* Цвет текста и ссылки */
    font-size: 14px;
}

#deg a:hover {
    padding: 10px 10px 20px 10px;
    /* Добавляем поля */
    background: #65C6BB;
    /* Фон для браузеров, не поддерживающих градиент */
    font-size: 16px;
}

#deg {
    cursor: pointer;
    position: fixed;
    left: -70px;
    top: 75px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    font-weight: bold;

}

#deg1 {
    cursor: pointer;
    position: fixed;
    left: -25px;
    top: 210px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    font-weight: bold;
}

#deg1 a {
    display: inline-block;
    /* Строчно-блочный элемент */
    padding: 5px 10px 10px 5px;
    /* Добавляем поля */
    text-decoration: none;
    /* Убираем подчёркивание у ссылки */
    cursor: pointer;
    /* Курсор в виде руки */
    background: #5BC0DE;
    /* Фон для браузеров, не поддерживающих градиент */
    color: #fff;
    /* Цвет текста и ссылки */
    font-size: 14px;
}

#deg1 a:hover {
    padding: 10px 10px 20px 10px;
    /* Добавляем поля */
    background: #68A4C4;
    /* Фон для браузеров, не поддерживающих градиент */
    font-size: 16px;
}

#deg2 {
    cursor: pointer;
    position: fixed;
    left: -30px;
    top: 310px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    font-weight: bold;
}

#deg2 a {
    display: inline-block;
    /* Строчно-блочный элемент */
    padding: 5px 10px 10px 5px;
    /* Добавляем поля */
    text-decoration: none;
    /* Убираем подчёркивание у ссылки */
    cursor: pointer;
    /* Курсор в виде руки */
    background: #E48E34;
    /* Фон для браузеров, не поддерживающих градиент */
    color: #fff;
    /* Цвет текста и ссылки */
    font-size: 14px;
}

#deg2 a:hover {
    padding: 10px 10px 20px 10px;
    /* Добавляем поля */
    background: #E9C06A;
    /* Фон для браузеров, не поддерживающих градиент */
    font-size: 16px;
}


article {
    padding-bottom: 12px;
}

.article-caption {
    position: absolute;
    bottom: 16px;
    width: 90%;
    background-color: rgba(200, 200, 200, 0.8);

}

.article-caption h5 {
    text-align: center;
}

.article-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}


@media screen and (max-width: 768px) {
    .article-title {
        font-size: 10px;
    }
}

@media screen and (max-width: 500px) {
    .article-title {
        font-size: 8px;
    }
}

.article-caption a {
    color: white;
}



.heading1 {
    pfont-family: 'Noto Sans', serif;
    font-size: 20px;
    text-align: center;
    border-bottom: 2px solid #ddd;
    padding: 10px 0 5px 0;
    margin-bottom: 20px;
    margin-top: 0px;
}

.heading1 .maintext {
    border-bottom: 2px solid #A29F9F;
    padding: 0px 0 5px 0;
}

.img-thumbnail-gl {
    padding: 2px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.img-thumbnail-gl:hover {

    border: 1px solid rgb(200, 200, 200);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 3px 2px;
    background: rgba(200, 200, 200, 0.1);
    transition: 0.5s;

}

.img-news {
    padding: 3px;
    margin-bottom: 15px;
    margin-top: 0px;
    border: 1px solid #ddd;
}

.panel {
    margin-bottom: 10px;
    background-color: #65C6BB;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    color: #000;
    border-radius: 0px;
    font-size: 16px;
    text-align: left;
}

.panel-body {
    padding: 7px;
}

.panel-footer {
    padding: 5px 7px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.alert {
    padding: 7px;
    margin-bottom: 10px;
    border-radius: 0px;
}

.bg-primary {
    background-color: #00979B;
}

.pagination-forum {
    margin-bottom: -5px;
    margin-top: -10px;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 4px;
    vertical-align: top;
    /* Выравнивание по верхнему краю ячеек */
}

th {
    font-weight: normal;
    /* Нормальное начертание */
}

/*
pre {
    max-height: 30em;
}*/
pre[class*="language-"].line-numbers>code {
    white-space: pre-wrap;
}

pre.line-numbers>code {
    white-space: pre;
}

code {
    white-space: pre;
}

.navbar-brand {
    padding: 1px 1px;
    font-size: 18px;
    line-height: 20px;
    height: 24px;
}

.sidebar {
    display: none;
}

.nav>li>a>img {
    max-width: 40px;
}

/*
Конвертер RGB888 в RGB565
*/

.color-picker {
    display: inline-block;
    width: 100%;
}

.color-picker label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.color-picker .sp-preview {
    width: 100%;
    height: 250px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.color-picker .value {
    font-size: 16px;
    margin-top: 7px;
    text-align: center;
    padding: 7px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.sp-preview {
    cursor: pointer;
}

/*
Конвертер RGB888 в RGB565
*/
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid #0077cc;
    background-image: linear-gradient(to bottom, #0077cc, #0055cc);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
  }

  input[type="range"] {
    width: 100%;
  }

  label {
    display: block;
    margin-bottom: 10px;
  }

  input[type="color"] {
    height: 28px;
    margin-left: 5px;
    vertical-align: middle;
  }

  input[type="text"] {
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    padding: 5px;
    box-sizing: border-box;
  }

  .param {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .param label {
    flex: 1;
  }

  .param input[type="range"],
  .param input[type="color"] {
    flex: 2;
  }

  .param span {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }