.presure-title{
    width: fit-content;

    position: relative;
}
.presure-title::after
{
    content: "";
    width: 50px;
    height: 50px;
    background-image: url(/img/artykuly/presure/presure_metter-after.png);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    position: relative;

}
.first::before
{
    content: "";
    width: 7px;
    height: 2px;
    border-radius: 10px;
   background-color: #000;
    display: inline-flex;
    position: relative;
    left: 92.5%;
    top: -30px;
    transform-origin: right;
    animation: presure 2s linear infinite alternate-reverse;

}
.secound::before
{
    content: "";
    width: 7px;
    height: 2px;
    border-radius: 10px;
   background-color: #000;
    display: inline-flex;
    position: relative;
    left: 94%;
    top: -30px;
    transform-origin: right;
    animation: presure 2s linear infinite alternate-reverse;

}
.question-mark{
    position: relative;
    width: fit-content;
}
.question-mark::after{
    content: "";
    background-image: url(/img/artykuly/presure/question_after.png);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    width: 20px;
    height: 20px;
    position: absolute;
    animation: question 3s linear infinite;
    /* transform: scaleY(0); */
}
.tpms{
    position: relative;
    width: fit-content;
}
.tpms::after{
    content: "";
    width: 25px;
    height: 25px;
    background-image: url(/img/artykuly/presure/tpms-after.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 102%;
    display: inline-flex;
    animation: tpms 1s linear infinite;
}
.list-dot{
    list-style-type: disc;
}
.gradient_border{
   border-bottom: 4px solid transparent;
   
    border-image: linear-gradient(103deg, rgba(0,0,0,1) 33%, rgba(255,0,0,1) 90%);
    border-image-slice: 1;
    /* transform: skew(20deg); */

}
.btn-danger{
    border-radius: 20px;
    
}
.text-brand{
    color: #f00;
}
@keyframes tpms {
    0%{
        transform: scale(0.5);
    }
    30%{
        transform: scale(1);
    }
    
    50%{
        transform: scale(1);
    }
   
    70%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.5);
    }
    
}
@keyframes question {
    0%{
        transform:scaleY(0) ;
    }
    10%{
        transform:scaleY(1) ;

    }
    20%{
        transform: rotate(-20deg);
    }
    40%
    {
        transform: rotate(20deg);
    }
    60%{
        transform: rotate(-20deg);
    }
    80%
    {
        transform: rotate(20deg);
    }
    90%{

        transform:scaleY(1) ;
    }
    100%{
        transform:scaleY(0) ;
    }

    
}
@keyframes presure {
    from{
        transform: rotate(-44deg);
    }
    to{
        transform: rotate(20deg);
    }
    
}
@media (max-width:767px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:4%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:428px){
    .first::before
{
    content: "";
    width: 7px;
    height: 2px;
    border-radius: 10px;
   background-color: #000;
    display: inline-flex;
    position: relative;
    left: 44%;
    top: 25px;
    transform-origin: right;
    animation: presure 2s linear infinite alternate-reverse;

}
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:486px){
    .first::before
{
    content: "";
    width: 7px;
    height: 2px;
    border-radius: 10px;
   background-color: #000;
    display: inline-flex;
    position: relative;
    left: 35%;
    top: 25px;
    transform-origin: right;
    animation: presure 2s linear infinite alternate-reverse;

}
}


@media only screen and (hover:none) and (pointer: coarse) and (max-width:767px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:4%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}

@media only screen and (hover:none) and (pointer: coarse) and (max-width:543px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:23%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:516px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:24%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:503px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:25%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:478px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:26%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:454px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:28%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:446px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:58.5%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
}
@media only screen and (hover:none) and (pointer: coarse) and (max-width:446px){
    .secound::before
    {
        content: "";
        width: 7px;
        height: 2px;
        border-radius: 10px;
       background-color: #000;
        display: inline-flex;
        position: relative;
        left:61.5%;
        top: 25px;
        transform-origin: right;
        animation: presure 2s linear infinite alternate-reverse;
    
    }
    .tpms::after{
        content: "";
        width: 25px;
        height: 25px;
        background-image: url(./img/artykuly/presure/tpms-after.png);
        background-size: cover;
        background-position: center;
        position: absolute;
        left: 17%;
        display: inline-flex;
        animation: tpms 1s linear infinite;
    }
}