/*---------MENU BACKGROUND------------------*/
.menu-recuperar-container {
	width: 50%;
	right: -50%;
	padding: 3%;
}

.menu-container-active {
	right: 0% !important;
}

/*----------END MENU BACKGROUND-----------------*/

.menu-recuperar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.menu-recuperar-title {
	font-family: "Montserrat", serif-italic;
	font-size: 2.5rem;
	font-weight: 300;
        color:#000000;
}

#menu-recuperar-container-p {
	margin-bottom: 10px;
	margin-top: 7%;
        color:#000000;
}

/*-----------------BUTTON RECUPERAR--------------------------*/
.sep-line {
	display: block;
	width: 100%;
	border-bottom: 1px solid lightgrey;
	margin-top: 15px;
	margin-bottom: 15px;
}

#btn-menu-recuperar {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin-top: 15px;
	margin-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	cursor: pointer;
	background-color: var(--logo-color);
	color: white;
	border: 1px solid var(--logo-color);
}
/*-------------------END BUTTON RECUPERAR------------------------*/


/*---------MENU BACKGROUND------------------*/
.menu-cambiar-container {
	width: 50%;
	right: -50%;
	padding: 3%;
}

/*----------END MENU BACKGROUND-----------------*/

.menu-cambiar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.menu-cambiar-title {
	font-family: "Montserrat", serif-italic;
	font-size: 2.5rem;
	font-weight: 300;
        color:#000000;
}

#menu-cambiar-container-p {
	margin-bottom: 10px;
	margin-top: 7%;
        color:#000000;
}

/*-----------------BUTTON CAMBIAR--------------------------*/

#btn-menu-cambiar {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin-top: 15px;
	margin-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	cursor: pointer;
	background-color: var(--logo-color);
	color: white;
	border: 1px solid var(--logo-color);
}
/*-------------------END BUTTON CAMBIAR------------------------*/

/* Maximum aspect ratio */
@media (max-aspect-ratio: 1200/900) {

    .menu-recuperar-container {
            width: 50%;
            right: -50%;
            padding: 5%;
    }
    
    .menu-cambiar-container {
            width: 50%;
            right: -50%;
            padding: 5%;
    }
    
    /*Este menu-container-active debe ir en todos los media-queries en los que
    se modifique el menu-carrito-container. Sino, deja de funcionar.*/
    .menu-container-active {
            right: 0%;
    }

}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 800/900) {

    .menu-recuperar-container {
            width: 100%;
            right: -100%;
            padding: 7%;
    }
    
    .menu-cambiar-container {
            width: 100%;
            right: -100%;
            padding: 7%;
    }
    
    /*Este menu-container-active debe ir en todos los media-queries en los que
    se modifique el menu-carrito-container. Sino, deja de funcionar.*/
    .menu-container-active {
            right: 0%;
    }

}

/* Portrait phones (less than 700px) */
@media (hover: none)
and (pointer: coarse)
and (orientation: portrait), (max-width: 400px) {

	/*---------MENU BACKGROUND------------------*/
	.menu-recuperar-container {
		width: 100%;
		right: -100%;
		padding: 5%;
	}
        
        .menu-cambiar-container {
		width: 100%;
		right: -100%;
		padding: 5%;
	}

	.menu-container-active {
		right: 0%;
	}
	/*----------END MENU BACKGROUND-----------------*/

	.menu-recuperar-header {
		margin-bottom: 30px;
	}

	.menu-recuperar-title {
		font-size: 24px;
	}

	#menu-recuperar-container-p {
		margin-bottom: 30px;
		margin-top: 7%;
		/*font-size: 2.5rem;*/
	}
        
        .menu-cambiar-header {
		margin-bottom: 30px;
	}

	.menu-cambiar-title {
		/*font-size: 5rem;*/
	}

	#menu-cambiar-container-p {
		margin-bottom: 30px;
		margin-top: 7%;
		/*font-size: 2.5rem;*/
	}

	.sep-line {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	#btn-menu-recuperar {
		/*height: 7rem;*/
		margin-top: 30px;
		margin-bottom: 30px;
		/*font-size: 2.5rem;*/
	}
        
        #btn-menu-cambiar {
		/*height: 7rem;*/
		margin-top: 30px;
		margin-bottom: 30px;
		/*font-size: 2.5rem;*/
	}
}