@font-face {
    font-family: FuturaFuturisC; /* Шрифтик который типо ExoBold.ttf */
    src: url(FuturaFuturisC-Bold.otf); /* бебра */
   }
   @font-face {
    font-family: foot; /* Шрифтик который типо ExoBold.ttf */
    src: url(foot.otf); /* бебра */
   }
   @font-face {
       font-family: FuturaFuturisBlackC;
       src: url(FuturaFuturisBlackC.otf);
   }
        @font-face {
    font-family: Arial;
    src: url(Arial.ttf);
}
@font-face {
    font-family: EffraLight;
    src: url(79_Effra_Light.ttf);
   }
   @font-face {
    font-family: bl;
    src: url(hotstreak.ttf);
   }
   @font-face {
    font-family: EffraBold;
    src: url(Effra_Heavy.otf);
   }
   body {
    font-family: FuturaFuturisC;
   text-align: center;
   background-color:rgb(255, 255, 255);
   background-size: cover;
   padding: 0;
   margin: 0;
   }
   button {
       font-family: FuturaFuturisC;
       background-color: #4254F4;
       border: none;
       outline: none;
       padding: 5px 19px;
       border-radius: 15px;
       width: 200px;
       height: 45px;
       margin-left: 10px;
       cursor: pointer;
       top: 60px;
       font-size: 20px;
       color: aliceblue;
   }
   .teekobutton {
    font-family: foot;
    background-color: #dd2e3d;
    border: none;
    outline: none;
    padding: 5px 19px;
    border-radius: 5px;
    width: 500px;
    height: 45px;
    margin-left: 10px;
    cursor: default;
    top: 60px;
    font-size: 20px;
    color: aliceblue;
   }
   .teekobutton:hover{
    background-color: #98212b;
    cursor: pointer;
   }
   .logo {
       height: 200px;
   }
   .content {
       background-color: #e1e1e1;
       display: flex;
       padding: 20px;
       text-align: center;
   }
   a {
       font-family: FuturaFuturisC;
       color:rgb(0, 85, 255);
       text-decoration: none;
   }
   .logocolontitle {
       background-color: #000000;
       display: block;
       padding: 10px;
       height: 50px;
       position: fixed;
       width: 100%;
       z-index: 100;
   }
   .speciallogo {
       width: 260px;
       margin-bottom: 0px;
       padding-top:7px;
   }
   .speciallogo3 {
    width: 200px;
    margin-bottom: -28px;
    border-right: 25%;
}
   .contentx {
       background-color: #000000;
       display: block;
       padding: 20px;
   }
   .contentxcontent {
    background-color: #000000;
    display: block;
    padding: 20px;
}
   .contentxx {
    display:flow-root;
    padding: 20px;
}
   .whitecolor {
       color: aliceblue;
   }
   .pustoyblock {
       width: 100%;
       height: 400px;
   }
   .pustoyblockmini {
       width: 100%;
       height: 100px;
   }
   .prjimglogo {
    width: 450px;
   }
   .pustoyblockminiminimini {
    width: 100%;
    height: 10px;
}
   .pustoyblockminimini {
    width: 100%;
    height: 50px;
}
   .drawfulbg {
       background-image: url(../image/14.svg);
   
   }
   button:hover {
       background-color: #434eae;
   
   }
   .imgmainspw {
    width: 15%;
  }
   .info {
       width: 100%;
       background-color: #e9e9e9;
       padding: 20px 25px 20px 25px;
   }
   .tabooimage {
       height: 300px;
   }
   .footer {
       width: 100%;
       height: 50px;
       background-color: #0000006e;
       position: absolute;
   }
   .pustoyblocklast {
       width: 100%;
       background-color: #0000006e;
       position: relative;
       height: 50vh;
   }
   .aimgg{
    width: 2.5%;
  }
   #slider {
       position: relative;
       text-align: center;
       top: 10px;
   }
   
   #slider{
       margin: 0 auto;
   }
   
   #slider article{
       width: 20%;
       float: left;
   }
   
   #slides .image {
       width: 50%;
       line-height: 0;
   }
   
   #ovwerflow {
       width: 100%;
       overflow: hidden;    
   }
   
   article img {
       width: 100%;
   }
   
   #desktop:checked ~ #slider {
       max-width: 960px;
   }
   
   .search {
       font-family: FuturaFuturisC;
       src: url(FuturaFuturisC-Bold.otf);
       border-radius: 50px;
       width: 55%;
       height: 60px;
       background-color: #ececec;
       text-align: center;
       font-size: large;
   
   }

   h2 {
    font-family: FuturaFuturisBlackC;
   }

   footer{
    position: fixed;
    background-color: #000000;
    padding: 10px;
    width: 100%;
    text-align: center;
    float: left;
    bottom: 0;
   }
   .aimg{
    padding: 15px;
    border-radius: 15px;
    animation-duration: 0.25s;
    animation-name: opacitydown;
    filter: brightness(100%);

   }
   .aimg:hover{
    animation-duration: 0.25s;
    animation-name: opacityup;
    filter: brightness(80%);
   }

   @keyframes opacityup {
    from {
        filter: brightness(100%);
    }
  
    to {
        filter: brightness(80%);
    }
  }
  @keyframes opacitydown {
    from {
        filter: brightness(80%);
    }
  
    to {
        filter: brightness(100%);
    }
  }

  .ssdr{
    color: #840000;
    width: 100%;
  }

  .state{
    background-color: #f0f0f0;
    width: 70%;
    text-align: left;
    margin-left: 15%;
  }
  .statep{
    font-family: Arial;
    padding-left: 3%;
    font-size: 80%;
    line-height: 0.9em;
    padding-bottom: 1%;
  }
  .stateh1{
    color: #0077ff;
    font-family: Arial;
    padding-left: 3%;
    font-size: 120%;
    line-height: 0.9em;
    padding-top: 2%;
  }
  .boostya{
    animation-duration: 0.25s;
    animation-name: opacitydown;
    filter: brightness(100%);
  }
  .boostya:hover{
    animation-duration: 0.25s;
    animation-name: opacityup;
    filter: brightness(80%);
  }
.prjimg {
    animation-duration: 0.25s;
    animation-name: opacitydown;
    filter: brightness(100%);
    border-radius: 25px;
    width: 350px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.prjimg:hover{
    animation-duration: 0.25s;
    animation-name: opacityup;
    filter: brightness(80%);
    border-radius: 25px;
    width: 350px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.prjimgbg {
    border-radius: 25px;
    width: 1350px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.prjimgbgdiv {
    border-radius: 25px;
    width: 1350px;
    background-color:#1a1a1a;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    background-size: cover;
    padding: 25px;
    margin-left: auto; 
    margin-right: auto;
}

.prjimgsoon {
    animation-duration: 0.25s;
    animation-name: opacitydown2;
    filter: brightness(100%);
    border-radius: 25px;
    width: 350px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.prjimgsoon:hover{
    animation-duration: 0.25s;
    animation-name: opacityup2;
    filter: brightness(115%);
    border-radius: 25px;
    width: 350px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@keyframes opacityup2 {
    from {
        filter: brightness(100%);
    }
  
    to {
        filter: brightness(115%);
    }
  }
  @keyframes opacitydown2 {
    from {
        filter: brightness(115%);
    }
  
    to {
        filter: brightness(100%);
    }
  }
  .showpagepr {
    display: block;
  }
  .phonenotsupported {
    background-color: #000000;
    text-align: center;
    display: none;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
  }
  @media (max-width:896px){
    .content {
        display: block;
    }
    .speciallogo {
        width: 250px;
    }
    .logocolontitle{
     padding-top:25px;
     padding-bottom:25px;
     border-bottom:20px;
    }
    h2 {
     font-size: 190%;
    }
    h1 {
     font-size: 230%;
    }
    h5 {
        font-size: 130%;
       }
    footer{
     padding-top:25px;
     padding-bottom:25px;
    }
    .aimgg {
     width: 15%;
    }
    .imgmainspw {
        width: 90%;
    }
    .contentxcontent {
        width: 85%;
        margin-left:auto;
        margin-right:auto;
        border-radius: 35px;
    }
    .showpagepr {
        DISPLAY: none;
    }
    .phonenotsupported {
        display: block;
    }
   }