#FieldUI {
    padding-left: 20px;
}

.rugby-field {
    background-image: url('../IMG/rugby-field.png');
    background-repeat: no-repeat;
    background-size: 100% 50vh;
    width: 100%;
    height: 50vh;
    margin-top: 25px;
}

.field {
    border-radius: 5px;
    width: calc(100%);
    height: 50vh;
    z-index: 1;
}

.left:hover, .middle:hover, .right:hover {
    background-color: grey;
    opacity: 0.6;
    cursor: pointer;
}

#t1perspective {
    height: 50%;
}

#t2perspective {
    height: 50%;
}

.row1 {
    height: 30%;
}

.row2 {
    height: 31%;
}

.row3 {
    height: 22%;
}

.row4 {
    height: 17%;
}

.left, .middle, .right {
    width: calc(100% / 3);
    height: 100%;
    float: left;
}

.goal-area div {
    background-color: #ff0039 !important;
}

.top .goal-area div {
    background-color: #3fb618 !important;
}

.left:hover, .middle:hover, .right:hover {
    background-color: grey;
    opacity: 0.6;
}

.goal-area_team2 {
    background-color: #2222EE;
    opacity: 0.8;
}

.goal-area_team1 {
    background-color: #EE2222;
    opacity: 0.8;
}

@media (min-width: 992px) {
    #FieldUI {
        padding-left: 30px;
    }

    .rugby-field {
        background-size: 100% 75vh;
        height: 75vh;
        margin-top: -93px;
    }

    .field {
        height: 75vh;
    }
}

@media (min-width: 1140px){
        #FieldUI {
        padding-left: 0;
    }
}