/* CSS Document */
body {
  font-family: 
    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", 
    "Helvetica Neue", sans-serif;
  font-size: 1.3em;
  line-height: 1.5;
  margin: 20px;
}

	.xs-text {
		font-size: 60%;
	}

	.headings-int {
		font-family: 'Open Sans', sans-serif;
		color: #6c6b82;
		letter-spacing: 1px;
		font-size: 2em;
		margin-top: 0;
	}

	/* .tab-content{
		background-color: cadetblue;
		padding: 20px;
		border-width: thin;
		border-color: #ddd;
		border-style: none solid solid solid;
		margin: 20px 0;
	} */
	.tab {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.1em;
		float: left;
		width: 20%;
		height: 300px;
		line-height: 1.8em;
		font-weight: 300;
		letter-spacing: .7px;
	}

	/* Style the buttons inside the tab */
	.tab button {
		display: block;
		background-color:#e6e3fc;
		color: #337ab7;
		padding: 10px;
		width: 100%;
		border-bottom: 1px solid #af76f8;
		border-left: none;
		border-top: none;
		border-right: none;
		outline: none;
		text-align: center;
		cursor: pointer;
		transition: 0.3s;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background-color: #f8f8f8;
	}

	/* Create an active/current "tab button" class */
	.tab button.active {
		color: #000;
		background-color: #f0f0f0;
	}

	/* Style the tab content */
	.tabcontent {
		float: left;
		padding: 20px;
		width: 80%;
		border-left: none;
		background-color: #f0f0f0;
		margin-bottom: 20px;
		opacity: 1;
		animation: fade 0.2s linear;
	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@media (max-width: 900px) {
		.tabcontent {
			font-size: 12px;
		}
	}
















section.nota-pin {
	--color-pin: #0099ff;
	box-sizing: border-box;
	font-size: 100%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 50px 0;
	padding: 0;
}

section.nota-pin .hoja-pin {
	--paper-dark: #e5c93d;
	--paper-color: #ffed87;
	--paper-shadow: #c9bf8d;
	position: relative;
	margin: 6em auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 40%;
	min-height: 175px;
	background: linear-gradient(135deg,
			var(--paper-dark),
			30%,
			var(--paper-color));
	box-shadow: 3px 3px 2px var(--paper-shadow);
	transform: rotate(0deg);
	transform-origin: center center;
	padding: 15px;
	margin-bottom: 50px;
	padding-top: 40px;
}

section.nota-pin .hoja-pin p {
	margin: auto;
}

section.nota-pin .hoja-pin ul {
	padding-inline-start: 2em;
	line-height: normal;
}

section.nota-pin .hoja-pin ul li {
	margin-bottom: 1em;
}

section.nota-pin .hoja-pin .pin {
	--pin-color: #d02627;
	--pin-dark: #9e0608;
	--pin-light: #fc7e7d;
	--pin-color: var(--color-pin);
	--pin-dark: #9e3e06;
	--pin-light: #fca47d;
	--pin-color: var(--color-pin);
	--pin-dark: #1d069e;
	--pin-light: #8e7dfc;
	--pin-color: var(--color-pin);
	--pin-dark: #069e0b;
	--pin-light: #7dfcbf;
	--pin-color: var(--color-pin);
	--pin-dark: #062e9e;
	--pin-light: #7da4fc;
	position: absolute;
	top: 0;
	left: 20px;
	width: 60px;
	height: 50px;
}

section.nota-pin .hoja-pin .shadow {
	position: absolute;
	top: 18px;
	left: -8px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
}

section.nota-pin .hoja-pin .metal {
	position: absolute;
	width: 5px;
	height: 20px;
	background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
	border-radius: 0 0 30% 30%;
	transform: rotate(50deg);
	transform-origin: bottom left;
	top: 15px;
	border-bottom: 1px solid #808080;
}

section.nota-pin .hoja-pin .bottom-circle {
	position: absolute;
	right: 15px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: var(--pin-color);
	background: radial-gradient(circle at bottom right,
			var(--pin-light),
			25%,
			var(--pin-dark),
			90%,
			var(--pin-color));
}

section.nota-pin .hoja-pin .bottom-circle::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2px;
	width: 20px;
	height: 30px;
	transform: rotate(55deg);
	transform-origin: 100% 100%;
	border-radius: 0 0 40% 40%;
	background: linear-gradient(to right,
			var(--pin-dark),
			30%,
			var(--pin-color),
			90%,
			var(--pin-light));
}

section.nota-pin .hoja-pin .bottom-circle::after {
	content: "";
	position: absolute;
	right: -10px;
	top: -5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(circle at right,
			var(--pin-light),
			30%,
			var(--pin-color),
			var(--pin-dark) 80%);
}

section.nota-pin .hoja-pin .imagenPie {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2em;
}

section.nota-pin .hoja-pin .imagenPie img {
	width: 50%;
	max-width: 600px;
}

section.nota-pin .hoja-pin .imagenPie p {
	font-size: 0.75em;
	text-align: center;
	margin-top: 20px;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	section.nota-pin .hoja-pin {
		margin: 0 auto;
		width: 90%;
		transform: rotate(0);
	}
	section.nota-pin .hoja-pin .imagenPie img {
		width: 100%;
	}
}