@media (orientation: landscape) {

	*{
		box-sizing:border-box;
		backface-visibility:hidden;
	}

	body{
		padding:0;
		margin:0;
		display:flex;
		align-items:center;
		justify-content:center;

		background:url(../imagenes/fondo.png) center;
		background-size:100% 100%;

		color:white;

		overflow:hidden;
	}

	.principal{

		height:98vh;
		width:95vw;

		display:grid;

		grid-template-columns:
		0.5fr repeat(5,2fr) 0.5fr;

		grid-template-rows:
		0.2fr repeat(5,2fr) 0.2fr;

		will-change:transform;

	}

	.vertical{
		display:none;
	}

	.logo1{

		grid-row:3/6;
		grid-column:2/5;

		width:100%;

		transform:translateZ(0);

	}

	.sombra1{

		grid-row:4/6;
		grid-column:3/4;

		display:grid;

		grid-template-columns:
		repeat(5,2fr);

		grid-template-rows:
		repeat(5,2fr);

	}

	.mensaje{

		grid-row:5/7;
		grid-column:2/5;

		font-size:3vw;

		display:flex;

		align-items:center;
		justify-content:center;

		background:rgba(28,38,66,.92);

		border:solid .1vw #f7c345;

		box-shadow:0 0 15px rgba(0,0,0,.6);

		height:43%;
		width:50%;

		text-align:center;

		border-radius:20px;

		translate:13vw 15vh;

		z-index:5;

	}

	.sombra2{

		grid-row:1/6;
		grid-column:1/6;

		aspect-ratio:1/1;

		border-radius:50%;

		background:
		radial-gradient(
		circle,
		rgba(242,167,13,.45) 0%,
		rgba(242,167,13,.18) 40%,
		rgba(242,167,13,.05) 70%,
		transparent 100%
		);

		filter:blur(20px);

		opacity:.95;

		animation:anima 4s ease-in-out infinite;

		transform:translateZ(0);

	}

	@keyframes anima{

		0%{
			transform:
			scale(1);
			opacity:.82;
		}

		50%{
			transform:
			scale(1.08);
			opacity:1;
		}

		100%{
			transform:
			scale(1);
			opacity:.82;
		}

	}

	.registro{

		grid-row:2/4;
		grid-column:5/7;

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 12px rgba(0,0,0,.5);

		border-radius:5px;

		background:rgba(28,38,66,.82);

		transform:translateZ(0);

	}

	.titoRe{

		grid-row:2/3;
		grid-column:3/6;

		text-align:center;

		font-size:3vw;

	}

	.formu1{

		grid-row:3/4;
		grid-column:2/4;

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 8px rgba(0,0,0,.4);

		border-radius:5px;

		font-size:2vw;

		outline:none;

	}

	.formu2{

		grid-row:3/4;
		grid-column:5/7;

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 8px rgba(0,0,0,.4);

		border-radius:5px;

		font-size:2vw;

		outline:none;

	}

	.botin1{

		grid-row:5/6;
		grid-column:2/4;

		display:flex;

		border-radius:20px;

		justify-content:center;
		align-items:center;

		font-size:2.5vw;

		background:rgba(28,38,66,.95);

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 10px rgba(0,0,0,.5);

		color:white;

		cursor:pointer;

		transition:.2s;

	}

	.botin1:hover{

		transform:scale(1.03);

	}

	.botin2{

		grid-row:5/6;
		grid-column:5/7;

		display:flex;

		border-radius:20px;

		justify-content:center;
		align-items:center;

		font-size:2.5vw;

		background:rgba(28,38,66,.95);

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 10px rgba(0,0,0,.5);

		color:white;

		cursor:pointer;

		transition:.2s;

	}

	.botin2:hover{

		transform:scale(1.03);

	}

	.conte{

		height:100%;
		width:100%;

		display:grid;

		grid-template-columns:
		0.5fr repeat(5,2fr) 0.5fr;

		grid-template-rows:
		0.2fr repeat(5,2fr) 0.2fr;

	}

	.login{

		grid-row:5/7;
		grid-column:5/7;

		border:solid .1vw #f7c345;

		box-shadow:
		0 0 12px rgba(0,0,0,.5);

		border-radius:5px;

		background:rgba(28,38,66,.82);

		transform:translateZ(0);

	}

	.conte1{

		height:100%;
		width:100%;

		display:grid;

		grid-template-columns:
		0.5fr repeat(5,2fr) 0.5fr;

		grid-template-rows:
		0.2fr repeat(5,2fr) 0.2fr;

	}

}



@media (orientation: portrait) {

	body{

		padding:0;
		margin:0;

		overflow:hidden;

		background:
		linear-gradient(
		180deg,
		rgba(9,14,30,1) 0%,
		rgba(15,22,45,1) 40%,
		rgba(8,10,20,1) 100%
		);

		font-family:sans-serif;

	}

	.principal{
		display:none;
	}

	.vertical{

		width:100vw;
		height:100vh;

		display:flex;

		flex-direction:column;

		align-items:center;
		justify-content:center;

		position:relative;

		overflow:hidden;

		color:white;

	}

	.vertical::before{

		content:"";

		position:absolute;

		width:70vw;
		height:70vw;

		border-radius:50%;

		background:
		radial-gradient(
		circle,
		rgba(242,167,13,.45) 0%,
		rgba(242,167,13,.15) 45%,
		transparent 75%
		);

		filter:blur(15px);

		animation:flotar 4s ease-in-out infinite;

	}

	.vertical img{

		width:55vw;

		aspect-ratio:1/1;

		object-fit:contain;

		z-index:2;

		margin-bottom:5vh;

		filter:drop-shadow(
		0 0 20px rgba(242,167,13,.35)
		);

	}

	.vertical h1{

		width:80vw;

		font-size:8vw;

		text-align:center;

		line-height:1.3;

		font-weight:900;

		z-index:2;

		margin:0;

		text-shadow:
		0 0 10px rgba(0,0,0,.5);

	}

	.vertical p{

		width:75vw;

		font-size:4vw;

		text-align:center;

		line-height:1.5;

		opacity:.8;

		margin-top:3vh;

		z-index:2;

	}

	@keyframes flotar{

		0%{
			transform:
			translateY(0px)
			scale(1);
		}

		50%{
			transform:
			translateY(-2vh)
			scale(1.08);
		}

		100%{
			transform:
			translateY(0px)
			scale(1);
		}

	}

}