.mcity_rect_cont_img {
    padding: 10px;
    width: 15vh;
}

.mcity_rect {
    height: 18vh;
    width: 18vh;
    background-color: #aaccff;


    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-style: solid;
    border-radius: 10px;
    border-color: seashell;
    border-width: 2px;
}
.mcity_rect_container {
    float: left;
    padding: 3px;
}

.mcity_rect:hover {
    -webkit-animation: mcity_rect 1s ease 0s 1;
    animation: mcity_rect 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes mcity_rect{
    0%   {transform: scale(1,1)  ; opacity: 1;}
    100% {transform: scale(1.05,1.05)  ; opacity: 1; background-color: gainsboro;}
}

@keyframes mcity_rect{
    0%   {transform: scale(1,1)  ; opacity: 1;}
    100% {transform: scale(1.05,1.05)  ; opacity: 1; background-color: gainsboro;}
}

.mcity_rect_what_next {
    height: 18vh;
    width: 18vh;
    background-color: #aaccff;


    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-style: solid;
    border-radius: 10px;
    border-color: white;
    border-width: 2px;
    opacity: 0.5;
}

.mcity_rect_what_next:hover {
    -webkit-animation: mcity_rect_what_next 1s ease 0s 1;
    animation: mcity_rect_what_next 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes mcity_rect_what_next{
    0%   {transform: scale(1,1)  ; opacity: 0.5;}
    100% {transform: scale(1,1)  ; opacity: 1; background-color: gainsboro;}
}

@keyframes mcity_rect_what_next{
    0%   {transform: scale(1,1)  ; opacity: 0.5;}
    100% {transform: scale(1,1)  ; opacity: 1; background-color: gainsboro;}
}


/* -------------------------------------------------------- */
/* HONEYCOMB                                                */
/* -------------------------------------------------------- */
.utchBasic {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_basic.png');
}

.utchBasic:hover {
    background-image: url('../img/city_honeycomb_basic_hover.png');
}

.utchBasic_01 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_copenhagen.png');
    background-size: 77px 77px;
}

.utchBasic_02 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_hamburg.png');
    background-size: 77px 77px;
}

.utchBasic_03 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_vienna.png');
    background-size: 77px 77px;
}

.utchBasic_04 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_genoa.png');
    background-size: 77px 77px;
}

.utchBasic_05 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_lyon.png');
    background-size: 77px 77px;
}

.utchBasic_06 {
    position: absolute;
    width: 77px;
    height: 77px;
    background-image: url('../img/city_honeycomb_amsterdam.png');
    background-size: 77px 77px;
}