.mainTms1{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--black);


}


.softTms1{
       min-width: 68rem;
        padding: 1em;
        color: var(--white);
        display: flex;
        justify-content: space-between;
      


        margin-bottom: 2em;
    
        font-size: var(--tms1Text);

        /* border: 2px solid red; */
  
}

.softTms1 .firstDiv{
    margin-bottom: 2em;
    max-width: 40rem;

    /* border: 2px solid green; */

}

.softTms1 .firstDiv div{
    padding: .5em;
}

.softTms1 .firstDiv div:nth-child(1){

    font-size: var(--tms1Headline);
    color: var(--grey);

}

.softTms1 .firstDiv :nth-child(5) {

    font-size: var(--tms1Headline);
    color: var(--green);
    border-bottom:.2em solid var(--purple) ;
 
}


.softTms1  svg{
    max-width: 30rem;
    height: 30rem;

    /* border: 2px solid teal; */

}


.softTms1 .firstDiv div{
    padding: .5em;
    max-width: 37rem;


}


.mainTms1 .secondDiv{
    position: relative;
    min-width: 68rem;
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
   /* border: 2px solid red; */


}

.mainTms1    video {
      

            object-fit: cover;
            max-width: 60rem;
            height: 30rem;
   


            /* border: 2px solid red; */
      
  
   }




.mainTms1  #purplepozadina{

    animation: purpBack 10s infinite ease-in-out;

}



  .mainTms1 #purplekrug1{
animation: purplekrug1 10s infinite ease-in-out;
transform-origin: unset;
  }

 .mainTms1 #purplekrug3 {
 animation: purplekrug3 10s infinite ease-in-out;
 transform-origin: center;
 }


  .mainTms1 #stap1 {
      animation: stap1 10s infinite ease-in-out;
      transform-origin: center;
  }


  .mainTms1 #stap6 {
      animation: stap1 10s infinite ease-in-out;
      transform-origin: center;
  }




@keyframes purpBack{
    0%{opacity: 0; }
   0% {fill: var(--grey)}
   100%{opacity: 1;}
 100% { fill: var(--purple)}
}


@keyframes purplekrug1 {
    0% {
        width: 0%
    }

    50% {
    transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }

    100% {
        fill: var(--purple);
    }
}
@keyframes purplekrug3 {
    0% {
        width: 0%
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }

    100% {
        fill: var(--purple);
    }
}



@keyframes stap1 {
    0% {
        transform: translate(-10px);
    }

    50% {
        transform: translate(-50px);
    }

    100% {
        transform: translate(0px);
    }

    100% {
        fill: var(--purple);
    }
}








@keyframes stap1 {
    0% {
        transform: translate(10px);
    }

    50% {
        transform: translate(50px);
    }

    100% {
        transform: translate(0px);
    }

    100% {
        fill: var(--purple);
    }
}












@media (max-width:68rem){
.softTms1 {
        min-width: 50rem;
        padding: 1em;
        color: var(--white);
        display: flex;
        justify-content: space-between;



        margin-bottom: 2em;

        font-size: var(--tms1Text);



    }

    .softTms1 .firstDiv {
        margin-bottom: 2em;
        min-width: 25rem;
        


    }

    .softTms1 .firstDiv div {
        padding: .5em;
    }

    .softTms1 .firstDiv div:nth-child(1) {

        font-size: var(--tms1Headline);
        color: var(--grey);

    }

    .softTms1 .firstDiv :nth-child(5) {

        font-size: var(--tms1Headline);
        color: var(--green);
        border-bottom: .2em solid var(--purple);

    }


    .softTms1 svg {
        max-width: 25rem;
        height: 30rem;


    }


    .softTms1 .firstDiv div {
        padding: .5em;
        max-width: 37rem;


    }


    .mainTms1 .secondDiv {
        position: relative;
        min-width: 50rem;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;



    }

    .mainTms1 video {


        object-fit: cover;
        max-width: 50rem;
        height: 25rem;






    }



}















@media (max-width:50rem) {
    .softTms1 {
        min-width: 95%;
        padding: 1em;
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;



        margin-bottom: 2em;

        font-size: var(--tms1Text);




    }

    .softTms1 .firstDiv {
        margin-bottom: 2em;
        min-width: 25rem;



    }

    .softTms1 .firstDiv div {
        padding: .5em;
    }

    .softTms1 .firstDiv div:nth-child(1) {

        font-size: var(--tms1Headline);
        color: var(--grey);

    }

    .softTms1 .firstDiv :nth-child(5) {

        font-size: var(--tms1Headline);
        color: var(--green);
        border-bottom: .2em solid var(--purple);

    }


    .softTms1 svg {
        max-width: 25rem;
        height: 30rem;


    }


    .softTms1 .firstDiv div {
        padding: .5em;
        max-width: 37rem;


    }


    .mainTms1 .secondDiv {
        position: relative;
        min-width: 95%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;



    }

    .mainTms1 video {


        object-fit: cover;
        max-width: 95%;
        height: 25rem;






    }



}

















@media (max-width:40rem) {
    .softTms1 {
        max-width: 95%;
        padding: .5em;
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;



        margin-bottom: 2em;

        font-size: var(--tms1Text);



    }

    .softTms1 .firstDiv {
        margin-bottom: 2em;
        min-width: 100%;





    }

    .softTms1 .firstDiv div {
        padding: .5em;
    }

    .softTms1 .firstDiv div:nth-child(1) {

        font-size: var(--tms1Headline);
        color: var(--grey);

    }

    .softTms1 .firstDiv :nth-child(5) {

        font-size: var(--tms1Headline);
        color: var(--green);
        border-bottom: .2em solid var(--purple);

    }


    .softTms1 svg {
        width: 95%;
        height: 20rem;


    }


    .softTms1 .firstDiv div {
        padding: .5em;
        max-width: 95%;


    }


    .mainTms1 .secondDiv {
        position: relative;
        min-width: 95%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;



    }

    .mainTms1 video {


    object-fit: cover;
    max-width: 95%;
    height: 18rem;






    }



}