:root {
	--header-desconected-height: 200px;
	}
#header-desconected{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--header-desconected-height);
    display: grid;
    grid-template-rows: 60% 40%;
    }
#header-desconected-background{
    position: absolute;
    bottom: 20%;
    left: 0px;
    right: 0px;
    overflow: hidden;
    }
#header-desconected-background > img{
    width: 100%;
    }
#header-desconected-robot{
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 2;
    }
#header-desconected-robot > img{
    height: 85%;
    animation-duration: 8s;
    animation-name: header_desconected_robot_anime;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite; 
    transform: translatey(0px) rotate(0deg);
    }
@keyframes header_desconected_robot_anime {
    0%,100% {
        transform: translatey(0px) rotate(0deg);
        }
    25%, 75% {
        transform: translatey(5px) rotate(-1deg);
        }
    50% {
        transform: translatey(2px) rotate(5deg);
        }
    }
#header-desconected-logo{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 2;
    }
#header-desconected-logo > img{
    height: 100%;
    animation-duration: 6s;
    animation-name: header_logo_anime;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite; 
    transform: translatey(-15px) rotate(0deg);
    }
@keyframes header_logo_anime {
    0%,100% {
        transform: translatey(-15px) rotate(0deg);
        }
    25%, 75% {
        transform: translatey(-25px) rotate(-1deg);
        }
    50% {
        transform: translatey(-20px) rotate(2deg);
        }
  }

@media (max-width: 1600px) {}
@media (max-width: 1200px) {
    :root {
        --header-desconected-height: 200px;
        }
    }
@media (max-width: 1024px) {
    :root {
        --header-desconected-height: 180px;
        }
    }
@media (max-width: 840px) {}
@media (max-width: 720px) {
    :root {
        --header-desconected-height: 150px;
        }
}
@media (max-width: 600px) {}
@media (max-width: 480px) {}
@media (max-width: 320px) {}