/*
 * media
 */
 

 
/*
 * Globals
 */


@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,200;1,300;1,800&display=swap');

/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
	color: #333;
	text-shadow: none;
	/* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
	font-family: 'Prompt', sans-serif;
	font-weight: 800;
	text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
	background-image: url("../img/bg_rm.jpg");
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: cover;
	background-attachment: fixed;
	
}

.cover-container {
	max-width: 100em;
    
}
html, body {
    overflow-x: hidden;
}


/*
 * Header
 */

.nav-masthead .nav-link {
	color: rgba(255, 255, 255, .5);
	border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
	border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link+.nav-link {
	margin-left: 1rem;
}

.nav-masthead .active {
	color: #fff;
	border-bottom-color: #fff;
}


/*
 *______Mis Clases______
 *
 */
.relativo {
	position: relative;
}

.imgabsoluta {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.inicioAbsoluta{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	left: 0%;

}


.divabsoluta {

	height: 30%;
	width: 100%;
	position: absolute;
	top: 30%;
	left: 0%;
}

.logoBrujoAbsoluta {
	position: absolute;
	width: 100%;
	top: 20%;
	
}

.botonesAbsoluta {
	position: absolute;
	top: 30%;
	left: 0;
}

.cartasAbsoluta {
	position: absolute;
	height: 90%;
	width: 75%;

	/* background-image: url("img/fondosweb.png"); */
}
.cartasfondo {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0%;

}

.logosAbsoluta {
	position: absolute;
	width: 100%;
}

.parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	}
	
.logoDiscord {
	width: auto;
}
.logoDiscord:hover {
	filter: drop-shadow(0 0 10px rgba(227, 225, 235, 0.596));
}
.btn_discord:hover {
	filter: drop-shadow(0 0 10px rgba(227, 225, 235, 0.596));
}

.logotopgg {
	width: auto;
}
.logotopgg:hover {
	filter: drop-shadow(0 0 10px rgba(227, 225, 235, 0.596));
}

.bi-book-half:hover{
	filter: drop-shadow(0 0 10px rgba(227, 225, 235, 0.596));
}

.logosPosition {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	margin: 10px;
	

}

.divlogosPos {
	position: absolute;
	top: 65%;
	width: 100%;

}

.masterAbsoluta{
	position: absolute;
	height: 100%;
	width: 99%;
	top: 200%;
	background-image: url("img/fondoswebpixel.png");
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: cover;
	/* Resize the background image to cover the entire container */
}

.bannermaster{
	width: 80%;
}

.opcionesAbsoluta{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 301%;
	left: 0%;
}

.opcionesAbsoluta2{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 410%;
	left: 0%;
}

.opciones{
	background-image: url("img/carrusel2.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 15px;
	background-clip: content-box;
}


#lrm {
	max-width: 25%;
	max-height: 25%;
}

.hero-image {
	background-image: url("../img/bg_rm.jpg");
	/* The image used */
	background-color: #525050;
	/* Used if the image is unavailable */
	height: 100%;
	/* You must set a specified height */
	width: 100%;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: cover;
	/* Resize the background image to cover the entire container */
}

.margen_distancia {
	margin-top: 300px;
}


.idlogorm {
	animation: logo_intro 2s ease 0s 1 normal forwards;
}

@keyframes logo_intro {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateX(-250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateX(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateX(-68px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateX(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateX(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}
}


/* -----animacion fade-in caracteristicas-------- */

/* @keyframes fadeInUp {
	0% {
	  transform: translateY(100%);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0%);
	  opacity: 1;
	}
  }
  
  .fadeInUp-animation {
	animation: 1.5s fadeInUp;
  }
 */