html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	width: 100%;
	height: 100vh;
    overflow: hidden;
}

.panel__img-col {
	flex-basis: 70%;
	background-color: #00ff00;
}

body{
    margin: 0;
    padding: 0;
                background-image: url('../img/Fondo-01.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
}

#parallax-background {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            background-image: url('../img/Fondo-01.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }

        #header {
            position: fixed;
            top: 30px;
            left: 30px;
            z-index: 1;
        }
        
        #header img{
            max-width: 30%;
        }
        #boton{
            position: fixed;
            bottom: 20px;
            left: calc(50vw - 150px);
            z-index: 999999;
        }

        #boton img{
            max-width: 300px;
        }

        #footer {
            position: fixed;
            bottom: 20px;
            left: 30px;
            z-index: 1;
        }
        #footer img{
            max-width:70%;
        }
        #content {
            position: fixed;
            top: 44%;
            left: 52%;
            transform: translate(-50%, -50%);
            text-align: center;
            max-width: 50%;
            z-index: 999;
        }

        #fondo{
            width: 100%;
            height: 100vh
        }

        img#parallax-background {
            width: 100%;
            object-fit: cover;
        }
        


      #animated-image {
            animation: moveImage 220s ease-out , fadeImage 2s ease-in-out ;
            max-width: 100%;
        }
        
 /*        @keyframes moveImage {
            0% {
                transform: translateY(-200%);
            }
            100% {
                transform: translateY(100%);
            }
        } */

        @keyframes fadeImage {
            from {
                opacity: 0;
                transform: translate3d(0, 0, 0);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }






@media (max-width: 999px){
            #header img{
            max-width: 20%;
        }

        #footer {
            position: fixed;
            bottom: 20px;
            left: 30px;
            z-index: 1;
        }
        #footer img{
            max-width:50%;
        }
        #content {
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align:center top;
            max-width: 50%;
        }
    
}




@media (max-width: 913px){
    #content {
            position: fixed;
            top: 35%;
            left: 47%;
            transform: translate(-50%, -50%);
            text-align:center;
            max-width: 70%;
        
        }
    #animated-image{
        vertical-align: top;
        max-width: 200%;
    }
    

}




@media (max-width : 821px ){
    #content {
            position: fixed;
            top: 40%;
            left: 47%;
            transform: translate(-50%, -50%);
            text-align:center;
            max-width: 70%;
        
        }
    #animated-image{
        vertical-align: top;
        max-width: 150%;
    }
    
}

@media (max-width: 515px){
            #content {
            width: 100%;
            position: fixed;
            top: 53%;
            left: 50%;
            transform: translate(-50%, -80%);
            text-align:center ;
        }
    #content img{
        width: 357px;
    }
    
}

@media (max-width: 376px){
        #content {
            width: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -80%);
            text-align:center ;
        }
    #content img{
        width: 300px;
    }
}