html { height: 100%; }
body {
    min-height:100%; 
    position:relative; 
    padding-bottom: 50px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background-image: url(../image/bggrey0.jpg);
    background-position: center;
    background-repeat: repeat;
}
.logomenu{
    color: #f6f7fa;
    font-family: 'Russo One', sans-serif;
    text-align: center;
    font-size:18pt;
}
.online{
    text-align:center;
    font-size:10pt;
    color:#072c8a
}

.closed{
    float:right;
    font-size:1.3rem;
    line-height:1;
    color:#d90606;
    text-shadow:1px 1px 0px #f5f5f5, -1px 1px 0px #f5f5f5, -1px 2px 3px #f5f5f5;
    margin-left:10px;
}
.closed:not(:disabled):not(.disabled){
    cursor:pointer;
}
.closed:focus,.closed:hover{
    text-decoration:none;
    color:#072c8a;
}
.closen{
    float:right;
    font-size:18pt;
    line-height:1;
    color:#072c8a;
    margin: 2px 0px 0 224px;
    position:absolute;
    opacity: 0.8;
}
.closen:not(:disabled):not(.disabled){
    cursor:pointer;
}
.closen:focus,.closen:hover{
    text-decoration:none;
    color:#9c1c1c;
     transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
}
.names{
    padding-left:5px;
    padding-right:5px;
    margin-bottom:0px;
    padding-top:.5rem;
    padding-bottom:.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Модальное окно для удаления профилей */
.okno {
    text-align: center;
    padding: 10px;
    background-color: #f6f7fa;
    display: none;
    position: fixed;
    margin: auto;
    box-shadow: 0px 0px 15px 3px #1456dc;
    font-size:12pt;
    z-index:+1;
}
.oknos {
    text-align: center;
    background: #f1f1f1;
    display: none;
    position: fixed;
    margin: auto;
    box-shadow:0px 0px 6px 2px #1d5dda;
    font-size:12pt;
    font-family:'Russo one', sans-serif;
    z-index:+1;
}
.oknos:target {display: block;}
.shapka {
    text-shadow:0px 0px 2px black, 0px 1px 1px black;
    padding:10px;
    font-size:14pt;
    color:#f6f5f8;
    background-image:url( /static/image/bg768.jpg);
    background-size:cover;
    box-shadow: 0px 0px 6px 2px #1d5dda;
}

.okno:target {display: block;}
.card {
    border:none;
      }
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');
.block {
    position:relative;
    background:rgb(255, 255, 255);
    min-height:226px;
    margin-left:10px;
    margin-right:10px;
    border-radius:10px;
    box-shadow: inset 0 0 35px 5px rgb(226, 225, 220), 0px 0px 7px 0px rgb(112 112 106 / 82%);
    overflow:hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
a:hover{
    text-decoration:none;
}
.navbar-toggle{
    outline:none;
}
.dropdown-menu {
    background-image: url(../image/dropdown.jpg);
    margin:0px;
    border:none;
    border-radius:10px;
    background-size:cover;
    box-shadow:0px 0px 2px 0px #062666;
    z-index:1040;
}
div.dropdown-menu.show{
    margin-left:0px;
}
.dropdown-item {
    color:#f1efeb;
}
.h5 {
    color:#d3d1ec;
    }
.sandwiches.container-fluid{
    margin-bottom:185px;
    font-family: 'Inter', sans-serif;
    font-size:12pt;
    color:#2c84cb;
}
.pava{
    padding-top:3%;
    padding-left:2%;
    
}
.ava{
    width:45%
}
.ava1{
    width:35%;
    padding-top: 8px;
    padding-left: 8px;
    padding-bottom: 13px;
}
.bb{
    border-bottom: 1px solid #fff;
}
.bsb{
    box-shadow:0px 0px 6px 2px #1d5dda;
}
.pcol{
    padding-left: 0px;
    padding-right: 0px;
}
.vam{
    vertical-align: middle;
}
.bg{
    background: #f9f9f9c2;
}
.data{
    text-align:center;
    font-size:10pt;
    color: #646060;
}
 .stend {background-image:url('../image/stena.png');
 background-position: 0 0;
background-repeat: no-repeat;
background-size:  100% 100%;
}
.stend1 {background-image:url('../image/wall1.jpg');
 background-position: 0 0;
background-repeat: no-repeat;
background-size:  100% 100%;
box-shadow: 2px 0px 6px 0px #000;}
/* xs (<=543px) */
@media (max-width: 575px) { h4{font-size: 11pt} }
@media (max-width: 575px) { h5{font-size: 19pt} }
@media (max-width: 575px) { h3{font-size: 11pt;margin-top:0px} }
@media (max-width: 575px) { .panel{font-size: 11pt} }
@media (max-width: 575px) { .stroka{font-size: 11pt} }
@media (max-width: 575px) { div.sandwiches.container-fluid{margin-top:94px} }

/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) { h4{font-size: 14pt} }
@media (min-width: 576px) and (max-width: 767px) { h5{font-size: 20pt} }
@media (min-width: 576px) and (max-width: 767px) { h3{font-size: 14pt;margin-top:20px} }
@media (min-width: 576px) and (max-width: 767px) { div.sandwiches.container-fluid{margin-top:80px} }
@media (min-width: 576px) and (max-width: 767px) { .panel{font-size: 12pt} }
@media (min-width: 576px) and (max-width: 767px) { .stroka{font-size: 12pt} }
/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) { h4{font-size: 13pt} }
@media (min-width: 768px) and (max-width: 991px) { h5{font-size: 18pt} }
@media (min-width: 768px) and (max-width: 991px) { h3{font-size: 15pt;margin-top:20px} }
@media (min-width: 768px) and (max-width: 991px) { .panel{font-size: 11pt} }
@media (min-width: 768px) and (max-width: 991px) { .stroka{font-size: 11pt} }
@media (min-width: 768px) { div.sandwiches.container-fluid{margin-top:94px} }
/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) { h4{font-size: 12pt} }
@media (min-width: 992px) and (max-width: 1199px) { h5{font-size: 20pt} }
@media (min-width: 992px) and (max-width: 1199px) { h3{font-size: 16pt;margin-top:10px} }
@media (min-width: 992px) and (max-width: 1199px) { .panel{font-size: 11pt} }
@media (min-width: 992px) and (max-width: 1199px) { .stroka{font-size: 11pt} }

/* xl (>=1200) */
@media (min-width: 1200px) { h4{font-size: 14pt} }
@media (min-width: 1200px) { h5{font-size: 21pt} }

@media (min-width: 1200px) { .panel{font-size: 12pt} }
@media (min-width: 1200px) { .stroka{font-size: 12pt} }
@media (min-width: 1200px) and (max-width: 1700px){ h3{font-size: 18pt;margin-top:30px} }
@media (min-width: 1701px) { h3{font-size: 22pt;margin-top:50px} }

@media (max-width: 575px)  { .descript1{font-size: 14pt;} }
@media (min-width: 576px) and (max-width: 767px) { .descript1{font-size: 16pt;} }
@media (min-width: 768px) and (max-width: 991px) { .descript1{font-size: 14pt;} }
@media (min-width: 992px) and (max-width: 1449px) { .descript1{font-size: 15pt;} }
@media (min-width: 1450px){ .descript1{font-size: 16pt;} }

@media (max-width: 575px)  { .descript{font-size: 12pt;} }
@media (min-width: 576px) and (max-width: 767px) { .descript{font-size: 14pt;} }
@media (min-width: 768px) and (max-width: 991px) { .descript{font-size: 12pt;} }
@media (min-width: 992px) and (max-width: 1449px) { .descript{font-size: 13pt;} }
@media (min-width: 1450px){ .descript{font-size: 14pt;} }

@media (max-width: 767px) { .bg_nav{background-image: url(../image/dropdown.jpg);} }
@media (min-width: 768px) { .bg_nav{background-image: url(../image/menu.jpg);} }
@media (max-width: 767px) { .bg_futer{background-image: url(../image/dropdown.jpg);} }
@media (min-width: 768px) { .bg_futer{background-image: url(../image/futer.jpg);} }

.descript1{
    color:#9c1c1c;
}
.descript{
    color:#072c8a;
}
.block p {
    font-size:16px;
    font-weight:bold;
}        
h4{

    font-family: 'Russo One', sans-serif;
    text-align: center;
}
.w-50{
    padding-left: 5%;
}
a.fdbtn_red{
    display: inline-block;
    background-image: url(../image/btn_red.jpg);
    background-size: cover;
    border: none;
    font-family: 'Inter', sans-serif;
    color: white;
    text-decoration: none;
    padding: .5em 2em;
    outline: none;
}
a.dfbtn_red:hover{
    color: #7abaff;
    text-decoration: none;
}
#letter1{
    fill:#072c8a;
    height:23px;
}
#letter1:hover{
    fill:#9c1c1c;
}
/* Изменил адрес */
.bg_nav {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 35px 5px rgb(5 88 211 / 23%), inset 0 2px 0px 0px rgb(255 255 255),inset 0 -2px 1px 0 rgb(0 0 0 / 25%), 0px 2px 3px 0px #000000;
}
.bg-primary{background-image: url(../image/card_640.jpg);
    background-position: center;
    background-size: cover;
  text-shadow: 2px 2px 2px black;}

.bg_futer{
    position: absolute; 
    left: 0;
    right: 0;
    bottom: 0;
}

.card{
    background-color:inherit;
}
.card-header{
    background-color:#fbfbfbd1;
}
.btn-outline-primary{border: none;}
.portfolio-item {     /* Отступы между карточками class="card" */
  margin-bottom: 30px;
}
.navbar-nav li {
  padding-right: 5px;
}
.nav-link , .navbar-brand{
    color: #f1efeb;
    cursor: pointer;
}
.nav-link{
    font-size: 10pt;
    text-align: center;
    padding:.7rem 0.8rem;
    border-radius:20px;
    line-height: 1;
}
.dropdown-item:focus, .dropdown-item:hover,.dropdown-item.active, .dropdown-item:active{
    color:#f1efeb;
    background-image: url(../image/red1.jpg);
    background-size:cover;
}
.soc{padding-top: 10px;}
.navbar-collapse{
    justify-content: flex-end;
}
.navbar-toggler{
    background: none;
    border-color: rgba(255,255,255,.99) !important;
}
.mb2{
    margin-bottom:2px;
}
.m4{
    margin:4px;
}
.btn:not(:disabled):not(.disabled) {
    outline: none;
}
.btn:focus{
    outline: none !important;
}
.btn-blue{
    background-image: url(../image/knopka1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow:inset 0px 2px 0px 0px rgb(225 224 219 / 35%), inset 0 -2px 0px 0 rgb(4 14 46), 0px 2px 4px 0px #144dc9c7;
    box-shadow: inset 0px 2px 0px 0px rgb(225 224 219 / 35%), inset 0 -2px 0px 0 rgb(4 14 46), 0px 2px 4px 0px #144dc9c7;
    font-size: 13pt;
    font-family: 'Inter', sans-serif;
    border: none;
    color:white;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
}
.btn-blue:active{
   background-image: url(../image/knopka1.jpg) !important;
}
.btn-blue1{
    box-shadow: inset 0px 1px 0px 0px rgb(187 188 205), inset 0 -2px 0px 0 rgb(126 117 117), -2px 0px 2px 0px #00000096, 2px 0px 2px 0px #00000096;
    font-size: 13pt;
    font-family: 'Inter', sans-serif;
    border: none;
    color: #072c8a;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
}
.btn-red1{
    background-image: url(../image/red1.jpg) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 12pt; font-family: 'Inter', sans-serif;
    color:white;
    border:none;
    padding-bottom: 0.5rem;
    text-shadow:none;
    box-shadow:inset 0px 2px 0px 0px rgb(151 146 145 / 45%), inset 0 -2px 0px 0 rgb(118 4 4), 0px 2px 4px 0px #3602029e;
}
.btn-red1:active{
   background-image: url(../image/red1.jpg) !important;
}
.btn-red{
  background-image: url(../image/knopkared.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0px 2px 0px 0px rgb(225 224 219 / 35%), inset 0 -2px 1px 0 rgb(0 0 0 / 53%), 0px 2px 3px 0px #6f0c08b5;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  border: none;
  color:white;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
}
.btn-red:active{
   background-image: url(../image/knopkared.jpg) !important;
}
.btn-blue:hover{
    text-decoration: none;
    box-shadow: inset 0px 0px 2px 0px #f6f7fa;
    color:#f1efeb;
}
.btn-red:hover{
    text-decoration: none;
    box-shadow: inset 0px 0px 2px 0px #f6f7fa;
    color:#f1efeb;
}
.btn-red1:hover{
    box-shadow: inset 0px 0px 2px 1px #6a6565;
    color:#f1efeb;
}
.btn-blue1:hover{
    box-shadow: inset 0px -1px 2px 0px #5b5353;
    color:#072c8a;
}

.load-more__btn-wrap{
    width:100%;
    text-align:center;
    font-family: 'Russo one', sans-serif;
    font-size:14pt;
    color:#072c8a;
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:0px;
    background: #f9f9f9c2;
}
.load-more__btn{
    color:#072c8a;
    text-decoration:none;
}
.load-more__btn:hover{
    color:#9c1c1c;
    text-decoration:none;
}
.textowerflow{
    overflow: hidden;
    
    verflow: ellipsis
  }
.clip{
    width:100%;
    position:relative;
    padding-top:56.25%
}
.wordwrap{
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
.left-col{
  padding: 5px;
  background: #FFFFFF;
}
.category-wrap {
  padding: 15px;
  background: white;
  width: 100%;
  margin-top: 3px;
  box-shadow: 1px 2px 8px rgba(0,0,0,.1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #1e52c6;

}
.category-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-wrap li {margin: 12px 0 0 0px;}

.category-wrap a {
  text-decoration: none;
  display: block;
  font-size: 15px;
  color: #007bff;
  padding: 3px;
  position: relative;
  transition: .3s linear;
}
.category-wrap a:after {
  position: absolute;
  right: 5px;
  color: white;
}
.category-wrap a:hover {
  background: #007bff;
  color: white;
}
.category-wrap .active {
  background: #80C1AF;
  color: white;
}

::-webkit-scrollbar-button {

   background-repeat:no-repeat;
   width:5px;
   height:0px
   }

 ::-webkit-scrollbar-track {
   background-color:#ecedde
   }

 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 0px;
   border-radius: 0px;
   background-color:#6dc0c8;
   }

 ::-webkit-scrollbar-thumb:hover{
   background-color:#56999f;
   }

 ::-webkit-resizer{

   background-repeat:no-repeat;
   width:4px;
   height:0px
   }

 ::-webkit-scrollbar{
   width: 4px;
   }
.card-img-top{max-width:100%;
  height: auto;}
.bg_card{
   background-image: url(../image/card_6411.jpg);
   background-repeat: repeat;
   background-position: center;
   background-size:100% auto;
   box-shadow: 0px 0px 6px 0px #07235cc2, 0px 0px 2px 0px #07235c;;
   color: #f1efeb;
   border-radius:0.25rem;
   font-family: 'Inter', sans-serif;
   font-size:13pt;
}

.card-columns{
    -webkit-column-count:1;
    -moz-column-count:1;
    column-count:1;
    -webkit-column-gap:1.25rem;
    -moz-column-gap:1.25rem;
    column-gap:1.25rem;
    -webkit-perspective: none;
    
}
.card-columns .card{
  display:block;
  width:100%;
  border-color: #1e52c6;
  /* Изменил адрес файл и адрес */
  background-image: url(../image/card_640.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
  -moz-page-break-inside: avoid;
  break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  }
.text-shadow {
color:#222;
font-weight:bold;
font-size: 1.2em !important;
text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}
.avatarka{
  float:left;
  width:90px;
  height:90px;
  border:2px solid;
  border-color:white; 
}

span.online_icon.min{
    margin-top: 80px;
    margin-left: -7px;
    position: absolute;
    height: 10px;
    width:10px;
    background-color: #2cc115;
    border-radius: 50%;
    border:2px solid white;
}
  .search {
    padding: 20px;
  }
  input.poisk {
    border-radius: 3px;
    border: none;
    padding: 8px;
    color: black;
    background: #dee2e6;
    width: 90%;
    font-size: 14px;
    box-shadow: 2px 0px 6px 0px #000;
    font-family: 'Inter', sans-serif;
  }
  .about {
    float: left;
    margin-top: 0px;
    padding-left: 6px;
  }
li.clearfix {
  display:inline-block;
}
.clearfix{
  list-style-type: none;
  margin-right: 25px;
  margin-left:-20px;
  font-size: 12pt;
  font-family: 'Inter', sans-serif;
  color:#dee2e6;
}
.x{
    color: #dedfe1;
    padding-left:5px;
    padding-right:5px;
    padding-top:0px;
    padding-bottom:0px;
}
.fon{
    margin-left:1rem;
    margin-right:1rem;
    padding-top:1rem;
}
.whitecards{
    background: rgba(251,251,251,0.5);
    border-radius: 1.5rem;
    box-shadow: inset 0 1px 0px 0px rgb(255 255 255 / 61%), inset -1px 0px 0px 0px rgb(255 255 255 / 42%), inset 1px 0px 0px 0px rgb(255 255 255 / 42%), inset 0 -2px 0px 0 rgb(0 0 0 / 32%), 0px 0px 3px 0px #787772;
}
.cards{

    border-radius: 1.5rem;
    box-shadow: inset 0 1px 0px 0px rgb(255 255 255 / 61%), inset -1px 0px 0px 0px rgb(255 255 255 / 42%), inset 1px 0px 0px 0px rgb(255 255 255 / 42%), inset 0 -2px 0px 0 rgb(0 0 0 / 32%), 0px 0px 3px 0px #787772;
}
.caption{
    text-align:center;
    margin-left:6%;
    margin-right:6%;
}
.w50{
    width:50%;
}
.contentboxes{
    display:flex;
    padding-top:7%;
}
.hide{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pred{
    font-family:'Russo one', sans-serif;
    color:#9B59B6;
    font-size:13pt;
    text-align:center;
}
.pblue{
    font-family:'Russo one', sans-serif;
    color:#072c8a;
    font-size:13pt;
    text-align:center;
}
.inset{
    border-radius: 50%;
    border:2px solid #1a3c8f;
}
.inset:hover{
    border:2px solid #9c1c1c;
    }
.white{
    background: #f9f9f9c2;
}
.opa{
    opacity: 0
}
.height{
    height:35px;
}
.height1{
    height:21px;
}
.height2{
    height:40px;
}
.height3{
    height:55px;
}
.height4{
    height:25px;
}
.glava{
    text-align:center;
    font-family: 'Russo one', sans-serif;
    font-size:14pt;
    padding-bottom:5px;
    padding-top:15px;
    margin-bottom:0px;
    background: #f9f9f9c2;
}
.glava1{
    text-align:center;
    padding-top:0px;
    padding-bottom:15px;
    margin-bottom: 0px;
    background: #f9f9f9c2;
}
.box{
    background-image: url( ../image/wall22.jpg);
    background-size:cover;
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.box1{
    background-image: url( ../image/stena4.jpg);
    background-size:cover;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
.boxes{

    background-size:cover;
    width: 100%;
    padding-top: 62.5%;
    position: relative;
    box-shadow: -1px 0px 3px 0px #5c0a08, 1px 0px 3px 0px #0f2b57;
    border-radius: 10px;
}

.content{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow:hidden;
}
.card-title{
    font-family:'Russo one', sans-serif;
    text-align:center;
    font-size:14pt;
}

.caption1{
    color:#072c8a; 
    font-size: 12pt; 
    font-family: 'Russo one', sans-serif; 
    text-align:center;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding-top:.3rem;
    padding-bottom:.3rem;
}
.panel{
    color:#f6f7fa;
    text-align: center;
    background-size: cover;
    background-color: #072c8a !important;
}
.zaglavie{
    color: #9c1c1c;
    font-size:16pt;
    text-align: center;
    font-family: 'Russo one', sans-serif;
    padding:1rem;
}
.stroka{
    color: #2c84cb;
    font-family: 'Inter', sans-serif;
    text-align: center;
}
.descript0{
    text-align: center;
    color: #2c84cb;
    font-size:12pt;
}
.descript1{
    text-align: center;
    font-family: 'Russo one', sans-serif;
}
.zagolovok{
    box-shadow:0px 0px 2px 0px #2c84cb;
    background-color:#f9f9f9c2;
    font-family: 'Inter', sans-serif;
    text-align:center;
    color: #2c84cb;
    padding-bottom:10px;
    padding-top:10px;
    font-size:13pt;
}
.boxesrama{
    background-image: url( ../image/opacity.png);
    background-size:cover; 
    width: 100%;
    position: relative;
    padding-top:100%;
}
.css-modal-details summary {
    display: inline-flex;
}
.css-modal-details details[open] summary {
    cursor: default;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1030;
    width: 100%;
    height: 100%;
}
.css-modal-details details .cmc {
    display:flex;
    align-items:center;
    justify-content:center;    
}
.css-modal-details details[open] .cmc {
    pointer-events: none;
    z-index: 1040;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgb(44 44 44 / 70%);
    border-radius:10px;
}
.css-modal-details details .cmt {
    font-family: Inter, sans-serif;  
    font-size: 16px;
    color:#072c8a;
    width:100%;
    max-width: 600px;
    max-height: 100%;
    transition: 0.5s;
    background: rgb(233 238 245);
    box-shadow: 0px 0px 10px 0px #4d84d7;
    text-align: center;
    overflow: auto;
    border-radius:10px;
    padding:15px;
}
.css-modal-details details[open] .cmt {
    animation: scale 0.5s ease;
    z-index: 1040;
}
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgb(44 44 44 / 0%);
        }
    100% {
        background: rgb(44 44 44 / 70%);
        }
}
ul.bg_nav{
    border-radius:0.25rem;
}
.btn-danger{
    text-shadow:none;
}
.pwhite{
    text-align:center;
    color:white;
    font-size: 16pt;
    font-family: 'Russo one', sans-serif;
    text-shadow:0px 0px 2px black, 0px 1px 1px black;
}
.new {
    font-family: Inter, sans-serif;  
    font-size: 16px;
    color:#072c8a;
    background: #f9f9f9c2;
    box-shadow: 0px 0px 6px 2px #1d5dda;
    text-align: center;
    overflow: auto;
    border-radius:0.25rem;
}
h5{
    font-family: 'Caveat', cursive;
}
.h5block{
    padding-left: 20px;
    padding-right: 20px;
}
.bsm{
    box-shadow: inset 0 0 35px 5px rgb(5 88 211 / 23%),inset 0 2px 0px 0px rgb(255 255 255), inset 0 -2px 1px 0 rgb(0 0 0 / 25%), 0px 1px 2px 0px #000000;
}
.knopka{
    box-shadow: inset 0px 2px 0px 0px rgb(225 224 219 / 35%), inset 0 -2px 1px 0 rgb(0 0 0 / 51%), 0px 2px 2px 0px #5e616a;
    background-image: url(../image/knopka.jpg);
    background-size:cover;
}
.width{
    width:106px;
}
.width1{
    width:159px
}
.width2{
    width:360px
}
.width3{
    width:588px;
}
.lava{
    width:85px;
    border-radius:50%;
    margin:15px;
    float:left;
    border:2px solid #072c8aa6;
}
.lava:hover{
    border:2px solid #9c1c1c9e;
     transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    }
.nav-link:hover,.nav-link:active,.nav-item.dropdown.show{
    background-image: url(../image/knopkared.jpg);
    background-size:cover;
    color:#f1efeb;
}
.nav-link.active.dropdown-toggle{
    background-image: url(../image/knopkared.jpg);
    background-size:cover;
    box-shadow:inset 0px 0px 2px 1px #6a6565;
}
.nav-link.show{
    box-shadow:inset 0px 0px 2px 1px #6a6565;
    background-image: url(../image/knopkared.jpg);
    background-size:cover;
}
.nav-item{
    border-radius:20px;
    margin-bottom:0.5rem;
    margin-right:0.5rem;
}
.ps{
    position: absolute;
    bottom: 0;
    margin-bottom:10px;
    width:100%;
    font-size: 14pt;
    font-family: 'Russo one', sans-serif;
}
.pic{
    border-radius:1rem 1rem 0 0;
}
#letter2{
    fill:#072c8a;
    height:25px;
    text-decoration:none;
}
#letter2:hover{
    fill:#9c1c1c;
}
.m48{
    margin-top:4px;
    margin-bottom:8px;
}
.conmb{
    margin-bottom:200px;
}
.vertical{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.fon0{
    background:rgb(242, 242, 242);
    box-shadow: inset 0 0 35px 5px rgb(226, 225, 220), 0px 0px 7px 0px rgb(112 112 106 / 82%);
    border-radius: 3%;
}
.pcol4{
    padding:4px;
}
.m10{
    margin:10px
}
.pblue2{
    font-size:16pt;
    font-family: 'Russo one', sans-serif;
    text-align:center;
    text-shadow: 0 -1px #f4f4f4,0 1px #9b9a9a;
}
.index{
    display:inline-block;
    position:absolute;
    color:#9c1c1c
}
.modalblock {
    display:flex;
    align-items:center;
    justify-content:center;
}
.modalblock summary {
    display: inline-flex;
}
.modalblock details[open] summary {
    cursor: default;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.modalblock details .cmc {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.modalblock details[open] .cmc {
    pointer-events: none;
    z-index: 1040;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgb(44 44 44 / 70%);
    border-radius: 10px;
}
.modalblock details .cmt {
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #072c8a;
    width: 100%;
    max-width: 600px;
    transition: 0.5s;
    background: rgb(233 238 245);
    box-shadow: 0px 0px 10px 0px #4d84d7;
    text-align: center;
    overflow: auto;
    border-radius: 10px;
    padding: 15px;
    overflow: auto;
}
.modalblock details[open] .cmt {
    animation: scale 0.5s ease;
    z-index: 4;
    pointer-events: auto;
}
.pred2{
    font-size:16pt;
    color:#9c1c1c;
    font-family:Russo one,sans-serif;
}
.bblue2{
    font-size: 13pt;
    font-family: 'Inter', sans-serif;
    color: #072c8a;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: rgb(233 238 245);
    margin:1rem;
    text-align:center;
    width:160px;
}
.table-responsive{
    max-width:860px;
    margin:auto;
    border-radius: 10px;
}
.table td, .table th{
    vertical-align:middle;
}
summary::-webkit-details-marker {
    display: none;
}
details:focus,
summary:focus {
  outline: 0;
  outline: none;
}
.topmenu{
   background-image: url(../image/777.jpg);
    background-repeat:repeat;
    box-shadow: 0px 0px 2px 0px #072661;
}
.fut{
    display: block;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    text-align: center;
    padding: 0.7rem 0.8rem;
    line-height: 1;
    color: #f1efeb;
}
.fut:hover{
    color: #f1efeb;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
}
.diagonal span::after {
  content: '';
  text-transform: uppercase; 
  animation-name: change-word;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}


.diared{
  background-color: #9c1c1c;
 }
 .diablue{
  background-color: #072c8a;
 }
  .diagonal span {
  font-family: 'Russo one', sans-serif;
  font-size:22pt;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  text-align: center;
  background-size:50% 50%;
  background-image: -webkit-linear-gradient(-45deg, rgba(7, 44, 138, .4) 25%, transparent 25%,
                  transparent 50%, rgba(7, 44, 138, .6) 50%, rgba(7, 44, 138, .8) 75%,
                  transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(7, 44, 138, .4) 25%, transparent 25%,
                  transparent 50%, rgba(7, 44, 138, .6) 50%, rgba(7, 44, 138, .8) 75%,
                  transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(7, 44, 138, .4) 25%, transparent 25%,
                  transparent 50%, rgba(7, 44, 138, .6) 50%, rgba(7, 44, 138, .8) 75%,
                  transparent 75%, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 8s linear infinite;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
}
@-webkit-keyframes aitf {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.widthcolonna{
    width:38%;
}
.widthcolonna2{
    width:24%;
}
.cancel{
    display:inline-block;
    pointer-events:none;
    color:white
}
#procard {
    height: 588px;
    width: 360px;
    position: relative;
    z-index: 1;
    perspective: 600px;
    background: rgb(248 250 254 / 70%);
    box-shadow:inset 0 0 35px 5px rgb(5 88 211 / 23%);
}
#front {
    overflow: hidden;
    z-index: 1;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
#top {
    height: 360px;
    width: 100%;
    background-size: cover;
    background-position:center;
}
#avatarka{
    max-width: 100%;
    height: auto;
    border-radius:50%;
    border-width: medium;
    border-color: #072c8a;
    border-style: double;
}
#around {
    height: 228px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.info {
    height: 100%;
    text-align: center;
}