body{
    background-image: url(../img/public_bg/bg_home_1.png);
}
div.cross{
    position: absolute;
    opacity: 0.85;
    -webkit-opacity: 0.85;
    -moz-opacity: 0.85;
    transition: 1.0s ease;
    -webkit-transition: 1.0s ease;
    -moz-transition: 1.0s ease;
    min-width: 100px;
    max-width: 200px;
    width: 15%;
}
.cross:nth-of-type(1){
    left: 5%;
    top: 100px;
}
.cross:nth-of-type(2){
    left: 40%;
    top: 300px;
}
.cross:nth-of-type(3){
    right: 15%;
    top: 130px;
}
.cross:nth-of-type(4){
    left: 20%;
    top: 450px;
}
.cross img {
    max-width: 100%;
    width: auto;
    height: auto;
}
.cross-label{
    color: #fff;
    font-size: 18px;
    width: 100%;
    text-align: center;
}
.cross:hover{
    cursor: pointer;
    opacity: 1.0;
    transform: scale(1.5, 1.5);
}
.cross a, .cross a:hover{
    text-decoration: none;
}
.arrow{
    position: absolute;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    opacity: 0.8;
}
.arrow:nth-of-type(1), .arrow-1{
    background: url("../img/arrow-2.png");
    top: 150px;
    left: calc(5% + 200px);
    height: 150px;
    width: calc(35% - 100px);
}
.arrow:nth-of-type(2), .arrow-2{
    background: url("../img/arrow-3.png");
    top: 320px;
    left: calc(40% + 180px);
    height: 80px;
    width: calc(40% - 350px);
    min-width: 120px;
}
.arrow:nth-of-type(3), .arrow-3{
    background: url("../img/arrow-1.png");
    top: 360px;
    left: calc(20% + 50px);
    height: 80px;
    width: calc(20% - 50px);
    min-width: 120px;
}
@media (max-width: 800px){
    .arrow-1{
        left: calc(6% + 100px);
        width: calc(35% - 50px);
    }
    .arrow-2{
        left: calc(44% + 90px);
        top: 270px;
        width: calc(40% - 150px);
        min-width: 50px;
    }
    .arrow-3{
        left: 20%;
        top: 310px;
        width: 20%;
        min-width: 80px;
        height: 120px;
    }
}