body {
	/* background: linear-gradient(-50deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 20s ease infinite; */
	background-image: linear-gradient(90deg, #1D406D, #3F67A9);

}

h2 {
	color     : white;
	text-align: center;
}

@keyframes gradient {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/*
---------- BOTÓN CON ÍCONO --------
*/

.bton-show {
	background-color: chocolate;
	border          : none;
	color           : rgb(255, 255, 255);
	border-radius   : 10px;

	padding  : 3px 10px;
	font-size: 16px;
	cursor   : pointer;
}

/* Darker background on mouse-over */
.bton-show:hover {
	background-color: coral;
	text-decoration : none;
}

.bton {
	background-color: blue;
	border          : none;
	color           : white;
	border-radius   : 10px;

	padding  : 3px 10px;
	font-size: 16px;
	cursor   : pointer;
}

/* Darker background on mouse-over */
.bton:hover {
	color:black;
	text-decoration : none;
}

a.bton:hover{
	color: white;
	background-color: #3498db;
}

.bton-delete {
	background-color: firebrick;
	border          : none;
	color           : white;
	padding         : 3px 10px;
	font-size       : 16px;
	cursor          : pointer;
	border-radius   : 10px;
}

.bton-delete:hover {
	background-color: crimson;
}


.bton-update {
	background-color: blue;
	border          : none;
	color           : white;
	padding         : 3px 10px;
	font-size       : 16px;
	cursor          : pointer;
	border-radius   : 10px;
}

.bton-update:hover {
	background-color: #3498db;
}

/* ------------------------------- */
.courses {
	padding   : 6rem 0;
	text-align: center;
}

.courses__title {
	font-size  : 35px;
	font-weight: 600;
	color      : #FFFF;
	text-align : center;
	margin     : 30px;
}

.courses__menssage {
	font-size  : 20px;
	font-weight: 200;
	color      : #FFFF;
	display    : block;
	padding    : 2rem 0 0 0;
	text-align : left;
}

.courses__list {
	padding   : 2rem 0;
	text-align: center;
	width     : 90%;
	margin    : 0 auto;
}

.course {
	border       : 1px solid #A5AEAE;
	border-radius: 5%;
	width        : 30%;
	padding      : 1rem;
	font-size    : 20px;
	font-weight  : 500;
	color        : #FFFF;
	margin-left  : 5px;
	margin-top   : 10px;
}

.course:hover {
	transform       : scale(1.1);
	background-color: #fff;
	opacity         : 0.8;
	font-size       : 20px;
	font-weight     : 500;
	color           : black;
	border-color    : black;
	cursor          : pointer;
}

.course--logo {
	height: 60px;
	width : 60px;
	margin: 0 auto;
}

.course--logo--img {
	height: 60px;
	width : 60px;
}

.course--name {
	font-size  : 20px;
	font-weight: 600;
	color      : #FFFF;
	margin     : 1rem 0 0 0;
}

.course--button {
	background-color: #3673D9;
	color           : #fff;
	font-size       : 20px;
	border          : none;
	padding         : 16px 40px 16px 40px;
	border-radius   : 2px;
	cursor          : pointer;
}

.course--button:hover {
	background-color: #0F3574;
}

.loader {
	border           : 16px solid #f3f3f3;
	border-radius    : 50%;
	border-top       : 16px solid #3498db;
	width            : 120px;
	height           : 120px;
	margin-left      : 35%;
	-webkit-animation: spin 2s linear infinite;
	animation        : spin 2s linear infinite;

}

/* SAFARI*/
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

#mapid {
	width : 100%;
	height: 500px;
}

.info {
	padding      : 6px 8px;
	font         : 14px/16px Arial, Helvetica, sans-serif;
	background   : white;
	background   : rgba(255, 255, 255, 0.8);
	box-shadow   : 0 0 15px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.info h4 {
	font-size: 15px;
	margin   : 0 0 5px;
	color    : #777;
}


.infoo {
	padding      : 6px 8px;
	font         : 14px/16px Arial, Helvetica, sans-serif;
	background   : white;
	background   : rgba(255, 255, 255, 0.8);
	box-shadow   : 0 0 15px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.legend {
	background-color: "black";
	line-height     : 25px;
	color           : #555;
	width           : auto;
}

.legend i {
	width       : 18px;
	height      : 18px;
	float       : left;
	margin-right: 8px;
	opacity     : 0.7;
}

.divtable {
	display: table;
}

.divtable>div {
	display: table-row;
}

.divtable>div>div {
	display: table-cell;
	padding: 5px;
}