.tool-button { display:inline-block; }
.tool-button > * {
    /* Org: w=659 h=229   -->  330:115, 300:104, */
    width:300px; height:104px; border-radius:70px; overflow:hidden; display:flex;
    column-gap:15px;
    text-decoration:none;
    color:#fff;
}
.tool-button img { margin-left:14px; margin-top:11px; width:80px; height:auto;  }
.tool-button span { font-size:1.4em; font-weight:400; line-height:31px; align-content:center; flex-grow:2; padding: 5px 25px 5px 2px; }
.tool-button a:hover img { transform:scale(1.02);}
.tool-button a:hover span { transform:scale(1.01);}

.tool-bg1 { background:url('/img/tools-bg/1.jpg') no-repeat; background-size:cover;}
.tool-bg2 { background:url('/img/tools-bg/2.jpg') no-repeat; background-size:cover;}
.tool-bg3 { background:url('/img/tools-bg/3.jpg') no-repeat; background-size:cover;}
.tool-bg4 { background:url('/img/tools-bg/4.jpg') no-repeat; background-size:cover;}
.tool-bg5 { background:url('/img/tools-bg/5.jpg') no-repeat; background-size:cover;}
.tool-bg6 { background:url('/img/tools-bg/6.jpg') no-repeat; background-size:cover;}
.tool-bg7 { background:url('/img/tools-bg/7.jpg') no-repeat; background-size:cover;}
.tool-bg8 { background:url('/img/tools-bg/8.jpg') no-repeat; background-size:cover;}
.tool-bg9 { background:url('/img/tools-bg/9.jpg') no-repeat; background-size:cover;}
.tool-bg10 { background:url('/img/tools-bg/10.jpg') no-repeat; background-size:cover;}
.tool-bg11 { background:url('/img/tools-bg/11.jpg') no-repeat; background-size:cover;}
.tool-bg12 { background:url('/img/tools-bg/12.jpg') no-repeat; background-size:cover;}
.tool-bg13 { background:url('/img/tools-bg/13.jpg') no-repeat; background-size:cover;}


/* ***************** Container -> Flight-Test */
.tool-container-flighttest { position: relative; height:300px; width:100%;  overflow: hidden; display: flex;justify-content: center; align-items: center;}
.tool-container-flighttest .tool-button { width:160px; }
.tool-container-flighttest .tool-button > * { 
    position:absolute; 
    margin-top:-60px;
    margin-left:-60px;
    transform: rotate(-50deg); /*translate(-50%, -50%)*/
}

/* ***************** Container -> Flight */
.tool-container-flight { 
    position: relative;
    height:300px; width:100%; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tool-container-flight .tool-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
 }

.tool-container-flight .tool-button { 
    width:160px; 
    position: relative;
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.6s ease, opacity 0.3s ease;
}
.tool-container-flight .tool-button > * { 
    position:absolute; 
    margin-top:-60px;
    margin-left:-60px;
    transform: rotate(-50deg); /*translate(-50%, -50%)*/
}
@media (max-width: 768px) {
    .tool-container-flight {
        height:200px;
    }
    .tool-container-flight .tool-list {
        transform: scale(0.6);
    }
    
}

/* ***************** Container -> OTHER */

.tool-container-small { }
.tool-container-small .tool-button {  transform: scale(0.5);  margin-right:-150px; }

.tool-container-icon {  }
.tool-icon { display:inline-block; margin-right:10px; }
.tool-icon img { width:50px; height:auto; padding:10px; display:block; background:url('/img/tools-bg/icon-dot.png') no-repeat; background-size:cover;  }
.tool-icon:hover > span { display:block; }
.tool-icon:hover > img { transform:scale(1.05); }
.tool-icon > span { display:none; position:absolute; width:100px; padding:10px; background:#eee; text-align:center; overflow:hidden; }


.tool-container-toollist {  display: flex; justify-content:center; }
.tool-container-toollist > div { max-width:700px; display: flex; flex-wrap:wrap; justify-content:center; gap: 20px;}
.tool-container-toollist > div > a {  text-align:center;width:150px;padding:5px 20px 5px 20px;background: #fff;border-radius: 10px 0px;text-decoration:none;color: var(--bs-nav-link-color);}
.tool-container-toollist > div > a > img { display:inline-block; }