root {
  display: block;
  --base-font-size: clamp(16px, 2vw, 20px);
  }

html, body {
     background-color: #244263;
     height: 100%;
     font-size: var(--base-font-size);

}



#header {
     background-color: #1a3048;
     width: 70%;
     height: 150px;
     margin: 0 auto;
     box-shadow: 0 0 5px #ffffff;
     text-align: center;
     display: flex;
     align-items: center; /* Вертикальное центрирование */
     justify-content: space-between; /* Горизонтальное центрирование */

}


#main {
    background-color: #dedede;
    background-image: url("../Images/Common/paper.jpg");
    background-size: contain;
    width: 70%;
    box-shadow: 5px 0 10px -5px #ffffff,
    -5px 0 10px -5px #ffffff;
    height: fit-content;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Вертикальное центрирование */
    justify-content: space-between; /* Горизонтальное центрирование */
  }


.sidebar {
  width: 20%;
  flex: auto;
  margin-left: -20pt;
}

.content{
  width: 70%;
  flex: auto;
  margin: 20pt 20pt;

}

.portrait-container {

              width: 40%;
              flex: auto;
              flex-grow: 90%;
              margin: 20pt 20pt;

}

.portrait-container img{
              width: 20vw;
              border-radius: 7px;
              box-shadow: 0 10px 20px rgba(0,0,0,0.2);
              transition: transform 0.3s ease;

}

.portrait-container img:hover {
              transform: scale(1.02);
}


#footer {
  background-color: #1a3048;
  width: 70%;
	height: 60px;
  box-shadow: 0 0 5px;
  margin: 0 auto;
  margin-top: auto;
  font-family: Times;
  color: white;
  align-content: center;
  text-align: center;

  }

/*Задаём стиль меню с выпадающими подменю*/

    .dropdown-menu {
      list-style-type: none;
      width: 70%;
      box-shadow: 5px 0 5px -5px #ffffff,
      -5px 0 5px -5px #ffffff;
      margin: 0 auto;
      padding: 0;
      background-color: #2e4861;
      display: flex;

    }

    .dropdown-menu li {
      position: relative;
      flex: auto;
      text-align: center;

    }

    .dropdown-menu li a {
      display: block;
      color: white;
      padding: 10px 16px;
      text-decoration: none;
    }

    .dropdown-menu li:hover > a {
      background-color: #FFFFFF;
      color: #2e4861;
      border-radius: 5px; /* Уголки */
    }

    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 100%;
      width: 100%;
      background-color: #2e4861;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      border-radius: 5px; /* Уголки */
      z-index: 1;
      left: 0; /* Прижимаем к левому краю родителя */
      top: 100%; /* Располагаем сразу под родителем */
      /*font-size: clamp(8px, 14px, 16px);*/

    }

    .dropdown-content a {
      color: white;
      padding: 12px 16px;
      display: block;

    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #FFFFFF;
      color: #2e4861;

    }

/*Модальное окно*/

.modal {
    display: none;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;

}

.modal.active {
    display: block;

}

.modal-content {
    position: relative;
    top: 10%;
    /*left: 35%;*/
    background: white;
    margin: 50px auto;
    padding: 20px;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 0 16px rgba(0,0,0,0.9);

    }

    .modal-header {
                padding: 0 53px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .modal-body {
                padding: 0 0;
                align-items: center;
            }

/*    Футер пока не используется
            .modal-footer {
                padding: 20px;
                border-top: 1px solid #eee;
                text-align: right;
            }
*/

.modal-logo {
  background-color: transparent;
  width:16px;
  height:16px;
  vertical-align: middle;
  /*margin: 0 0;*/
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    font-weight: bold;
}

.modal-close:hover {
    color: #7e0015;
}


/* Стили для кнопки */
.convex-button {
    width: 60%;
    padding: 20px 30px;
    font-size: 18px;
    font-weight: bold;
    font-family: inherit;
    color: #1a3048;
    background: transparent;
    /*color: #333;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);*/
    border: 1px solid #1a3048;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        8px 8px 16px #d9d9d9,
        -8px -8px 16px #ffffff,
        inset 0 0 0 transparent;
    outline: none;
    margin: 0 auto;
    display: block;
}

/* Эффект нажатия */
.convex-button:active {
    transform: translateY(4px);
    box-shadow:
        4px 4px 8px #d9d9d9,
        -4px -4px 8px #ffffff,
        inset 2px 2px 4px #d9d9d9,
        inset -2px -2px 4px #ffffff;
}

/* Эффект при наведении */
.convex-button:hover {
    /*background: linear-gradient(145deg, #f0f0f0, #ffffff);*/
  background: white;
}
/*Стили для кнопки: окончание блока*/

/* Лист бумаги на странице */
.layer1 {
     width: 50%;
     background-color: transparent;
     background-image: url(../Images/Common/paper3_1.jpg);
     background-size: cover;
     margin: 0 auto;
     padding: 25px;
     border-radius: 5px; /* Уголки */
     box-shadow: 0 0 5px;
}

/*Стили логотипов*/

  .logo1 {
      background-color: transparent;
      width:100px;
      height:100px;
      /*float:left;*/
      margin: 20px 20px;
      filter: drop-shadow(0 0 5px #ffffff); /* Параметры тени */

    }

    .logo2{
      background-color: transparent;
      width:90px;
      height:90px;
      /*float:right;*/
      margin: 20px 20px;
      filter: drop-shadow(0 0 5px #ffffff); /* Параметры тени */

    }

    .logo3{
      background-color: transparent;
      width:16px;
      height:16px;
      vertical-align: middle;
      /*margin: 0 0;*/


    }


/*Список без точек*/
  .nobull{
    list-style-type: none; /* Убирает буллиты */
}
/*Список без точек - завершение*/

/* Стили изображений*/

.percentage {
        width: 90%;  /* 50% от родителя */
        height: auto; /* сохраняет пропорции */


/*#header1 {
      background-color: #4169E1;
      width: 100%;
      height: 100px;
      position: relative;
      border-radius: 5px; /* Уголки */
  /*    box-shadow: 0 0 5px;
      text-align: center;

}*/


#clear {
     clear: both;
}



#buttonup{
  /*background-color: #6495ED;*/
  background-color: transparent;
  width:20pt;
  height:20pt;
  text-align: center;
  border: 1px solid white;
  border-radius: 20px; /* Уголки */
  box-shadow: 0 0 5px;
  position: fixed;
  bottom: 3%; /* смещение от нижнего края */
  right: 3%; /* смещение от левого края */

   }

#btnright{
	float: right;
    background-color: transparent;
    width:20pt;
    height:20pt;
    text-align: center;
    border: 1px solid white;
    border-radius: 20px; /* Уголки */
    box-shadow: 0 0 5px;
      }

#btnright:hover{
    color: #2c6b30;
  }

#btnleft{
    float: left;
    background-color: transparent;
    width:20pt;
    height:20pt;
    text-align: center;
    border: 1px solid white;
    border-radius: 20px; /* Уголки */
    box-shadow: 0 0 5px;
             }

#btnhome{
   background-color: transparent;
   width:20pt;
   height:20pt;
   text-align: center;
   border: 1px solid white;
   border-radius: 20px; /* Уголки */
   box-shadow: 0 0 5px;
   }

#btnleft:hover{
   color: #2c6b30;
   }

#btnhome:hover{
   color: #2c6b30;
   }


/* Стили модального окна: начало блока
.modalDialog {
   	    position: fixed;
   	    font-family: Times, ;
   	    top: 0;
   	    right: 0;
   	    bottom: 0;
   	    left: 0;
   	    background: rgba(0,0,0,0.8);
   	    z-index: 99999;
   	    -webkit-transition: opacity 400ms ease-in;
   	    -moz-transition: opacity 400ms ease-in;
   	    transition: opacity 400ms ease-in;
   	    display: none;
   	    pointer-events: none;
   	}

.modalDialog:target {
      display: block;
      pointer-events: auto;
        	}

.modalDialog > div {
      width: 600px;
      height: 750px;
      position: relative;
      margin: 5% auto;
      padding: 10px;
      border-radius: 10px;
      background-image: url(../COMMON/paper.jpg);

      /*background: -moz-linear-gradient(#fff, #999);
      background: -webkit-linear-gradient(#fff, #999);
      background: -o-linear-gradient(#fff, #999);

    	}

.close {
      background: #115926;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
    	}

.close:hover { background: white; }

/*Стили модального окна: окончание блока*/

.menubar {
     background-color: transparent;
     height: 25px;
     margin: 10 10;
     padding: 5px;
     border-radius: 5px; /* Уголки */
     box-shadow: 0 0 5px;
}

.round{
   border-radius: 200px; /* Радиус скругления */
   /*border: 3px solid white; /* Параметры рамки */
   /*box-shadow: 0 0 7px #666; /* Параметры тени */
  box-shadow: 0 0 0 1px white, 0 0 13px #333; /* Параметры теней */

 }

.schedule{
  font-family: Times;
  font-size: 0.9vw;
  padding: 5px; /* Поля вокруг текста */
  margin: 0 auto;
  background-color: transparent;
  border: 4px double #808080; /* Параметры границы */
  border-collapse: separate;
  border-radius: 5px; /* Уголки */
  box-shadow: 0 0 5px;
  }

/* Раскрывающееся содержимое
  .slide p,
  .slide [type="checkbox"]{
      display:none;
  }

  .slide [type="checkbox"]:checked ~ p {
      display:block;
  }

*/