*{
    margin: 0;
    padding: 0;
    
}
header{
    height: 100vh;
    width: 100%;
    background-image: url("https://www.xn--victorhugonuez-1nb.com/imagenes/digCatalogoTepoztlan/extragrande/Vi%CC%81ctor%20Hugo%20Nu%CC%81n%CC%83ez%20Escultor%2021.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content:center;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: portada 4s ease-in-out both;
    -o-animation: portada 4s ease-in-out both;
    animation: portada 4s ease-in-out both;
    animation-delay: 2s;
    
}

@keyframes portada {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
        
    }
    50%{
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        
    }
}
header figure{
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;

}

header hgroup{
    padding: 0px 50px;
    text-shadow: -2px 2px 6px rgba(1,1,1,.5);
    -ms-align-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    animation: animTextoPortada 6s ease-in both;
    animation-delay: 2.5s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@keyframes animTextoPortada {
    0%{opacity: 0}
    20%{opacity: 1}
    30%{opacity: 1}
    
    100%{opacity: .3}
}
header h1{
    font-size: 90px;
    color: rgba(250,250,250,1);
}
header h2{
    font-size: 40px;
    color: red;
   
}
.menuPrincipalContenedor{
    display: none;
}
.menuPrincipal{
    height: 50px;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-around;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
    background-color: rgba(1,1,1,.8);
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    animation: portadaNav 20s ease-in both;
    animation-delay: 3s; 
    
    
    
}

@keyframes portadaNav {
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        background-position: center bottom;
    }
}
@media(max-width: 900px){
   
}
@media(max-width: 400px){
    @keyframes portadaNav {
    0%{
        opacity: 0;
        background-image: url();
    }
    10%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        background-position: center bottom;

    }
}
}
.menuPrincipal a{
    text-decoration: none;
    color: white;
    font-size: 20px;
}
.menuResponsive{
    height: 100vh;
    width: 100%;
    position: fixed;
    background-color: rgba(1,1,1,.8);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    transform: translateX(100%);
    
    
}
#menuResponsiveCheckbox:checked ~ .menuResponsive{
    transform: translateX(0);
}
.menuResponsive a{
    text-decoration: none;
    color: #fff;
    padding: 80px 0px;
    font-size: 40px;
    
}
header input{
    display: none;
}
header label{
    font-size: 50px;
    color: rgba(250,250,250,.9);
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    cursor: pointer;
    
}

@media(min-width: 1100px){
    header label{
        display: none;
    }
    .menuPrincipalContenedor{
        display: block;
    }
    
    
}
@media (max-width: 1000px){
    header{
        background-image: url("https://www.xn--victorhugonuez-1nb.com/imagenes/digCatalogoTepoztlan/grande/Vi%CC%81ctor%20Hugo%20Nu%CC%81n%CC%83ez%20Escultor%2021.jpg");
    }
    
    header figure img{
        height: 200%;
        width: auto;
        
        
    }
    header figure{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 400px){
    header{
        background-image: url("https://www.xn--victorhugonuez-1nb.com/imagenes/digCatalogoTepoztlan/mediano/Vi%CC%81ctor%20Hugo%20Nu%CC%81n%CC%83ez%20Escultor%2021.jpg");
    }
    
    header h1{
        font-size: 70px;
    }
    header h2{
        font-size: 35px;
    }
    header hgroup{
        padding: 0px 20px;
    }
}
main{
    max-width: 2500px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}