/* Version: 0.107 */

body{
	background-color:#000000;
	background: url('images/fondobn.webp')  fixed;
	background-size: cover;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

/* cuerpo central  */
.Main-container {
	margin-top: 18px;
	margin-bottom: 7px;
}

a{
	text-decoration: none;
	color: #e59866;
	transition: all 0.4s ease;
}

a:hover{
	cursor: pointer;
	color: #FFFFFF;
}

.nav-bar {
	width: 100%;
  position: fixed;
}

.nav-bar > ul {
	display: flex;
	background: linear-gradient(110deg, #000000de 1%, #ffae00 100%);
	justify-content: flex-end;
	min-height: 6vh;
	max-width: 100%;
	height: auto;
	align-items: center;
	border: 1px #00075a91;
	border-style: none none solid;
	border-radius: 0 0 16px 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* logo */
.nav-bar-logo {
	margin-right: auto;
}

.nav-bar-img-logo {
	max-height: 56px;
	max-width: 56px;
}

.nav-bar-img-logo:hover {
	opacity: 0.3;
	transition: all 0.4s cubic-bezier(0.37, 0.13, 0.29, 1.05);
}

.nav-bar-logo ~ li{
	list-style-type: none;
	margin-right:0.2rem;
	font-family: sans-serif;
	color: #000;
	font-weight:700;
}

@media screen and (max-width: 400px) {
  .nav-bar > ul > .logo ~ li {font-size: 5vw;}
}

.nav-bar > ul > li > a{color: #000000;word-wrap: break-word;}
.nav-bar a:hover{color: #f1ebeb;}
.nav-bar > ul > li:hover {transition: all 0.3s ease;}
.nav-bar > ul > li > i{color: #FFFFFF;display: block;}

/* menu desp */
.menuDesp{
	position: absolute;
	/*background-color:  #424242;*/
	background: linear-gradient(70deg, #020202 25%, #424242 55%);
	/*! box-shadow: 0 3px 5px 0 rgba(231, 166, 26, 0.41); */
	z-index: 1;
	transition: all 1.4s ease;
}

.menuDesp > a:hover {
	background-color: #52ca30;
	color: #ffffff;
}

.menuDesp a{
	overflow: hidden;
	padding: 4px 5px 3px 5px;
	text-decoration: none;
	display: block;
	text-align: left;
	color: white;
}

/* banner */
.banner{
	background-color: #000000;
	width: auto;
	background-image: url('images/banner.webp');
	background-size: cover;
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 70px; /*corre el contenido de la barra de  menu */
}

/* If the screen size is 601px wide size */
@media screen and (min-width: 601px) {
	.header-site-name{font-size: 6vw;}
h2{font-size: 2.5rem;}
}
/* If the screen size is 600px wide or less*/
@media screen and (max-width: 600px) {
	.header-site-name{font-size: 12vw;}
	h2{font-size: 2rem;}
}

h1 {
	color: #FFFFFF;
	animation: glow 2s ease-in-out infinite alternate;
	margin: 0;
}

/*h2{font-size: 2.3rem;}*/

h4{
	margin: 0;
	color: white;
}

@keyframes glow {
	from {
		text-shadow: 0 0 20px #2d9da9;
	}
	to {
		text-shadow: 0 0 30px #34b3c1, 0 0 10px #4dbbc7;
	}
}

.header-site-slogan {
	font-size: 4vw;
	color: #FFFFFF;
	margin-top: 12px;
	margin-bottom: 10px;
	letter-spacing: 0.09em;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 15px darkblue;
}

/* estilo tablas*/

@media screen and (max-width: 640px) {
	table {
		display: block;
		overflow-x: auto;
	}
}

table {
	border-collapse: collapse;
	width: 100%;
}

table a {color: #009933;}

table a:hover {color: #ffffff;}

td {
	border: 1px solid #333333;
	padding: 4px;
	background: #0d0d0d;
}

th {
	padding: 4px;
	text-align: center;
	background-color: #262626;
	color: white;
	border: 1px solid #333333;
}

.text--wide {
	word-break: break-all;
	font-size:xx-small;
}


table tr:hover td {background-color: #004d4d;}

/*
td.large {
	word-break: break-all;
}
*/
/* block-grupos aside, A-B-C-groups   */

aside {
	box-sizing: border-box;
	display:flex;
	flex-direction:column;
	align-items: center;
	border: 1px double #333;
	height: max-content;
}

.A-group, .C-group {
	margin-left: 4px;
	margin-right: 4px;
}

.B-group {
	width: 100%;
}

.block {
	width:100%;
	color:#FFFFFF;
	background-color:#000000;
}

.block_title{
	text-align: center;
	padding: 6px;
}

.block_content {
  margin: 8px;
}

.block_content > a {
	font-style: italic;
	display: block;
}

.block_content > a:hover {
	cursor: pointer;
	text-decoration: underline;
	color: #ffffff;
	background-color: green;
}
/* iconos e indexes */
.moreRead {
	display: flex;
	flex-flow: wrap;
}

.iconsNavBar > ul a {
	color: beige;
	overflow: auto;
	animation: glow 2s ease-in-out infinite alternate;

}

/* modulo users y block */
.block-users{
	text-align:center;
}

.block-users input, .block-users button {
	width: 90%;
	margin: 10px 0 10px 0;
}

.block-users a{
	text-align: left;
}

.mod-users_LoginForm{
	text-align: center;
}

/* Articulos */
article {
	color:#cecece;
	background-color:#000000;
	border:1px double #333;
	margin-bottom: 4px;
	overflow: hidden;
	padding: 0.5em;
	font-size: 1.1rem;
}

article hr {
	border-top: 1px;
	margin-bottom: 1.3rem;
	width: 97%;
	color: #393939;
}

article p {
	padding: 0.1em;
}

p.author  {
	font-size: 0.8rem;
}

article b {
	color: whitesmoke;
}

.article-main footer{
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.nav-main_moreArt {
	margin: auto;
	overflow: auto;
	white-space: nowrap;
}

.text-center{
	text-align: center;
}

/* menu mod nav bar */

article > nav ul {
	justify-content: center;
	margin: auto;
  list-style-type: none;
	padding: 0;
}

.article-main header {
	width: 100%;
}


article > nav ul li a:hover{
	color: #fdfdfd;
	text-shadow: 1px 1px 2px #6f6969, 0 0 25px #4275a2, 0 0 15px darkblue;
	transform: scale(1.03, 1.03);
}


/* The popup form - hidden by default */
.form-popup {
	display: none;
  position: fixed;
  bottom: 0;
	left: 10%;
	width: 70%;
  z-index: 9;
	background: black;
}

/* btn top */

#TopBtn {
	text-align: center;
	width: 4rem;
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 0.1%; /* Place the button at the bottom of the page */
  right: 0.1%; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  background-color: #e7a61a8a; /* Set a background color */
  color: #fff; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 10px; /* Rounded corners */
  /*font-size: 38px; /* Increase font size */
	/*transition: all 2s ease;*/
	animation: opacity_pulse 1s alternate infinite;
}

@keyframes opacity_pulse {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.5;
  }
}

#TopBtn:hover {
	animation: none;
	opacity: 1.0;
}

/* select */

select {
	margin:4px;
}

/* definicion de los articulos */

article img {
	max-width: 100%;
	height: auto;
	border: 1px solid #2b1f05;
	margin: 5px;
}

.article-main.title{
	text-align: center;
	margin: 6px;
	padding: 0.4rem;

}

.article-main.description {
	text-align: left;
	color: #eaeaea;
	margin: 5px;
}

.author {
	text-align: right;
	margin: 5px;
	width: 96%;
}


section > .author {
	text-align: left;
	padding: 0;
	margin: 0;
}

.summary-main {
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.summary.detail{
	padding: 1px;
	margin: 0;
	color: #d8d8d8;
	text-align: left;
}

.summary.title{
	padding: 0;
	margin: 0;
}

.article-main.previous{
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
}

.icon{
	font-size: 5.5vh;
	animation: icon-anima 2s ease-in-out infinite alternate;
	margin: 5px;
}
.article.resumen {
	background-color: #0f0f0f;
	margin: 0.1rem;
	padding: 0.1rem;
	border-radius: 0.4rem;
	border: solid 1px #171717;
}

@keyframes icon-anima {
	from {
		text-shadow: 0 0 7px  burlywood;
	}
	to {
		text-shadow: 0 0 7px brown, 0 0 8px azure;
	}
}

.icon:hover{
	color: whitesmoke;
	text-decoration: none;
}

figure{
	padding: 0;
	margin: 0;
}


.nav-main_mostRead ul {
	display: grid;
}

.nav-main_mostRead > .title {
  text-decoration: underline;
}

.MoreRead{
	color:#cacaca;
	font-style: italic;
	text-decoration: none;
	animation: glow 2s ease-in-out infinite alternate;
	list-style: none;
	display: block;
	justify-content: center;
}

.nav-main.title{
	text-align: center;
	width: 100%;
	margin: 0;
  color: aliceblue;
}

.MoreRead li {
	display: inline;
	font-size: 2.2rem;
	padding: 5px;
	animation: glow 2s ease-in-out infinite alternate;
}

.MoreRead li:hover {
	background: #3ead47;
	border: 1px solid #252525;
	border-radius: 0.2em;
	transition: all 0.2s ease;
}

.thumbnail {
	max-width: 90%;
	height: auto;
	border: 1px solid #252525;
	border-radius: 4px;
	padding: 5px;
	width: 250px;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.youtube-thumbnail {
	max-width: 98%;
	height: auto;
	border: 1px solid #252525;
	border-radius: 4px;
	padding: 5px;
	width: 300px;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.thumbnail:hover, .youtube-thumbnail:hover {
	box-shadow: 0 0 3px 1px rgba(4, 131, 173, 0.5);
	transform: scale(1.03, 1.03);
}

iframe {
	padding: 5px;
}

.youtube-video {
	border: 0;
	width: 426px;
	height: 240px;
	margin: 0 auto;
	max-width: 100%;
}

.spotify-playlist {
	border: 0;
	width: 300px;
	height: 380px;
	margin: 0 auto;
	max-width: 100%;
}

.nav-bar {
	display: block;
	font-family: Arial, sans-serif;
	/*animation: glow 2s ease-in-out infinite alternate;*/
}

.nav-bar.nav-bar--top{
	color: white;
}

article > nav ul {
	list-style: none;
	overflow: hidden;
}

article > nav ul li a {
	/*! display: block; */
	padding: 5px;
	/*! color: #fff; */
}

article > nav ul li:hover {
	background: #3ead47;
	transition: all 0.2s ease;
	border-radius: 7px
}

.medium-editor-textarea{
 padding: 0;
 outline: medium none;
}

/* formas */

input{
	color:#000000;
	border-style: solid;
	border-width: 1px;
	box-shadow: 1px 1px 2px grey;
	transition: all 0.4s ease;
	padding: 8px 4px;
	margin: 8px 10px 8px 0;
	box-sizing: border-box;
}

textarea{
	margin: 8px 10px 8px 0;
}

input:hover, textarea:hover{
	cursor: pointer;
}

button {
    background-color: #2b7b2e;
    color: white;
    padding: 14px ;
    margin: 5px 0;
    border: none;
    cursor: pointer;
}

button:hover {
    cursor: pointer;
    opacity: 0.7;
}

.block-user-avatar{
	border-radius: 50%;
	max-height: 50px;
	max-width: 50px;
}

/* nav bar icons */
.iconsNavBar ul{
	display: flex;
}


/* infobox */
.InfoBox{
	border-radius: 5px;
  border-width: 1px;
	border-style: solid;
	text-align: center;
	margin-top: 4px;
}

.InfoBox.console{
	text-align: left;
	padding: 0.5rem;
	border-color: #797979;
	background-color: #000000;
	color:#FFFFFF;
}


.default{
	border-color: #797979;
	background-color: #000000;
	color:#FFFFFF;
}

.warn{
	background:#292828;
	border-color: #525252;
	color: #ffffff;
}

.error{
	background: #FFFF31;
	border-color: #040404;
	color: #F20000;
}

.InfoBox-title{
	margin: 5px;
}

/* footer main */
body > footer {
	box-sizing: border-box;
	background-color:#000000;
	color: #B3B3B3;
	text-align: center;
	width: 100%;
	border:1px double #333;
	margin: auto auto 0 auto;
	font-size: 0.8rem;
}

body > footer p{
	margin: 3px;
}