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

	.text {
		text-align: center;

		h1 {

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

			span {
				font-weight: 200;
			}
		}

		p.description {
			margin: 30px 0 50px 0;
			color: $white;
			font-family: "Open Sans", Arial, sans-serif;
			font-size: 16px;
			line-height: 30px;
			@include animation_delay(0.2s);

			@media screen and (max-width: 1199px) {
				font-size: 15px;
				line-height: 24px;
			}
		}

		a {
			margin-bottom: 30px;
			@include animation_delay(0.2s);
		}
	}

	.ui_wrapper {
		text-align: center;

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