@import "common";

$black : #333333;
$blue : #22A8E8;

.flat-button {
	padding: 10px 15px;
	min-height: 30px;
	min-width: 200px;

	font : {
		family : $montserrat;
		size: 1.2em;
	}
	text-align : center;

	background: #ccc;
	border: 1px solid black;
	color: white;
	cursor : pointer;
	outline: none;

	&:active {
		background: black;
	}
}

.red-flat-button {
	@extend .flat-button;

	background: $red;
	border-color: #B52C17;

	&:active {
		background: #B52C17;
	}
}

.slide-wrapper,
.slide-cursor-wrapper {
	position: absolute;
	left: 0px;

	width: 100%;
}

.slide-wrapper {
	top : 0px;

	height: 75%;
}

.slides, 
.slide-cursors {
	margin: 0;
	padding: 0;
	width: 100%;

	overflow: hidden;
	list-style-type: none;
}

.slides { height: 100%; }

.slide-wrapper .slides .slide {
	position: absolute;
	top: 0px;
	left: 0px;

	display : block;
	padding: 20px 50px;
	width: 100%;
	@include box-sizing(border-box);

	text-align: center;

	h1, 
	h2 {
		font: {
			family: $montserrat;
		}
	}

	h1, h2, a { color: $black; }

	h1 { 
		margin-bottom : 0;

		font-size: 3em; 
	}

	h2 { line-height: 1.6em; }

	a {
		border-bottom : 3px solid #ccc;
		padding-bottom: 2px;
		@include transition(border-color, 0.5s, ease);

		&:hover {
			border-color: $blue;
		}
	}
}

.slide form {
	p { margin: 2em 0; }

	input {
		@include transition(border-color, 0.5s, ease);

		padding: 5px 10px;
		width: 350px;
		height: 30px;

		font: {
			family: $montserrat;
			size: 1.2em;
		}
		
		outline: none;
		color: $black;
		border: 2px solid #eee;

		&:focus {
			border-color: $blue;
		}

		&.error {
			border-color : $red;
		}

		&.success {
			border-color : $green;
		}
	}

	button {
		@extend .flat-button;

		font : {
			family : $montserrat;
			size: 1.2em;
		}

		background: $blue;
		border-color: #237de8;

		&:active {
			background: #237de8;
		}
	}
}

.slide .tags {
	margin: 0;
	padding: 0;

	list-style-type: none;

	.tag {
		vertical-align: middle;

		display: inline-block;
		padding: 5px 10px;
		margin: 4px 10px;
		
		cursor : pointer;

		font: {
			family: $montserrat;
			size: 1em;
		}

		color: $black;	
		background-color: #E9EAEF;

		@include transition(opacity, .5s, ease);

		&:hover {
			opacity : 0.75;
		}
	}
}

.slide-cursor-wrapper {
	top: 75%;
	height: 25%;

	.slide-cursors {
		padding: 20px 50px;
		@include box-sizing(border-box);

		text-align: center;
	}
}

.slide-cursor-wrapper .slide-cursors .slide-cursor {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 0 5px;

	background-color: $black;
	@include border-radius(50%);
	cursor: pointer;

	&.active-cursor {
		background-color: $green;
		cursor: default;
	}
}
