@media (min-width: 769px) {
  .SizeText404 {
    font-size: 15rem;
  }
  }


@media (max-width: 768px)  {
   .SizeText404 {
      font-size: 10rem;
    }
}





/*Для блока Ноутбук*/

 @media (min-width: 769px) {
.px-5-1 {
    padding-right: 3rem!important;
    padding-left: 3rem!important;
}
}


@media (max-width: 768px)  {
   
.px-5-1 {
    padding-right: 0rem!important;
    padding-left: 0rem!important;
}
}



/*Стили для шаблона*/
  .batn-h:hover {
      border: 1px solid #187172;    
      background: #6d757e14;
    }  
  
    body {
      color: #535d68;
    }

    .grecaptcha-badge {
      display: none;
    }

    .fs-min {
      font-size: small;
    }
  
     a.fc-fff {
        color: #fff;
      }   
    
  	a.fc-fff:hover {
      color: #e1e1e1;
    }   
    
   .bg-secondary {
      background-color: #d6dbe1!important;
 	 }
    
     .jb-cookie {  
        box-shadow: none;
       }
  
      .border-top {
        border-top: none;
      }
      .fs-125rm {
        font-size: 1.25rem;
      }
    
      .burg:hover {    
           border: 3px solid #ccc0;
       }
     
     body {
      font-family: 'Jost';
      top: 0;
      z-index: 1; 
      width: 100%;
      height: 100%;
      background-image: url(/images/02-lines-07.svg);
      background-attachment: fixed;
      background-size: cover;
      }
    
	.fon {
      background-color: #ffffffad;
      width: 100%;
      height: 100%;
       }

    h1, h2, h3, h4, h5, h6 {
       font-family: 'Montserrat';
      }

    p {
       font-family: 'Jost';
      }
  
    :root {
        --cassiopeia-color-primary: #108385;
        --cassiopeia-color-link: #224faa;
        --link-color: #224faa;
        --link-color-rgb: 34,79,170;
        --cassiopeia-color-hover: #424077;
   	 } 

     .footer {
         color: #1abbbd;
          background-color: #fff;
          background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,#1bb5bc100%);
          margin-top: 1em;
       }

      .color-bl {
        color: #6a7581;      
       }
  
    
    
    
    .fixed-bottom {
        position: fixed;
     /*   bottom: 20px;
        left: 20px; */
        background: #f9f5f5;
    }  


      html { overflow-y: scroll; }

     .fоnt-italic { 
      font-style: italic;
    }

       textarea.form-control {    
         height: 30px;
        }
      .mod-list li a {
          text-decoration: underline;
        }

      .color-bl {
         color: var(--bs-body-color);      
        }

   .btn-bl {
      border: 1px solid #e6e1f5;
      border-radius: 16px;
      box-sizing: border-box;
      padding: 14px 18px;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
    }

  .fw-900 {
      font-weight: 900;
    }

  .fw-600 {
      font-weight: 600;
    }

   .color-bl {
      color: var(--bs-body-color);      
   }

   .card {  
      --bs-card-border-color: rgb(0 0 0 / 0%);
    }

    .a-ftr {
        color: var(--bs-body-color);
         text-decoration: none;
     } 

     .a-blk {
        color: #1abbbd;
        text-decoration: none;
     } 

     .a-blk:not(.btn):focus, a:not(.btn):hover {
        color: #0e7172;
     }  

     .a-blk:not([class]) {
        text-decoration: none;
      }

     a {
       color: #1abbbd;
       text-decoration: none;
     } 

      a:not(.btn):focus, a:not(.btn):hover {
        color: #0e7172;
     }  

     a:not([class]) {
     	text-decoration: none;
     }

  
  batn
  
    .batn {
      border-radius: 30px;   
      background: #2cb0b1;
      color: #fff;
    }

    .batn:hover {        
      color: #fff;
      background-color: #1abbbd;
      transition: background-color 0.3s;
      border-radius: 2em;     
    }

    .batn-f {
      width: 70%;
      text-transform: none;
      background: #614992;
      border-radius: 30px;
      color: #fff;
    }
    
    .batn-f:hover {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
      border-radius: 30px;
      width: 70%;
     }

    .batn-f:active {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
      border-radius: 30px;
      width: 70%;
     }
    
    .batn-f:focus {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
      border-radius: 30px;
      width: 70%;
    }
   
    .batn-footer {
      border: 6px solid;
      border-radius: 2em;
      width: 100%;
    }

    .batn-footer:hover {
      border: 6px solid #1abbbd;
      color: #fff;
      background-color: #1abbbd;
      transition: background-color 0.3s;
      border-radius: 2em;
      width: 100%;
    }

    .btn-link {    
       color: #1abbbd;
       border: none;
       font-size: x-large;
     }
     .btn-link:hover {
       border: none;
       color: #1ccfd1;
     }
     .btn-link:active {
       border: none;
     }

    [data-modals-element=modal] {
       z-index: 1050;
       position: fixed;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       overflow: hidden;
       outline: 0;
    }

     .w-auto {	
       max-width: 1920px;
       margin-right: auto;
       margin-left: auto;
     }

      .card {
         background-color: #fff0;   
       }

        .card {
           --bs-card-cap-bg: rgb(0 0 0 / 0%);
        }  

        p { 
          font-size: 1.25rem;
          font-weight: 300;
       }
  
  .bg-fff {
    background: #fff;
  }






/**
 * затемнение блока
 */


.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: .5;
}


.mw-1560 {
  max-width: 1560px;
}

.image-with-gradient-overlay {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
}

/**
 * Стиль 3
 *
 * «Гамбургер» превращается в стрелку, указывающую влево (класс htla).
 * Обычно подобная иконка указывает на скрытое меню, которое плавно появляется
 * с левой стороны и закрывается при повторном клике по иконке.
 */
.cmn-toggle-switch__htla {
  background-color: #32dc64;
}

.cmn-toggle-switch__htla span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.cmn-toggle-switch__htla span::before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}

.cmn-toggle-switch__htla span::after {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}

/* активное состояние, т.е. меню открыто */
.cmn-toggle-switch__htla.active {
  background-color: #18903c;
}

.cmn-toggle-switch__htla.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.cmn-toggle-switch__htla.active span::before,
.cmn-toggle-switch__htla.active span::after {
  width: 50%;
}

.cmn-toggle-switch__htla.active span::before {
  top: 0;
  -webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
      -ms-transform: translateX(42px) translateY(3px) rotate(45deg);
          transform: translateX(42px) translateY(3px) rotate(45deg);
}

.cmn-toggle-switch__htla.active span::after {
  bottom: 0;
  -webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
      -ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
          transform: translateX(42px) translateY(-3px) rotate(-45deg);
}


/*block uslug*/ 

 @media (min-width: 1417px) {
   .mh {          
    max-height: 300px;
    min-height: 300px;
   }
}

  @media (max-width: 1416px) and (min-width: 1125px) {
   .mh {          
    max-height: 400px;
    min-height: 400px;
   }
}

  @media (max-width: 1124px) and (min-width: 991px) {
  .mh {          
     max-height: 500px;
      min-height: 500px;
      }
}

  textarea.form-control {    
    height: 30px;
}
  
   /*Эффекты при наведении */ 
  .hover-effect-btn {
  position: relative;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0 0 0 / 28%); /* Настройка цвета и прозрачности для блока с заголовком */
  transition: background 0.5s ease;
}
.hover-effect-btn:hover .overlay {
  display: block;
  background: rgb(4 26 21 / 82%); /* Настройка цвета и прозрачности для блока с заголовком при наведении */
}
.title {
  position: absolute;
  width: 100%;
  left: 0;
  top: 25%; /* Отступ сверху */ 
  text-align: center;
  color: white; /* Цвет заголовка */
  z-index: 1;
  transition: top .5s ease;
}
.hover-effect-btn:hover .title {
  top: 10%; /* Отступ сверху при наведении */
}
.button {
  position: absolute;
  width: 100%;
  left:0;
  top: 65%; /* Отступ сверху */
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.button a {
  padding: 10px 40px; /* Отступ */
  text-align: center;
  background: #fff; /* Цвет кнопки */
  color: gray; /* Цвет текста */
  border: 1px solid white; /* Ширина, стиль и цвет границы */
  border-radius: 25px;
  z-index: 1;
  text-decoration: none;
}
.hover-effect-btn:hover .button {
  opacity: 1;
}
    
  
  /*Line */ 
/*.text1 {
    position: absolute;
    left: 40px;
    top: 29px;
    background: #fff;
    padding: 0 10px;
}
.text2 {
    position: absolute;
    right: 40px;
    top: 29px;
    background: #fff;
    padding: 0 10px;
}
  
  .btn-bl {
      border: 1px solid #e6e1f5;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 14px 18px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
  } */
  
  
.title-banner-left-black {
    overflow: hidden;
    text-align: right;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 600;
    color: #333;
}
  
  .title-banner-left-black:before {
    margin-left: -100%;
    left: -14px;
}
  
  .title-banner-left-black:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 1px;
    background-color: #808fb3;    
    position: relative;
}
  
  .title-banner-right-black {
    overflow: hidden;
    text-align: left;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 600;
    color: #333;
}
  
  .title-banner:after {
    margin-right: -100%;
    right: -14px;
}

.title-banner:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
   width: 100%;
    height: 1px;
    background-color: gray;
    position: relative;
   max-width: 20%;
}
    
   @media (max-width: 1482px) and (min-width: 1297px) {
   .title-banner:after {     
     max-width: 20%;
      }
	}
  
   @media (max-width: 1296px) and (min-width: 1139px) {
   .title-banner:after {        
     max-width: 15%;
      }
}
  
    @media (max-width: 1139px) and (min-width: 996px) {
   .title-banner:after {          
     max-width: 15%;
      }
}
      
   @media (max-width: 991px) and (min-width: 601px) {
   .title-banner:after {            
     max-width: 40%;
      }
}
  
   @media (max-width: 556px) and (min-width: 445px) {
   .title-banner:after {           
     max-width: 30%;
      }
}
    
   @media (max-width: 444px)  {
   .title-banner:after {             
     max-width: 0%;
      }
}
  
  .btn  {
    border-radius: 25px;
  } 
  
  
  /*Одинаковые блоки по высоте */
  
.row-flex, .row-flex > div[class*='col-'] { 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
 align-content: flex-start;
 flex:0;
}

.row-flex > div[class*='col-'] {
     margin:-.2px; 
}
  
  
  /*начало стиля jmg+btn-block */
  .img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}
  /*конец стиля кнопки*/
  
  .fоnt-italic { 
  font-style: italic;
}
  .fw-900 {
    font-weight: 900;
  }
  .fw-600 {
    font-weight: 600;
  }
  
  .text-dec{
 	 text-decoration: underline;
  }
  .mod-list li a {
    text-decoration: underline;
   }
  
  .footer .grid-child {
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 0.5em;
	} 
  
  .mod-list li {
    padding: 0;
	}
  
  .footer .mod-menu {
    position: relative;    
	}
 
  .btn-shadow { 
	color: var(--body-color);
	background-color: var(--body-bg);
	border-color: var(--focus);
	outline: 0;
	box-shadow: 0 0 0 0.25rem #2a69b740;
}

  .fon {
        background-color: #ffffffad;
    width: 100%;
    height: 100%;
 	 }
  
    h1, h2, h3, h4, h5, h6 {
     font-family: 'Montserrat';
    }

    p {
     font-family: 'Jost';
    }
  
    :root {
        --cassiopeia-color-primary: #108385;
        --cassiopeia-color-link: #224faa;
        --link-color: #224faa;
        --link-color-rgb: 34,79,170;
        --cassiopeia-color-hover: #424077;
   	 } 

     .footer {
         color: #1abbbd;
          background-color: #fff;
          background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,#1bb5bc100%);
          margin-top: 1em;
       }

      .color-bl {
        color: var(--bs-body-color);      
       }
  
  
      .card {  
      --bs-card-border-color: rgb(0 0 0 / 0%);
      	}
  
  
         .a-ftr {
            color: var(--bs-body-color);
            text-decoration: none;
       	 } 
  
  
    .a-blk {
            color: #1abbbd;
            text-decoration: none;
       	 } 
  
     .a-blk:not(.btn):focus, a:not(.btn):hover {
              color: #0e7172;
          }  

      .a-blk:not([class]) {
          text-decoration: none;
          }
  
  
       a {
            color: #1abbbd;
            text-decoration: none;
       	 } 
  
       a:not(.btn):focus, a:not(.btn):hover {
              color: #0e7172;
          }  

    
     
     .mod-list li.active>a {
          text-decoration: none;
           color: #372b50;
          }
       
      .metismenu.mod-menu .metismenu-item.active>a, .metismenu.mod-menu .metismenu-item.active>button, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item>button:hover {
            text-decoration: none;
        }
      
    .batn {
         border-radius: 30px;   
 	   background: #2cb0b1;
   		color: #fff;
      }
  
   .batn:hover {        
     color: #fff;
     background-color: #1abbbd;
     transition: background-color 0.3s;
     border-radius: 2em;     
    }
  
  
  
   .batn-f {
      width: 70%;
  	  text-transform: none;
      background: #614992;
      border-radius: 30px;
      color: #fff;
      }
  
   .batn-f:hover {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  
  .batn-f:active {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  .batn-f:focus {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  
      .batn-footer {
        border: 6px solid;
        border-radius: 2em;
        width: 100%;
      }
  
   .batn-footer:hover {
        border: 6px solid #1abbbd;
       color: #fff;
      background-color: #1abbbd;
          transition: background-color 0.3s;
        border-radius: 2em;
        width: 100%;
      }
  
      .btn-link-1 {    
        color: #1abbbd;
         border: none;
         font-size: x-large;
      }
       .btn-link-1:hover {
         border: none;
         color: #1ccfd1;
        }
       .btn-link-1:active {
          border: none;
        }

        [data-modals-element=modal] {
          z-index: 1050;
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          overflow: hidden;
          outline: 0;
    	  }

       .w-auto {	
          max-width: 1600px;
          margin-right: auto;
          margin-left: auto;
          }
      
       .w-auto-1620 {	
          max-width: 1600px;
          margin-right: auto;
          margin-left: auto;
          }

        #digi_showcase_137 .overlay {
          background-image: none;
          background-color: rgb(0 0 0 / 0%);
          transition: background-color 0.3s;
  		  }
  
        #digi_showcase_137 .overlay:not(:hover) *:not(.item-content) {
            color: #22262a;
            transition: color 0.3s;
            }

          #digi_showcase_137 .overlay:not(:hover) *:not(.item-content) {
            color: #242426;
            transition: color 0.3s;
       		 }

          #digi_showcase_137 .overlay .item-content {
            opacity: 1;
            transition: opacity 0.3s, color 0.3s;
       		 }

          .card {
            background-color: #fff0;   
       		 }

      	  .card {
              --bs-card-cap-bg: rgb(0 0 0 / 0%);
       		 }  
          .box-sh {
            border: 1px solid #1111111a;
            box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
        	  }

           p { 
            font-size: 1.25rem;
            font-weight: 300;
             }












/*Конец Стиль шаблона home*/ 


/*Стиль шаблона*/ 
.text1 {
    position: absolute;
    left: 40px;
    top: 29px;
    background: #fff;
    padding: 0 10px;
}
.text2 {
    position: absolute;
    right: 40px;
    top: 29px;
    background: #fff;
    padding: 0 10px;
}
  
  .btn-bl {
      border: 1px solid #e6e1f5;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 14px 18px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
  }
  
  /*Одинаковые блоки по высоте */
  
.row-flex, .row-flex > div[class*='col-'] { 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
 align-content: flex-start;
 flex:0;
}

.row-flex > div[class*='col-'] {
     margin:-.2px; 
}
  
  
  
  
  /*начало стиля jmg+btn-block */
  .img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}
  /*конец стиля кнопки*/
  
  
  
  
  .fоnt-italic { 
  font-style: italic;
}
  .fw-900 {
    font-weight: 900;
  }
  .fw-600 {
    font-weight: 600;
  }
  
  .text-dec{
 	 text-decoration: underline;
  }
  .mod-list li a {
    text-decoration: underline;
   }
  
  .footer .grid-child {
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 0.5em;
	} 
  
  .mod-list li {
    padding: 0;
	}
  
  .footer .mod-menu {
    position: relative;    
	}
 
  .btn-shadow { 
	color: var(--body-color);
	background-color: var(--body-bg);
	border-color: var(--focus);
	outline: 0;
	box-shadow: 0 0 0 0.25rem #2a69b740;
}

  
  
  body {
    font-family: 'Jost';
    top: 0;
    z-index: 1; 
    width: 100%;
    height: 100%;
    background-image: url(http://omec3.hoper-it.ru/images/02-lines-07.svg);
    background-attachment: fixed;
    background-size: cover;
	}
 
 .fon {
        background-color: #ffffffad;
    width: 100%;
    height: 100%;
 	 }
  
    h1, h2, h3, h4, h5, h6 {
     font-family: 'Montserrat';
    }

    p {
     font-family: 'Jost';
    }
  
    :root {
        --cassiopeia-color-primary: #108385;
        --cassiopeia-color-link: #224faa;
        --link-color: #224faa;
        --link-color-rgb: 34,79,170;
        --cassiopeia-color-hover: #424077;
   	 } 

     .footer {
         color: #1abbbd;
          background-color: #fff;
          background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,#1bb5bc100%);
          margin-top: 1em;
       }

      .color-bl {
        color: var(--bs-body-color);      
       }
  
  
      .card {  
      --bs-card-border-color: rgb(0 0 0 / 0%);
      	}
  
  
         .a-ftr {
            color: var(--bs-body-color);
            text-decoration: none;
       	 } 
  
  
    .a-blk {
            color: #1abbbd;
            text-decoration: none;
       	 } 
  
     .a-blk:not(.btn):focus, a:not(.btn):hover {
              color: #0e7172;
          }  

      .a-blk:not([class]) {
          text-decoration: none;
          }
  
  
       a {
            color: #1abbbd;
            text-decoration: none;
       	 } 
  
       a:not(.btn):focus, a:not(.btn):hover {
              color: #0e7172;
          }  

      a:not([class]) {
          text-decoration: none;
          }
     
     .mod-list li.active>a {
          text-decoration: none;
          }
       
       .metismenu.mod-menu .metismenu-item.active>a, .metismenu.mod-menu .metismenu-item.active>button, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item>button:hover {
            text-decoration: none;
        }
      
      .batn {
         border-radius: 30px;   
    background: #2cb0b1;
    color: #fff;
      }
  
   .batn:hover {        
     color: #fff;
     background-color: #1abbbd;
     transition: background-color 0.3s;
     border-radius: 2em;     
    }
  
  
  
   .batn-f {
      width: 70%;
  	  text-transform: none;
      background: #614992;
      border-radius: 30px;
      color: #fff;
      }
  
   .batn-f:hover {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  
  .batn-f:active {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  .batn-f:focus {       
      color: #fff;
      background-color: #716193;
      transition: background-color 0.3s;
       border-radius: 30px;
      width: 70%;
      }
  
      .batn-footer {
        border: 6px solid;
        border-radius: 2em;
        width: 100%;
      }
  
   .batn-footer:hover {
        border: 6px solid #1abbbd;
       color: #fff;
      background-color: #1abbbd;
          transition: background-color 0.3s;
        border-radius: 2em;
        width: 100%;
      }
  
      .btn-link-1 {    
        color: #1abbbd;
         border: none;
         font-size: x-large;
      }
       .btn-link-1:hover {
         border: none;
         color: #1ccfd1;
        }
       .btn-link-1:active {
          border: none;
        }

        [data-modals-element=modal] {
          z-index: 1050;
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          overflow: hidden;
          outline: 0;
    	  }

       .w-auto {	
          max-width: 1600px;
          margin-right: auto;
          margin-left: auto;
          }


        #digi_showcase_137 .overlay {
          background-image: none;
          background-color: rgb(0 0 0 / 0%);
          transition: background-color 0.3s;
  		  }
  
        #digi_showcase_137 .overlay:not(:hover) *:not(.item-content) {
            color: #22262a;
            transition: color 0.3s;
            }

          #digi_showcase_137 .overlay:not(:hover) *:not(.item-content) {
            color: #242426;
            transition: color 0.3s;
       		 }

          #digi_showcase_137 .overlay .item-content {
            opacity: 1;
            transition: opacity 0.3s, color 0.3s;
       		 }

          .card {
            background-color: #fff0;   
       		 }

      	  .card {
              --bs-card-cap-bg: rgb(0 0 0 / 0%);
       		 }  
          .box-sh {
            border: 1px solid #1111111a;
            box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
        	  }

           p { 
            font-size: 1.25rem;
            font-weight: 300;
             }
    <!--Стиль шаблона конец-->
  



















.text-dec{
 	 text-decoration: underline;
  }


/*.section-full {
  background: #0d6efd00;
}*/
  
.card {
--bs-card-border-color: none;
}

root {
	color: #1abbbd;
}



.bis {
    width: 1em;
    height: 1em;
    fill: currentcolor;
    font-size: 3rem;
  color: #089799;
}

.bis:hover {
    width: 1em;
    height: 1em;
    fill: currentcolor;
    font-size: 3rem;
  color: red;
}





/*Адаптивность блоков*/
 @media (min-width: 768px) {
   .p-yx-5 {
         padding: 3rem!important;
      }
 }

@media (min-width: 1200px) {
.display-1 {
    font-size: 96px;
}
}



p {  
    font-size: x-large;
}


.rotate-450 { 
  font-size: 31px;
}

.rotate-450:hover {
  color: red;
}


.fs-office {
  font-size: 1.5em;
}



/*Фиксация блока*/
 @media (min-width: 900px) {
   .fix-div {
      position: sticky;
       top: 120px;
      }
}


  /*модуль новости*/
   .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { 
   font-family: Arial,sans-serif;
    font-weight: 500; 
    color: #1abbbd;
}








  @media (min-width: 768px) {
     .lead {
        font-size: 1.5em;
    }
}
  
    @media (min-width: 768px) {
     .fs-8rem {
        font-size: 8rem;
            text-transform: uppercase;
    }
}
  
    @media (min-width: 768px) {
     .fs-5rem {
        font-size: 5rem;
       text-transform: uppercase;
    }
}
  
  @media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1600px;
}
    
/*модуль новости*/
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
     user-select: none;
   }

 @media (min-width: 768px) {
   .bd-placeholder-img-lg {
       font-size: 3.5rem;
      }
   }



  @media (min-width: 768px) {
     .lead {
        font-size: 1.5em;
    }
}
  
 @media (min-width: 768px) {
     .fs-8rem {
      font-size: 8rem;
      text-transform: uppercase;
    }
}
  
@media (min-width: 768px) {
     .fs-5rem {
        font-size: 5rem;
       text-transform: uppercase;
    }
}
  
  @media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1600px;
}
}



@media (max-width: 1194px) {
.visible-treug {
  display: none;
}
}

    
.treug-230 {
width: 0;
height: 0;
border-style: solid;
border-width: 220px 0 250px 300px;
border-color: transparent transparent transparent #1abbbd;
text-transform: uppercase;
font-size: 1.5em;
}


<!-- Custom produkt -->
.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    transform: rotate(30deg);
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}


.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

<!-- Custom jumbotron -->

@media (max-width: 1200px) { 
  .fs-8rem {
    font-size: 8rem;  
  }
 }     

@media (max-width: 1200px) { 
  .fs-5rem {
  font-size: 5rem;  
  }
 } 

@media (max-width: 768px) { 
  .text-align-right-logo {
    float: right;
    display: block;
  }
 } 
  
.text-align-left-menu {
  text-align: left;
}

.offcanvas-inner .nav-pills {
    display: none !important;
}

/* CLASSIC BANNER */
.container-banner .banner-overlay {
    height: max(300px, 50vh); /* по умолчанию 50vh в Cassiopeia */
}
@media (min-width: 768px) {
    .container-banner .banner-overlay {
        height: max(300px, 45vh);
    }
}
@media (min-width: 992px) {
    .container-banner .banner-overlay {
        height: max(300px, 40vh);
    }
}
@media (min-width: 1200px) {
    .container-banner .banner-overlay {
        height: max(300px, 35vh);
    }
}

/* CLASSIC BANNER */
.container-banner .banner-overlay .overlay {
    background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7));
}

<div class="video-banner">
  <div class="text">
    <h1 class="display-4 text-thin">Title</h1>
    <p class="lead">Text</p>
    <p><a class="btn btn-primary btn-lg" href="#">Link</a></p>
  </div>
  <video poster="https://assets.codepen.io/6093409/river.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
   <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4" />
  </video>
</div>

div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    height: calc(100vh - 152px); /* full screen height minus the fixed height of my menu header */
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 50%);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming it hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.text a {
    color: white;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-primary), var(--cassiopeia-color-hover));
    opacity: .7;
}
div.video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
    .bg-fff {
      background: #fff;
    }