#linkbox {
    width: 100%;
    height: 100%;
    background: #FFF5E0;
}

#linkbox > a {
    display: block;
    position:absolute;
    width: 50%;
    height: 50%;
    overflow:hidden;
}

#linkbox > a > div:nth-of-type(1) {
    border: 1px solid #FFF;
    box-sizing: border-box;
    position: absolute;
    display: block; 
    width: 100%;
    height: 100%;
    background-size:cover;
    background-position: center;
    z-index: -1;
    filter: blur(0px);
    transition: filter 1.0s ease-in-out;
}

#linkbox > a:hover > div:nth-of-type(1){
    filter: blur(5px);
}

#linkbox > a > div:nth-of-type(2) {
    color: #FFF5E0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.0s ease-in-out;
}

#linkbox > a:hover > div:nth-of-type(2) {
    opacity: 1;    
    transition: opacity 0.3s ease-in-out;
}

#linkbox > a:nth-of-type(1) {}
#linkbox > a:nth-of-type(2) {left: 50%}
#linkbox > a:nth-of-type(3) {top: 50%}
#linkbox > a:nth-of-type(4) {left: 50%; top: 50%;}
#linkbox > a:nth-of-type(1) > div:nth-of-type(1) {background-image:url(img/start_blue.jpg);}
#linkbox > a:nth-of-type(2) > div:nth-of-type(1) {background-image:url(img/start_green1.jpg);}
#linkbox > a:nth-of-type(3) > div:nth-of-type(1) {background-image:url(img/start_green2.jpg);}
#linkbox > a:nth-of-type(4) > div:nth-of-type(1) {background-image:url(img/start_red.jpg);}


#linkbox > a > div > span {
    position: absolute;
    display: block;
    width: 80%;
    margin: 20% 10%;
}

#linkbox > a:nth-of-type(-n+2) > div > span {
    margin: 25% 10% 20% 10%;
}
#logo_center {
    display: block;
    position: fixed;
    top: 40%; left: 40%;
    margin: 0 ;
    background-size:contain;
    background-repeat: no-repeat;
    background-image: url(res/logo.svg);
    background-position: center;
    width: 20%;
    height: 20%;
}



@media (max-width: 800px) {
    #linkbox  a > div > span:nth-of-type(n) {width: 94%; margin: 2%;}
    #linkbox > a {width: 100%;  margin-top: 3.8em;}
    #linkbox > a:nth-of-type(1) {left: 0%;top: 0%;}
    #linkbox > a:nth-of-type(2) {left: 0%;top: 50%}
    #linkbox > a:nth-of-type(3) {left: 0%;top: 100%}
    #linkbox > a:nth-of-type(4) {left: 0%;top: 150%}
    #logo_center {display: none;}
}