/* WOW */

@media only screen {
	/* COVER */
	#dinamicas #cover {
		position: relative;
		height: 430px;
		max-height: 80vh;
		background: #faf7f2;
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(250, 247, 242, 1) 25%);
	}

	#dinamicas #cover .cover-container {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}

	#dinamicas #cover .cover-container > * {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#dinamicas #cover .cover-container h1 {
		font-size: 26px;
		line-height: 1.2;
		font-weight: 700;
		color: #111;
		letter-spacing: 1px;
		transform: translate(-110%, -100%);
		width: 40%;
	}

	#dinamicas #cover .cover-container p {
		font-size: 16px;
		line-height: 1.2;
		font-weight: 400;
		color: #646464;
		width: 90%;
		transform: translate(-50%, 50%);
	}

	#dinamicas #cover .cover-container .hero {
		width: 240px;
		transform: translate(-8%, -86%);
	}

	#dinamicas #cover .cover-container .logo {
		width: 300px;
		transform: translate(-50%, 150%);
	}

	/* SCOREBOARD */
	#scoreboard {
		padding: 40px;
		background: #111;
		box-shadow: 0px 30px 50px -25px rgba(0, 0, 0, 0.75);
		margin-top: 5vh;
	}
	#scoreboard .board-header {
		text-align: center;
		margin-bottom: 2rem;
	}

	#scoreboard h2 {
		color: #fff;
		font-weight: 800;
		text-transform: uppercase;
		margin-bottom: .5rem;
	}

	#scoreboard p {
		color: #fff;
		font-size: 20px;
		line-height: 1.4;
		margin-bottom: 10px;
	}

	#scoreboard input,
	#scoreboard select {
		background: #111;
		color: #fff;
		border-color: #666;
	}

	#scoreboard label,
	#scoreboard th,
	#scoreboard td {
		color: #fff;
	}
	#scoreboard .table-responsive {
		background: #111 !important;
		border: 1px solid #333;
		padding: 1em;
	}

	#scoreboard div,
	#scoreboard td,
	#scoreboard .panel-body,
	#scoreboard .col-sm-12,
	#scoreboard #scoreboard-2 {
		background: #111 !important;
	}

	#scoreboard #scoreboard-2 {
		margin-bottom: 1em;
	}
	#scoreboard input[type=search] {
		background: #000;
		border: none;
		border-radius: .5em;
		padding: 5px;
	}

	#scoreboard #scoreboard-2_length select {
		border: 1px solid #000;
		background: #000;
	}

	#scoreboard input[type=search]:hover,
	#scoreboard input[type=search]:focus {
		border: none;
	}
	#scoreboard .table-hover > tbody > tr:hover {
		background: #06c;
	}

	#scoreboard .table > tbody > tr > td,
	#scoreboard .table > tbody > tr > th,
	#scoreboard .table > tfoot > tr > td,
	#scoreboard .table > tfoot > tr > th,
	#scoreboard .table > thead > tr > td,
	#scoreboard .table > thead > tr > th {
		border-top: 1px solid #333;
	}
	#scoreboard .table > thead > tr > th {
		border-bottom: 2px solid #333;
	}
	#scoreboard .btn {
		background: #333;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 1px;
		border: none;
	}

	#scoreboard .pagination > li > a,
	#scoreboard .pagination > li > span {
		background-color: #111;
		color: #fff;
	}

	#scoreboard .pagination > li > a:focus,
	#scoreboard .pagination > li > a:hover,
	#scoreboard .pagination > li > span:focus,
	#scoreboard .pagination > li > span:hover {
		background-color: #06c;
	}

	#scoreboard .dataTables_wrapper .dataTables_length,
	#scoreboard .dataTables_wrapper .dataTables_filter,
	#scoreboard .dataTables_wrapper .dataTables_info,
	#scoreboard .dataTables_wrapper .dataTables_processing,
	#scoreboard .dataTables_wrapper .dataTables_paginate {
		color: #fff;
	}

	#scoreboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
	#scoreboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
	#scoreboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
		cursor: default;
		color: #fff !important;
		border: 1px solid transparent;
		background: transparent;
		box-shadow: none;
	}

	#scoreboard .dataTables_wrapper .dataTables_paginate .paginate_button.current,
	#scoreboard .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
		color: #111 !important;
		border: 1px solid #fff;
		background-color: #111;
	}

	/* INTRO */
	#dinamicas #intro {
		margin: 20vh 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	#dinamicas #intro > div {
		padding: 20px;
	}
	#dinamicas #intro h2 {
		font-size: 30px;
		color: #111;
		line-height: 1.2;
		font-weight: 800;
		letter-spacing: 0;
	}

	#dinamicas #intro iframe {
		width: 100%;
		height: 32vh;
		margin-top: 20px;
	}

	#dinamicas .spacer {
		width: 100%;
		height: 40vh;
		object-fit: cover;
		object-position: 25%;
		display: none;
	}

	/* ABOUT */
	#dinamicas #about {
		padding: 40px 20px;
	}

	#dinamicas .blue-blocks {
		list-style: none;
		margin-bottom: 40px;
	}

	#dinamicas .blue-blocks li {
		background: #06c;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 2px;
		padding: 20px;
	}

	#dinamicas #dark-highlight {
		background: #111;
		padding: 40px 20px;
	}

	#dinamicas #dark-highlight h2,
	#dinamicas #dark-highlight h3 {
		text-align: center;
		letter-spacing: 1px;
	}
	#dinamicas #dark-highlight h2 {
		color: #faf8f2;
		text-transform: uppercase;
		line-height: 1.3;
		font-size: 36px;
		margin: 20px 0;
	}

	#dinamicas #dark-highlight h3 {
		color: #fff;
	}
}

@media only screen and (min-width: 768px) {
	#dinamicas #cover .cover-container {
		/* width: 1170px; */
		margin: 0 auto;
	}

	#dinamicas #cover .cover-container h1 {
		width: 42%;
		transform: translate(-110%, -30%);
		font-size: 37px;
		text-align: center;
	}

	#dinamicas #cover .cover-container p {
		transform: translate(-110%, 110%);
		font-size: 20px;
		width: 42%;
		text-align: center;
	}

	#dinamicas #cover .cover-container .hero {
		width: 360px;
		transform: translate(30%, -45%);
	}

	#dinamicas #cover .cover-container .logo {
		width: 340px;
		transform: translate(-130%, -150%);
	}

	#scoreboard {
		border: 1px solid #d8d8d8;
		border-radius: 20px;
		padding: 40px;
	}

	#dinamicas #intro {
		position: relative;
		width: 100vw;
		flex-flow: row-reverse;
	}

	#dinamicas #intro iframe {
		width: 50vw;
		height: 28.2vw;
		border-radius: 20px;
		overflow: hidden;
	}

	#dinamicas #intro > div {
		width: 50vh;
	}

	#dinamicas #about {
		margin-top: 10vh;
		margin-bottom: 10vh;
	}

	#dinamicas .blue-blocks li {
		font-size: 20px;
	}

	#dinamicas #dark-highlight {
		padding: 30vh 20px;
	}

	#dinamicas #dark-highlight h2,
	#dinamicas #dark-highlight h3 {
		text-align: left;
	}

	#dinamicas #dark-highlight h2 {
		font-size: 60px;
	}
	#dinamicas #dark-highlight h3 {
		font-size: 30px;
	}

	#dinamicas .spacer {
		display: block;
	}
}