/* General Wrapper =========================*/
#wrapper {
	width: 100%;
	position: relative;
	z-index: 0;
}

header {

	.top-bar {
		background: $light-gray;
		border-bottom: 1px solid $line-gray;
		clear: both;
		img {
				margin-top: 5px;
				float: left;
			}
		form {
			float: left;
			input {
				margin-top: 6px;
				margin-left: 5px;
				border: 0px;
				outline: 0px;
				background: $light-gray;
				font-size: 12px;
				font-family: 'AkzidenzGroteskBE-Bold', sans-serif;
				text-indent: 7px;
				color: $light-text-gray;

				&:focus::-webkit-input-placeholder {
					color: transparent !important;
				}
				&:focus::-moz-placeholder {
					color: transparent !important;
				}


			}
		}


		.links {
			margin-top: 7px;
			margin-bottom: 5px;
			float: right;
			a {
				margin-left: 31px;
				float: left;
				font: 12px 'AkzidenzGroteskBE-Bold', sans-serif;
				line-height: 16px;
				color: $light-text-gray;
			}
		}

		ul {
			margin-top: 6px;
			margin-left: 21px;
			float: right;
			li {
				float: left;
				a {
					margin-left: 7px;
					img {
						float: none;
						margin-top: 0px;
					}
				}
			}
		}
	}

	.logo-row {
		text-align: center;
		line-height: 0px;
		.logo-img {
			margin-top: -31px;
			margin-bottom: 9px;
		}
		.mobile-menu-button, .menu-logo-replacer {
			display: none;
		}
	}

	.menu-bar {
		border-top: 1px solid $line-gray;

		nav {
			width: 100%;
			text-align: center;

			ul li {
				display: inline-block;
				a {
					display: block;
					padding: 11px 0px 13px;
					margin: 0px 21px;
					border-top: 3px solid transparent;
					font: 14px 'AkzidenzGroteskBE-Bold', sans-serif;
					color: $transy-crimson;
					text-decoration: none;
					&:hover {
						border-top: 3px solid $transy-crimson;
					}
				}
				&.active a {
					border-top: 3px solid $transy-crimson;
				}
			}

		}
	}
}

.main-headline {
	width: 100%;
	text-align: center;
  position: relative;
  z-index: -1;

  img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    &.headline-photo-desktop {
      display: block;
    }
    &.headline-photo-tablet {
      display: none;
    }
    &.headline-photo-mobile {
      display: none;
    }
  }
	h1 {
		display: inline-block;
		margin-top: 120px;
		margin-bottom: 23px;
		text-transform: uppercase;
	}
	.headline-buttons {
		display: inline-block;
		margin-bottom: 220px;

		a.button {
			padding: 11px 20px;
			border: 1px solid #fff;
			color: #fff;
			&.second-button {
				margin-left: 28px;
			}
		}
	}
}

.main-content-wrapper {
	width: 100%;
	background: #F7F4EA;
}

.education-in-three-steps {
	width: 100%;
	margin-top: -70px;
	margin-bottom: 32px;
	padding: 15px 0;
	@include boxshadow();
	background: #fff;
	z-index: 100;

	.education-step {
		width: 31%;
		float: left;
		padding: 0px 20px;
		box-sizing: border-box;
		border-right: 1px solid $line-gray;
		text-align: center;
		&.second-step {
			width: 38%;
		}
		&.last-step {
			border-right: 0px;
		}
		.ed-title {
			display: block;
			margin-top: 28px;
			margin-bottom: 13px;
			font-size: 24px;
			font-family: 'Warnock-Semi', sans-serif;
		}
		p {
			margin: 13px auto 32px;
			font: $Body2;
			line-height: 20px;
		}
		a.button {
			display: inline-block;
			padding: 12px 23px;
			margin-bottom: 25px;
			border: 1px solid $transy-crimson;
			font-size: 12px;
			color: $transy-crimson;
			background: transparent;
		}
	}

	&:after {
		content: '';
		display: block;
		clear: both;
	}
}

.teasers {
	width: 100%;
	line-height: 0px;

	.big-teaser {
		width: 50%;
		float: left;
		text-align: center;
		color: #fff;

		&.transy-strong {
			position: relative;
			overflow: hidden;
			z-index: 0;
			img {
				width: 100%;
			}
			.text-content {
				width: 100%;
				position: absolute;
				top: 40%;
				text-shadow: 0px 2px 5px #333;

				text-align: center;
				h4 {
					margin-bottom: 5px;
				}
			}
		}

		&.go-all-in {
			position: relative;
			text-align: center;
			img {
				width: 100%;
			}
			.text-content {
				width: 100%;
				position: absolute;
				top: 38%;
				h1 {
					margin-bottom: 40px;
				}
				a {
					padding: 13px 21px;
					border: 1px solid #fff;
					color: #fff;
				}
			}

			&.second-gai-teaser {
				.text-content {
					top: 32%;
					h4 {
						margin-bottom: 5px;
					}
					h2 {
						margin-bottom: 39px;
					}
				}
			}
		}

		&.has-multiple-teasers {

			.small-teaser {
				width: 50%;
				float: left;
				position: relative;
				line-height: 0px;
				z-index: 0;

                &:hover {
                    .teaser-button {
                        display: block;
                    }
                    .text-content {
                        display: none;
                    }
                }
                img {
                	width: 100%;
                }

                .teaser-button {
                    display: none;
                    width: 100%;
                    position: absolute;
                    top: 40%;
                    text-align: center;

                    a.button {
                        display: inline-block;
                        padding: 21px 13px;
                        border: 1px solid #fff;
                        color: #fff;
                    }
                }

				.text-content {
				    display: block;
					width: 100%;
					top: 35%;
					text-align: center;
					position: absolute;
					z-index: 10;
				}

				&.first-teaser {
					.text-content {
					    top: 22%;
						h1 {
							margin-bottom: -5px;
						}
						p {
							font-size: 24px;
							font-family: 'AkzidenzGroteskBE-BoldCn', sans-serif;
							line-height: 30px;
						}
					}
				}
				&.second-teaser,
				&.third-teaser {
					.text-content {
						p {
							font-size: 24px;
							font-family: 'AkzidenzGroteskBE-BoldCn', sans-serif;
							line-height: 24px;
						}
						span {
							display: block;
							margin-top: 10px;
							font-size: 30px;
							font-family: 'Warnock-Semi', sans-serif;
							line-height: 30px;
						}
					}
				}
				&.fourth-teaser {
					.text-content {
						h5 {
							line-height: 40px;
						}
						span {
							display: block;
							font-size: 30px;
							font-family: 'Warnock-Semi', sans-serif;
							line-height: 30px;
							br {
							    display: none;
							}
						}

					}
				}

			}

		}

	}
}

.events-info {
	margin-top: 50px;
	margin-bottom: 45px;
	line-height: 0px;

	.event-teaser {
		width: 65.5%;
		margin-right: 2.9%;
		float: left;
		@include boxshadow();
		background: url(../img/bgi/event-teaser-img.jpg) no-repeat bottom left;;

		img {
			width: 100%;
		}
		.text-content {
			width: 360px;
			margin-top: 155px;
			margin-left: 25px;
			h3 {
				margin-top: 8px;
				margin-bottom: 20px;
			}
			h6 {
				margin-bottom: 5px;
			}
			p {
				font: $Body2;
				color: #fff;
				span {
					display: none;
				}
			}
			a {
				display: inline-block;
				margin-top: 22px;
				padding: 13px 20px;
				border: 1px solid #fff;
				text-decoration: none;
				font: 12px 'AkzidenzGroteskBE-Bold', sans-serif;
				color: #fff;
			}
		}
	}

	.news-list {
		width: 31.5278%;
		padding: 0 28px 0;
		float: left;
		background: #fff;
		@include boxshadow();

		h6 {
			margin-top: 26px;
			margin-bottom: 10px;
			padding-bottom: 6px;
			border-bottom: 1px solid $transy-crimson;
			color: $transy-crimson;
		}
		p {
			font: $Body2;
			line-height: 15px;
			margin-bottom: 19px;
			a {
				color: $text-gray;
			}
			span {
				display: block;
				color: $light-text-gray;
			}
			&.last-p {
				margin-top: -4px;
				margin-bottom: 24px;
				a {
					display: block;
					font: $Body4;
					color: $transy-crimson;
				}
			}
		}
	}
}

.explore-city {
	margin-bottom: 53px;
	padding-top: 107px;
	padding-bottom: 125px;
	background: url(../img/bgi/explore-city-img.jpg) no-repeat left center;
	@include boxshadow();

	.text-content {
		width: 100%;
		text-align: center;
		text-shadow: 0px 2px 5px #333;
		h5 {
			margin-bottom: 13px;
		}

		h2 {
			margin-top: 10px;
			margin-bottom: 25px;
			line-height: 55px;
		}

		a.button {
			padding: 12px 11px;
			border: 1px solid #fff;
			text-shadow: none;
			color: #fff;
		}
	}
}

footer {
	padding-top: 30px;
	background: #fff;

	.links-row {
		margin-left: -30px;
		margin-right: -30px;
		border-bottom: 1px solid $line-gray;

		h6 {
			color: $text-gray;
		}

		ul {
			margin-top: 5px;
			margin-bottom: 11px;
			li {
				margin: 4px 0;

				a {
					font: $Body2;
					color: $text-gray;
				}
			}
		}
		span {
			display: block;
			margin-top: 10px;
			font: $Body2;
			color: $text-gray;
		}
	}

	.last-row {
		margin-left: -30px;
		margin-right: -30px;
		p {
			margin: 15px 0 17px;
			font: $Body5;
			color: $text-gray;
		}
	}
}