// Palette
@color-primary: #FF0049;
@color-secondary: #FFD800;
@color-white: #FFFFFF;
@color-black: #000000;

@color-bg-clear: #EEEEEE;
@color-text-clear: #888888;

// Basics
a {
	color: @color-primary;
}
.btn {
	border: none;
	&.btn-warning {
		background: @color-secondary;
	}
}
.pagination .active span, .pagination .active span:hover {
	background: @color-secondary;
	border-color: @color-secondary;
	color: @color-black;
}
.pagination a {
	color: @color-black !important;
}

// Header
header {
	background: @color-primary;

	#logo {
		width: 100%;
		display: inline-block;
	}

	.nav {
		margin: 2.5em auto;

		&.nav-space {
			a {
				margin: auto .5em;
			}
		}

		a {
			color: @color-white;
			background-color: @color-primary;
			text-transform: uppercase;
			font-weight: bold;

			&:hover {
				color: @color-primary;
				background-color: @color-white;
			}
		}

		.active {
			a, a:hover, a:active, a:visited {
				color: @color-primary;
				background-color: @color-white;
			}
		}
	}

	.menu {
		.nav {
			a {
				font-size: 12px;
				padding: 12px 18px;
			}
		}
	}
	.social {
		.nav {
			a {
				font-size: 20px;
				padding: 7px 12px;
			}
		}
	}
}

aside {
	.info {
		padding: 1em;

		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;

		.btn {
			font-size: 12px;
			padding: 4px 6px;
			margin: 4px;
			margin-top: 0px;
			font-weight: bold;
		}
	}
}

footer {
	.videos {
		background-color: @color-black;
		.video {
			padding: 2em 0 1em 0;
			a {
				text-decoration: none;
				&:hover {
					.play-button {
						transform: scale(1.2);
					}
				}
			}
			.video-cover {
				height: 150px;

				.play-button {
					font-size: 64px;
					color: @color-primary;
					text-align: center;
					padding: 32px 0;
					transition: all .2s;

					i {
						margin: 0;
						padding: 0;
						display: inline-block;
						background: @color-white;
						border-radius: 50%;
						width: 64px;
						height: 64px;
						line-height: 1;
						cursor: pointer;
					}
				}
			}
			.video-content {
				h1 {
					font-size: 1em;
					text-align: center;
					color: @color-white;
				}
			}
		}
	}
	.social {
		background: @color-primary;
		padding: .5em;

		.nav {
			width: 202px;

			a {
				color: @color-white;
				background-color: @color-primary;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 20px;
				padding: 7px 12px;
				margin: .2em;

				&:hover {
					color: @color-primary;
					background-color: @color-white;
				}
			}
		}
	}
	.about {
		background: @color-black;
		color: @color-white;

		h1 {
			font-size: 1.4em;
			text-transform: uppercase;
		}
		p {
			font-weight: bold;
			text-align: justify;
		}
	}
	.copy {
		background: @color-bg-clear;
		color: @color-text-clear;
		font-size: .8em;
		padding: .5em;
		.text {
			padding-top: 1.2em;
			padding-bottom: .2em;
		}
	}
}

main {
	.note-mini {
		margin-bottom: 1em;
		transition: all .3s;
		&:hover {
			box-shadow: 0px 2px 7px 3px rgba(0,0,0,.1);
			transform: scale(1.02);
		}

		a {
			text-decoration: none;
			display: block;
		}
		.note-cover {
			width: 100%;
			height: 160px;
			background-color: #444;
			background-size: cover;
			background-position: center;

			.play-button {
				font-size: 64px;
				color: @color-primary;
				text-align: center;
				padding: 16px 0;
				cursor: pointer;

				i {
					margin: 0;
					padding: 0;
					display: inline-block;
					background: @color-white;
					border-radius: 50%;
					width: 64px;
					height: 64px;
					line-height: 1;
					cursor: pointer;
				}
			}
		}
		.note-content {
			width: 90%;
			margin: auto;
			margin-top: -2.5em;
			background: @color-white;
			padding: 0px 1em;
			overflow: hidden;

			h1 {
				font-size: 1em;
				margin-top: 1em;
				height: 44px;
				color: @color-black;

				overflow: hidden;
				text-overflow: ellipsis;
			}
			.p {
				font-size: .9em;
				color: @color-text-clear;
				height: 54px;
				text-align: justify;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.nav-social {
		display: block;
		margin: 1em 0;
		a, button {
			border: 0;
			outline: 0;
			display: block;
			display: inline-block;
			text-align: center;
			width: 1.6em;
			height: 1.6em;
			padding: .2em .2em;
			font-size: 1.2em;
			background-color: @color-secondary;
			color: @color-black;
			border-radius: 50%;
		}

	}
	.sidebar {
		background: @color-bg-clear;
		overflow: hidden;
		article {
			padding: 1em;
			h1 {
				font-size: 1em;
				color: @color-white;
				background: @color-primary;
				font-weight: normal;
				padding: .5em .75em;
				border-radius: 4px;
				display: inline-block;
				margin-top: 0px;
			}
		}
	}
}

// Home

#slideshow {
	.rslides_container {
		border-bottom: 1px solid @color-bg-clear;
		padding-bottom: 1em;
		margin-bottom: 2em;
	}
	.note-slider {
		width: 100%;
		height: 500px;

		background-color: #444;
		background-size: cover;
		background-position: center;
		overflow: hidden;

		.youtube-player {
			width: 100%;
			height: 100%;
			display: none;

			iframe {
				width: 100%;
				height: 100%;
			}
		}

		.play-button {
			font-size: 128px;
			color: @color-primary;
			position: absolute;
			z-index: 10;
			width: 140px;
			height: 140px;
			text-align: center;
			left: 50%;
			top: 50%;
			margin-left: -70px;
			margin-top: -70px;
			cursor: pointer;

			i {
				margin: 0;
				padding: 0;
				display: block;
				background: @color-white;
				border-radius: 50%;
				width: 128px;
				height: 128px;
				line-height: 1;
				cursor: pointer;
			}
		}

		.note-content {
			background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 98%, rgba(0,0,0,0.5) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(98%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5)));
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98%,rgba(0,0,0,0.5) 100%);
			background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98%,rgba(0,0,0,0.5) 100%);
			background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98%,rgba(0,0,0,0.5) 100%);
			background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98%,rgba(0,0,0,0.5) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );

			color: @color-white;
			padding: 2em;
			padding-top: 10em;
			position: absolute;
			bottom: 0;
			overflow: hidden;
			width: 100%;

			a {
				text-decoration: none;
				h1 {
					font-size: 2em;
					width: 70%;
					overflow: hidden;
					color: @color-white;

				}
				p {
					font-size: 1.2em;
					width: 70%;
					overflow: hidden;
					color: @color-white;
				}
			}
			.nav-social {
				position: absolute;
				bottom: 28px;
				right: 42px;
				a, button {
					width: 2em;
					height: 2em;
					padding: .3em .25em;
					font-size: 1.5em;
				}
			}
		}
	}
	.centered-btns_tabs {
		display: block;
		text-align: center;
		margin: .5em;
		li {
			display: inline-block;
			margin: .5em;
			a {
				width: 1.5em;
				height: 1.5em;
				display: block;
				font-size: 1em;
				color: rgba(0,0,0,0);
				background: @color-bg-clear;
				border-radius: 50%;
			}
		}
		.centered-btns_here {
			a {
				background: @color-secondary;
			}
		}
	}
}

.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

// Note
#note {
	.container {
		margin-top: 2em;
	}
	.note-self {
		display: block;
		overflow: hidden;

		h1 {
			font-size: 2em;
			font-weight: normal;
			margin-top: 0;
		}
		.note-cover {
			display: block;
			overflow: hidden;
			height: 400px;
			margin: 2em 0;
			background-size: cover;
			background-position: center;
			background-color: #444;

			.youtube-player {
				width: 100%;
				height: 100%;

				iframe {
					width: 100%;
					height: 100%;
				}
			}
		}
		.p {
			text-align: justify;
		}
		.nav-social {
			a, button {
				width: 2em;
				height: 2em;
				padding: .3em .25em;
				font-size: 1.5em;
			}
		}
	}
}

// Page
#page {
	.container {
		margin-top: 2em;
	}
	.page-self {
		display: block;
		overflow: hidden;

		h1 {
			font-size: 2em;
			font-weight: normal;
			margin-top: 0;
		}
		h2 {
			font-size: 1.5em;
			font-weight: normal;
		}
		.p {
			text-align: justify;
		}
	}
}

// ADS

.ad-large {
	min-height: 150px;
	margin: 1em 0;
	background: #f1f1f1;
}
.ad-square {
	min-height: 250px;
	display: block;
	background: #f1f1f1;
}
.ad-mini {
	min-height: 180px;
	display: block;
	margin: 1.5em 0;
	background: #f1f1f1;
}


// Responsive

@media (min-width: 768px) and (max-width: 992px) {
	header {
		.menu {
			.nav {
				margin: 1.5em auto;
			}
		}
	}
	#slideshow {
		.note-slider {
			height: 350px;
		}
	}
}

@media (max-width: 768px) {
	header {
		.bar-bg {
			background: @color-bg-clear;
		}
		.nav {
			margin: .5em auto;
		}
	}
	#slideshow {
		.note-slider {
			height: 220px;
			.note-content {
				h1 {
					width: 100%;
					font-size: 1.5em;
				}
			}
		}
	}
}