body{
    color: #000;
}

#house{
    position: relative;
    margin: 0 auto;
    width: 705px;
    height: 649px;
    overflow: hidden;
    background: url(../img/house.jpg) left top no-repeat;
}

#house #front-of-house{
    position: absolute;
    top: 471px;
    left: 85px;
    width: 615px;
    height: 114px;
    background: url(../img/front-house.png) 0px 0 no-repeat;
    z-index: 100;
}

#house #front-of-house #neighbor{
    position: absolute;
    top: 0px;
    left: 230px;
    width: 64px;
    height: 155px;
    background: url(../img/neighbor.png) 0px 0 no-repeat;
    z-index: 10;
    /* cursor: pointer; */
}

#house #front-of-house #neighbor #help{
    display: none;
    position: absolute;
    top: -72px;
    left: 69px;
    width: 41px;
    height: 80px;
    background: url(../img/help.png) 0px 0 no-repeat;
}

#house #front-of-house #flyer-for-neighbor-pic{
    display: none;
    position: absolute;
    top: -94px;
    left: 366px;
    width: 151px;
    height: 94px;
    background: url(../img/flyer-for-neighbor-pic.png) 0px 0 no-repeat;
    text-decoration: none;
    z-index: 1;
}

#house #front-of-house #neighbor #garbage{
    position: absolute;
    top: 51px;
    left: 57px;
    width: 42px;
    height: 91px;
    background: url(../img/garbage.png) 0px 0 no-repeat;
}

#house #front-of-house #neighbor #garbage.glass{ background-position: 0px 0px; }
#house #front-of-house #neighbor #garbage.plastic{ background-position: -42px 0px; }
#house #front-of-house #neighbor #garbage.paper{ background-position: -84px 0px; }


#house .window{
    position: absolute;
    overflow: hidden;
    text-decoration: none;
    z-index: 1;
    /*border: 1px solid #fff;*/
}

#house .window:hover{
    z-index: 10;
}

/* ground floor */
#house #w-nebezpecny-odpad{
    top: 276px;
    left: 0px;
    width: 215px;
    height: 192px;
    background: url(../img/w-nebezpecny-odpad.png) 0px 0 no-repeat;
}

#house #w-objemny-odpad{
    top: 281px;
    left: 133px;
    width: 220px;
    height: 273px;
    background: url(../img/w-objemny-odpad.png) 0px 0 no-repeat;
}

#house #w-hlinik-kovy{
    top: 269px;
    left: 253px;
    width: 180px;
    height: 199px;
    background: url(../img/w-hlinik-kovy.png) 0px 0 no-repeat;
}

#house #w-elektro-odpad{
    top: 258px;
    left: 347px;
    width: 190px;
    height: 183px;
    background: url(../img/w-elektro-odpad.png) 0px 0 no-repeat;
}

#house #w-bioodpad{
    top: 266px;
    left: 462px;
    width: 165px;
    height: 161px;
    background: url(../img/w-bioodpad.png) 0px 0 no-repeat;
}


/* 1st floor */
#house #w-smesny-odpad{
    top: 85px;
    left: -6px;
    width: 213px;
    height: 213px;
    background: url(../img/w-smesny-odpad.png) 0px 0 no-repeat;
}

#house #w-plasty{
    top: 109px;
    left: 118px;
    width: 230px;
    height: 171px;
    background: url(../img/w-plasty.png?2) 0px 0 no-repeat;
}

#house #w-papir{
    top: 85px;
    left: 259px;
    width: 195px;
    height: 218px;
    background: url(../img/w-papir.png) 0px 0 no-repeat;
}

#house #w-sklo{
    top: 85px;
    left: 378px;
    width: 195px;
    height: 190px;
    background: url(../img/w-sklo.png) 0px 0 no-repeat;
}

#house #w-textil{
    top: 84px;
    left: 477px;
    width: 180px;
    height: 221px;
    background: url(../img/w-textil.png?2) 0px 0 no-repeat;
}


/* tomcat */
#house #tomcat{
    position: absolute;
    top: 6px;
    right: 54px;
    width: 0px;
    height: 0px;
    background: url(../img/tomcat.png) 0px 0 no-repeat;
}

#house #tomcat-flyer{
    display: none;
    position: absolute;
    top: -92px;
    left: 493px;
    width: 125px;
    height: 102px;
    background: url(../img/tomcat-flyer.png) 0px 0 no-repeat;
}

#house #arrow{
    display: block;
    position: absolute;
    top: 250px;
    left: 575px;
    width: 121px;
    height: 86px;
/*    background: url(../img/arrow.png) 0px 0 no-repeat;*/
/*    -ms-transform:rotate(-15deg);  IE 9 
    -webkit-transform:rotate(-15deg);  Chrome, Safari, Opera 
    animation: 5s ease-in-out 0s normal infinite arrow;    
    -webkit-animation:arrow 5s infinite;  Safari and Chrome  
    -moz-animation: 5s ease-in-out 0s normal infinite arrow;*/
}


#house #arrow #arrowotoc,#house #arrow #arrowotoc2
{
    z-index: 100;position: absolute!important;left: 0px;top: 0px
}


/*#house #arrow.arrow1{
    
    background: url(../img/arrow.png) -121px 0 no-repeat;
   
}

@-moz-keyframes arrow
{
     0%   {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax    
     }    
    50%  {-ms-transform:rotate(-15deg);  IE 9 
    -webkit-transform:rotate(-15deg);  Chrome, Safari, Opera 
    transform:rotate(-15deg);  Standard syntax 
    }
    100% {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax 
    }
}
@keyframes arrow
{

    0%   {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax    
     }    
    50%  {-ms-transform:rotate(-15deg);  IE 9 
    -webkit-transform:rotate(-15deg);  Chrome, Safari, Opera 
    transform:rotate(-15deg);  Standard syntax 
    }
    100% {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax 
    }

}
@-webkit-keyframes arrow
{

   0%   {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax 
    }
    
    50%  {-ms-transform:rotate(-15deg);  IE 9 
    -webkit-transform:rotate(-15deg);  Chrome, Safari, Opera 
    transform:rotate(-15deg);  Standard syntax 
    }
    100% {-ms-transform:rotate(15deg);  IE 9 
    -webkit-transform:rotate(15deg);  Chrome, Safari, Opera 
    transform:rotate(15deg);  Standard syntax 
   }


}*/



#house #truck{
    position: absolute;
    top: 11px;
    right: 124px;
    width: 113px;
    height: 60px;
    font-size: 0px;
    line-height: 0px;
    background: url(../img/truck.png) 0px 0 no-repeat;
    animation: 5s ease-in-out 0s normal none infinite truckgarbage;
    -webkit-animation:truckgarbage 5s infinite; /* Safari and Chrome */
}
@keyframes truckgarbage
{

    0%   {right:130px;}
    25%  {right:135px;}
    30%  { -ms-transform:rotate(10deg); /* IE 9 */
           -webkit-transform:rotate(10deg); /* Chrome, Safari, Opera */
           transform:rotate(10deg); /* Standard syntax */}
    40%  { -ms-transform:rotate(0deg); /* IE 9 */
           -webkit-transform:rotate(0deg); /* Chrome, Safari, Opera */
           transform:rotate(0deg); /* Standard syntax */}
    50%  {right:130px;}
    100% {right: 124px;}

}
@-webkit-keyframes truckgarbage
{

    0%   {right:130px;}
    25%  {right:135px;}
    30%  { -ms-transform:rotate(10deg); /* IE 9 */
           -webkit-transform:rotate(10deg); /* Chrome, Safari, Opera */
           transform:rotate(10deg); /* Standard syntax */}
    40%  { -ms-transform:rotate(0deg); /* IE 9 */
           -webkit-transform:rotate(0deg); /* Chrome, Safari, Opera */
           transform:rotate(0deg); /* Standard syntax */}
    50%  {right:130px;}
    100% {right: 124px;}

}



@-moz-keyframes truckgarbage
{

    0%   {right:130px;}
    25%  {right:135px;}
    30%  { -ms-transform:rotate(10deg); /* IE 9 */
           -webkit-transform:rotate(10deg); /* Chrome, Safari, Opera */
           transform:rotate(10deg); /* Standard syntax */}
    40%  { -ms-transform:rotate(0deg); /* IE 9 */
           -webkit-transform:rotate(0deg); /* Chrome, Safari, Opera */
           transform:rotate(0deg); /* Standard syntax */}
    50%  {right:130px;}
    100% {right: 124px;}

}
#house #truck-flyer{
    display: none;
    position: absolute;
    font-size: 0px;
    line-height: 0px;
    left: 576px;
    width: 125px;
    height: 102px;
    background: url(../img/truck-flyer.png) 0px 0 no-repeat;
}