/*------------------------------------------------------------------
	+ Hero
-------------------------------------------------------------------*/
#hero {
	background-color: $primary_color;
	background-image: url("../img/hero_lines.png");
	background-repeat: no-repeat;
	background-position: center;

	@media screen and (max-width: 991px) {
		padding-bottom: 50px;
	}

	.text {

		@media screen and (max-width: 991px) {
			text-align: center;
		}

		h1 {
			margin-bottom: 100px;
			text-transform: lowercase;

			@media screen and (max-width: 991px) {
				margin-bottom: 50px;
			}

			@media screen and (max-width: 480px) {
				font-size: 65px;
			}
		}

		a {
			@include animation_delay(0.2s);
		}
	}

	.ui_wrapper {
		padding-top: 70px;
		padding-bottom: 70px;

		@media screen and (max-width: 1400px) {
			padding-top: 40px;
			padding-bottom: 40px;
		}

		@media screen and (max-width: 991px) {
			text-align: center;
		}

		img {
			max-width: 100%;
			height: auto;
			@include animation_delay(0.1s);
		}
	}
}