@import url("colores.css");

#menu-icon {
    font-size: 3.6rem;
    display: none;
    color: var(--whitecolor);
    cursor: pointer;
}


.header {
    background-image: url(/src/Inicio/Fondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 5% 2rem;
    padding: 0;
    display: block;
    z-index: 4000;
    transition: .5s ease;
    align-items: center;
}

/*Portada de inicio*/
.banner {
    padding: 0;
    display: flex;
    position: relative;
    height: 12rem;
    width: 100%;
    top: 0;
}

.banner-superior {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    align-content: center;
    text-align: center;
    
}

.logo-container {
    margin: 0;
    cursor: default;
    position: relative;
    z-index: 90;
    left: 1%;
    top: 50%;
    transform: translateY(-50%);
    width: 13%;
    justify-content: center;
    
    padding: 0;
}

.logo-container .logo-img {
    padding: 0;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    
}

.logo-container img {
    width: 100%;
    height: 100%;
    background: var(--whitecolor);
    border-radius: 1.5rem;
    padding: 0;
    margin: 0;
}

.banner .texto-container {
    z-index: 100;
    width: auto;
    left: 18%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    display: block;
    
    height: auto;
}

.texto-container h1 {
    font-size: 5rem;
    font-family: "Dancing Script", cursive;
    color: var(--secondarycolor);
    -webkit-text-stroke: .5px var(--whitecolor);
    font-weight: 900;
}

.texto-container span {
    margin-left: 2rem;
    font-size: 4rem;
    color: var(--secondarycolor);
    -webkit-text-stroke: .5px var(--whitecolor);
}

.navbar a {
    position: relative;
    font-size: 1.7rem;
    color: var(--whitecolor);
    font-weight: 550;
    padding: .5rem;
    transition: .5s ease;
    

}

.navbar {
    border-top: .2rem solid var(--plata);
    border-bottom: .2rem solid var(--plata);
    padding: 1rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.navbar a:hover {
    color: var(--naranjatruper);
}

.header.sticky {
    -webkit-box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 0.75);
}

.header.sticky .navbar a {
    color: var(--whitecolor);

}

.header.sticky .navbar::after {
    transition: 1s ease-out;
}

.header.sticky .navbar a.active {
    color: var(--naranjatruper);

}

.header.sticky .navbar a::before {
    opacity: .7;
    background: var(--naranjatruper);
}

.navbar a.active::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0px;
    height: 0.3rem;
    background-color: var(--naranjatruper);
}

@media (max-width:1600px){
    

    .texto-container h1 {
        font-size: 4rem;
    }

    .texto-container span {
        font-size: 3rem;
    }
}

@media (max-width:1250px) {

    .logo-container {
        
        width: 15%;
    
    }

    .navbar a {

        font-size: 1.5rem;

    }

}

@media (max-width:900px) {

    .logo-container {
        
        width: 19%;
    
    }

    .banner .texto-container {
        
        left: 21%;
        
        
    }
    

    .navbar a {

        font-size: 1.4rem;

    }

}

@media (max-width:840px) {
    .navbar a {
        font-size: 1.3rem;
    }

}

@media (max-width:800px) {
    #menu-icon {
        display: block;
        
    }

    .logo-container {
        width: 23%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .banner .texto-container {
        display: none;
    }
    

    .navbar {
        display: none;
    }

    .navbar.active {
        display: block;
    }

    

    .btn-menu{
        width: 4.3rem;
        top: 10%;
        position: fixed;
        
    }

    
    .header.nav_transparente,
    .header .nav_transparente {
        -webkit-box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 1);
        -moz-box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 1);
        box-shadow: 0px 10px 44px -6px rgba(0, 0, 0, 1);
    }

    .navbar a {
        display: block;
        font-size: 1.7rem;
        margin: 2rem 0;
        color: var(--whitecolor);

    }

    .navbar a.active {
        color: var(--maincolor);
    }
}

@media (max-width:600px){
    .logo-container {
        width: 26%;
    }
}

@media (max-width:450px){
    .logo-container {
        width: 30%;
    }
}

@media (max-width:350px){
    .logo-container {
        width: 35%;
    }
}