* {
  margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    height: 63px;
    background: #900;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn-menu{
    display: none;
}

header label{
    font-size: 30px;
    cursor: pointer;
    display: none;
    font-family: 'Baloo Bhaina', cursive;
}


.menu ul{
    background: #900;
    display: flex;
    list-style: none;
}

.menu ul ul{
    display: none;
}

.menu a{
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Baloo Bhaina', cursive;
}

.menu a:hover{
    /*background: rgba(0,0,0,0.3);*/
	background: linear-gradient(#7a0000, #e0b2b2);
    border-radius: 16px;
}

.menu a span{
    margin-left: 10px;
    margin-right: 7px;
}

.menu ul li:hover ul{
    display: block;
    position: absolute;
    min-width: 220px;
    text-align: center;
}

/* haciendo menu responsive*/

@media (max-width:941px){
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        top: 63px;
        left: 0;
        width: 75%;
        transform: translateX(-100%);
        transition: all 0.3s;
		z-index:1500;
    }
    
    .menu ul{
        display: block;
        /*background: #b74c4c;*/
		background: linear-gradient(#7a0000, #e0b2b2);
    }
    
    .menu ul li:hover ul{
        /*display:none;*/
        position: static; 
    }
    
    #btn-menu:checked ~ .menu {
        transform: translateX(0%);
    }
    
    .menu ul ul{
        background: rgba(0,0,0,0.4);
    }
    
    .menu ul ul a{
        padding: 15px 40px;
        padding-left: 40px;
    }
	
	/* ocultar los top para responsive*/
	.nav-secundario{
		display:none;
	}
	
	.logo{
		display:none;
	}
	
	.social{
		display:none;
	}
}