.box-info{
    width: 70%;position: absolute;left: 15%;right: 15%;top: 25%;text-align: center; vertical-align: middle;
    z-index: 999;display: block;font-weight: bold;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.background-left{
    position: fixed; top: 0px;left: 0px;bottom: 0px; width: 33%;background-color: rgba(193, 205, 125, 0.98);
}
.background-mid{
    position: fixed; top: 0px;left: 33%;bottom: 0px; width: 33%;
    /*background-color: rgba(67, 138, 67, 0.88);*/
    background-color: rgba(34, 38, 128, 0.7);
    /*box-shadow: inset 1px 1px 10px 10px rgba(0, 128, 0, 0.7);*/
    -webkit-box-shadow: 0px 0px 40px 3px rgb(125, 128, 148);
    -moz-box-shadow: 0px 0px 40px 3px rgb(90, 90, 148);
    box-shadow: 0px 0px 40px 3px rgb(52, 46, 148);
}
.background-right{
    position: fixed; top: 0px;left: 66%;bottom: 0px; width: 33%;background-color: rgba(170, 182, 105, 0.98);
}

[data-title] {
    /*outline: red dotted 1px; /*optional styling*/
    /*font-size: 30px; /*optional styling*/

    position: relative;
	z-index:999999;
    cursor: hand;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
	z-index:99999;
    top: -36px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -13px;
    left: 18px;
    display: inline-block;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}