/* HOMEPAGE HERO [arma_hero] - inlocuieste Revolution Slider (home-hero / home-1) */
/* full-width ca sliderul vechi, chiar daca e pus intr-un vc_row normal */
html, body{
    overflow-x: clip;
}
.arma-hero{
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background-color: #cfe3f3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.arma-hero__stage{
    position: relative;
    margin: 0 auto;
}
.arma-hero__title{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 10px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: none;
    color: #020202;
    animation: arma-hero-down 1s ease-out both;
}
.arma-hero__device{
    position: absolute;
    height: auto;
    max-width: none;
    animation: arma-hero-up 1s ease-out both;
}
.arma-hero__tableta{ animation-name: arma-hero-up-small; animation-delay: .38s; }
.arma-hero__telefon{ animation-delay: .52s; }
.arma-hero__monitor{ animation-delay: .73s; }
.arma-hero__laptop { animation-delay: .92s; }
.arma-hero__tv     { animation-delay: 1.14s; }
@keyframes arma-hero-down    { from { opacity: 0; transform: translateY(-150%); } to { opacity: 1; transform: none; } }
@keyframes arma-hero-up      { from { opacity: 0; transform: translateY(150%); } to { opacity: 1; transform: none; } }
@keyframes arma-hero-up-small{ from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
    .arma-hero__title, .arma-hero__device{ animation: none; }
}
/* mobile (<778px) - grid 480x300 */
.arma-hero__stage { max-width: 480px; aspect-ratio: 480 / 300; }
.arma-hero__title { top: 5.667%; font-size: min(18px, 3.75vw); }
.arma-hero__tableta { left: 26.042%; top: 30%; width: 10.833%; }
.arma-hero__telefon { left: 42.5%; top: 35.667%; width: 6.042%; }
.arma-hero__monitor { left: 53.542%; top: 26.333%; width: 22.083%; }
.arma-hero__laptop { left: 19.583%; top: 65%; width: 26.25%; }
.arma-hero__tv { left: 49.375%; top: 58%; width: 32.917%; }

@media (min-width: 778px) {
    .arma-hero__stage { max-width: 778px; aspect-ratio: 778 / 300; }
    .arma-hero__title { top: 3%; font-size: 18px; }
    .arma-hero__tableta { left: 13.368%; top: 34.667%; width: 8.098%; }
    .arma-hero__telefon { left: 23.779%; top: 37.667%; width: 4.756%; }
    .arma-hero__monitor { left: 30.077%; top: 32.333%; width: 17.095%; }
    .arma-hero__laptop { left: 47.943%; top: 38%; width: 16.581%; }
    .arma-hero__tv { left: 65.296%; top: 26.333%; width: 22.751%; }
}
@media (min-width: 1024px) {
    .arma-hero__stage { max-width: 1024px; aspect-ratio: 1024 / 350; }
    .arma-hero__title { top: 3.714%; font-size: 24px; }
    .arma-hero__tableta { left: 13.477%; top: 39.143%; width: 8.203%; }
    .arma-hero__telefon { left: 23.828%; top: 42.857%; width: 4.785%; }
    .arma-hero__monitor { left: 30.176%; top: 36.571%; width: 17.188%; }
    .arma-hero__laptop { left: 47.949%; top: 43.143%; width: 16.699%; }
    .arma-hero__tv { left: 65.332%; top: 29.714%; width: 22.852%; }
}
@media (min-width: 1240px) {
    .arma-hero__stage { max-width: 1240px; aspect-ratio: 1240 / 370; }
    .arma-hero__title { top: 4.324%; font-size: 30px; }
    .arma-hero__tableta { left: 13.548%; top: 44.865%; width: 8.226%; }
    .arma-hero__telefon { left: 23.871%; top: 49.189%; width: 4.839%; }
    .arma-hero__monitor { left: 30.242%; top: 42.162%; width: 17.258%; }
    .arma-hero__laptop { left: 47.984%; top: 49.73%; width: 16.774%; }
    .arma-hero__tv { left: 65.403%; top: 34.054%; width: 22.903%; }
}