html{
    height:100%;

}
body{
    height:100%;
    margin: 0px;
}


.container {
    width: 700px;
    height: 500px;
    margin: 0 auto 0;
    /*chrome, safari*/
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    /*firefox*/
    -moz-perspective: 1000;
    -moz-backface-visibility: hidden;
    /*IE*/
    -ms-perspective: 1000;
    -ms-backface-visibility: hidden;

    background: #def1ff;
}




/*todo delete*/
.header-btn {
    position: absolute;
    left: 5%;
    top: 15vw;
    width: 20%;
    /*z-index: -1;*/
}



#svg1{
    position: fixed;
}


/*  za poligon senca   */
.shadow {
    -webkit-filter: drop-shadow( -5px -5px 5px #000 );
    filter: drop-shadow( -5px -5px 5px #000 ); /* Same syntax as box-shadow */
}

picture source, picture img {
    width: 100%;
    height: auto;
}


#canada-list {
    position: absolute;
    top: 22.9vw;
    left: 46.8vw;
    width: 9.3vw;
    height: 7.7vw;
    /*background-color: red;*/
    opacity: .4;

}
#canada-list:hover {
    z-index: 15;
    cursor: pointer;
}
#canada-red{
    position: absolute;
    display: none;
    top: 19.2vw;
    left: 37.7vw;
    width: 31.9vw;


/**/
    /*position: absolute;*/
    /*display: none;*/
    /*top: 19.1vw;*/
    /*left: 37.6%;*/
    /*width: 31.9vw;*/
}