#divRotator .divRotator
{
    position: absolute;
    width: 1200px;
    height: 100%;
    top: 0px;
    left: 0px;
}

@media screen and (max-width: 640px)
{
    #divRotator .divRotator
    {
        width: 100%;
    }
}

#divRotator .divRot
{
    position: relative;
    height: 100%;
}

#divRotator .divRot a
{
    height:100%;
    display:block;
}

#divRot1
{
    background-image: url('1/rotator_papai-falatok.jpg'); 
}

#divRot5
{

    background-image: url('5/Papai_Hus_website_DESKTOP_ROTATOR_Juhbeles_virsli.jpg');
    background-position: center;
}

#divRot3
{
    background-image: url('3/Papai_Hus_website_DESKTOP_ROTATOR_mintabolt.jpg');
    background-position: center;
}

#divRot4
{
    background-image: url('3/Papai_Hus_website_DESKTOP_ROTATOR_vedd_a_hazait.jpg'); 
}

#divRot2
{
    background-image: url('2/Papai_Hus_website_DESKTOP_ROTATOR_disznotoros.jpg'); 
}

#divRot6
{
    background-image: url('2/Papai_Hus_website_DESKTOP_ROTATOR_xmas_sonka.jpg');
    background-position: center;
}



@media screen and (max-width: 640px)
{
    #divRotator .divRot
    {
        background-size: cover;
    }
    
    #divRot1
    {
        background-image: url('1/Papai_Hus_website_MOBILE_rotator_papai_falatok.jpg'); 
    }
    
    #divRot5
    {
        background-image: url('5/Papai_Hus_website_MOBILE_Juhbeles_virsli.jpg'); 
    }
   
    #divRot3
    {
        background-image: url('3/Papai_Hus_website_MOBILE_rotator_mintabolt.jpg');
    }   
    

    
    
    #divRot4
    {
        background-image: url('3/Papai_Hus_website_MOBILE_rotator_vedd_a_hazait.jpg'); 
    }
    
    #divRot2
    {
        background-image: url('2/Papai_Hus_website_MOBILE_rotator_disznotoros.jpg'); 
    }    

    #divRot6
    {
        background-image: url('2/Papai_Hus_website_MOBILE_rotator_xmas_sonka.jpg'); 
    }
}



#divRotator .selected
{
    opacity: 1;
    transition: all 2s;
    visibility: visible;
}

#divRotator .hidden
{
    opacity: 0;
    transition: all 2s;
    visibility: hidden;
}


#divRotator .divRotatorSteps
{
    position: absolute;
    bottom: 32px;
    width: 50px;
    height: 2px;
    border-width: 0px;
    background-color: rgb(255,255,255);
}

#divRotatorSteps1
{
    left: calc(600px - 85px);
}

#divRotatorSteps2
{
    left: calc(600px - 25px);
}

#divRotatorSteps3
{
    left: calc(600px + 35px);
}

@media screen and (max-width: 640px)
{
    #divRotator .divRotatorSteps
    {
        position: absolute;
        width: 12.5vw;
        height: 0.625vw;
        bottom: 5vw;
    }
    
    #divRotatorSteps1
    {
        left: 5vw;
    }
    
    #divRotatorSteps2
    {
        left: calc(5vw + 12.5vw + 2.5vw);
    }
    
    #divRotatorSteps3
    {
        left: calc(5vw + 12.5vw + 2.5vw + 12.5vw + 2.5vw);
    }
    
}

#divRotator .selectedStep
{
    background-color: rgb(219,34,41);
    transition: all 2s;
}
#divRotator .deselectedStep
{
    background-color: rgb(255,255,255);
    transition: all 2s;
}