#main_wrapper
{
	.button
	{
		font-family: 'gothamhtf-bold-webfont';
		width: 162px; 
		border-radius: 3px;
		line-height: 35px;
		font-size: 13px;
		color: white;
		padding: 0px;
		text-transform: uppercase;
	}

	#outsideheader
	{
		background-image: url('/assets/home/wedly-celebration.jpg'); 
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		min-height: 800px;
		background-position: top center;
		overflow: auto;
	    background-size: 100% 601px;

		.mobilemenu
		{
			position: fixed;
			top: 0px;
			left: 0px;
			right: 0px;
			color: white;
			background-color: black;
			height: 40px;
			z-index: 999;

			i
			{
			    position: absolute;
			    font-size: 26px;
			    right: 10px;
			    top: 50%;
			    margin-top: -13px;
			}

			@media (min-width: 768px)
			{
				display: none;
			}

			@media (max-width: 767px)
			{
				display: block;
			}
		}

		div.logo
		{
			

			@media (min-width: 768px)
			{
				position: absolute;
				img
				{
					width: 40px;
					height: 40px;
				}
			}

			@media (max-width: 767px)
			{
				top: 5px;
				left: 5px;
				position: fixed;
				z-index: 1000;

				img
				{
					width: 30px;
					height: 30px;
				}
			}
			

			
		}

		.mobile
		{
			margin-top: 50px;
			text-align: center;

			@media (min-width: 768px)
			{
				display: none;
			}

			@media (max-width: 767px)
			{
				display: block;
			}

			.signup
			{
				background-color: #f35c51;
				border: 1px solid #f35c51;
				width: 48%;
			}

			.signin
			{
				color: black;
				border: 1px solid black;
				background-color: white;
				width: 48%;
			}
		}

		ul
		{
			@media (min-width: 768px)
			{
				position: absolute;
				top: 20px;
				right: 20px;

				li
				{
					float: left;
					font-family: 'gothamhtf-book-webfont';
					font-size: 13px;
					padding: 0px 22px;
					text-transform: uppercase;
					line-height: 35px;

					strong 
					{
						font-family: 'gothamhtf-bold-webfont';
					}

					button
					{
						.button;
						width: 100px;
					}	

					.signup
					{
						background-color: #f35c51;
						border: 1px solid #f35c51;
					}

					.signin
					{
						color: black;
						border: 1px solid black;
						background-color: white;
					}
				
					&:hover	
					{
						font-weight: bold;
						text-decoration: none;
					}
				}

				li.nopad
				{
					padding: 0px 4px;
				}
			}

			@media (max-width: 767px)
			{
				position: fixed;
				z-index: 999;
				top: 40px;
				right: 0px;
				left: 0px;
				display: none;

				li
				{
					float: left;
					font-family: 'gothamhtf-book-webfont';
					font-size: 13px;
					width: 100%;
					padding: 10px;
					text-transform: uppercase;
					line-height: 35px;
					background-color: white;
					border-bottom: 1px solid gray;
					cursor: pointer;

					strong 
					{
						font-family: 'gothamhtf-bold-webfont';
					}

					button
					{
						.button;
						width: 100px;
					}	

					.signup
					{
						background-color: #f35c51;
						border: 1px solid #f35c51;
						display: none;
					}

					.signin
					{
						color: black;
						border: 1px solid black;
						background-color: white;
						display: none;
					}
					
				}

				li.nopad
				{
					padding: 0px 4px;
				}
			}

			li a:hover
			{
				text-decoration: underline;
			}

			li a
			{
				text-decoration: none;
				color: black;
			}
			
		}

		.header_in
		{
			margin-top: 140px;
			padding-bottom: 100px;

			@media (max-width: 767px)
			{
				padding: 0px 10px;
				margin-top: 30px;
			}

			.header_h
			{
				text-align: center;
				margin-bottom: 73px;

				button.create-start
				{
					background-color: black;
				}

				button.guest-start
				{
					background-color: #f35c51;
				}
			}

			.macbook
			{
				background-image: url('/assets/home/macbookpro.png'); 
				background-size: 100%; 
				background-repeat: no-repeat;
				
				margin: 0px auto;
				

				@media (min-width: 768px)
				{
					width: 769px;
					height: 428px;
					padding-top: 25px;
				}

				@media (max-width: 767px)
				{
					width: 100%;
					padding-top: 12px;
					padding-bottom: 20%;
				}


				.owl-carousel
				{
					@media (min-width: 768px)
					{
						width: 585px;


					}

					@media (max-width: 767px)
					{
						width: 76%;
					}
					
					margin: 0px auto;
					position: relative;

					.owl-item img 
					{
					    max-width: 585px;
					}

					.owl-nav
					{
					    position: absolute;
					    top: 50%;
					    margin-top: -21px;
					    width: 100%;

						div
						{
						    background-color: black;
						    position: absolute;
						    color: white;
						    text-align: center;
						}

						@media (min-width: 768px)
						{
							div
							{
								width: 42px;
							    height: 42px;
							}

							div.owl-prev:after
							{
								content: '◄';
							    text-align: center;
							    width: 100%;
							    position: relative;
							    top: 13px;
							    font-size: 20px;
							}

							div.owl-prev
							{
							    left: -79px;   
							}

							div.owl-next:after
							{
								content: '►';
							    text-align: center;
							    width: 100%;
							    position: relative;
							    top: 13px;
							    font-size: 20px;
							}

							div.owl-next
							{
								right: -79px;
							}
						}

						@media (max-width: 767px)
						{
							div
							{
								width: 22px;
							    height: 22px;
							}

							div.owl-prev:after
							{
								content: '◄';
							    text-align: center;
							    width: 100%;
							    position: relative;
							    top: 2px;
							    font-size: 10px;
							}

							div.owl-prev
							{
							    left: -45px;   
							}

							div.owl-next:after
							{
								content: '►';
							    text-align: center;
							    width: 100%;
							    position: relative;
							    top: 2px;
							    font-size: 10px;
							}

							div.owl-next
							{
								right: -45px;

							}
						}
					}
				}
			}
		}
	}

	button
	{
		a 
		{
			color: white;
			text-decoration: none;
		}
	}

	.section_1
	{
		text-align: center;
		padding-bottom: 100px;

		button
		{
			display: block;
			margin: 0px auto 80px;
		}
	}

	.section_2
	{
		padding-bottom: 100px;
		> div
		{
			@media (min-width: 768px)
			{
				text-align: left;
				padding-left: 10%;
				position: absolute;
			}

			@media (max-width: 767px)
			{
				padding: 0px 10px;
			}

			

			h1 { text-align: left; }
			h2 { text-align: left; }
		}
	}

	.section_3
	{
		max-width: 1200px;
		margin: 0px auto;
		padding-bottom: 100px;

		> div
		{
			@media (min-width: 768px)
			{
				float: left;
				width: 50%;
			}

			@media (max-width: 767px)
			{
				float: none;
				width: 100%;
				padding: 0px 20px;
			}

			text-align: center;
			margin-bottom: 30px;

			img
			{
				display: inline-block;
				margin-bottom: 45px;
			}

			p
			{
				max-width: 460px;
				margin: 0px auto;
				font-family: "adobe-garamond-pro";
				font-size: 18px;
			}
		}
	}

	.section_4
	{
		padding-top: 50px;
		padding-bottom: 100px;
		clear: both;
		background-color: #f3f3f3;

		button
		{
			display: block;
			margin: 0px auto 80px;
		}

		> div
		{
			@media (min-width: 768px)
			{
				margin: 0px auto;
				width: 75%;

				> div
				{
					position: relative;
					float: left;
					width: 33%;
					padding-right: 20px;
				}
			}

			@media (max-width: 767px)
			{
				width: 100%;
				text-align: center;

				> div
				{
					position: relative;
					width: 90%;
					margin: 10px auto;
				}
			}

			> div
			{
				position: relative;
				float: left;
				width: 33%;
				padding-right: 20px;

				button
				{
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -81px;
					margin-top: -10px;
					background-color: white;
					color: black;
					display: none;


				}

				&:hover
				{
					button
					{
						display: block;
					}
				}
			}
		}
	}

	h1
	{
		font-family: 'gothamhtf-bold-webfont';
		font-size: 30px;
		text-transform: uppercase;
		letter-spacing: 2px;
		margin-bottom: 20px;
	}

	h2
	{
		font-family: "adobe-garamond-pro";
		font-style: italic;
		font-size: 18px;
		text-align: center;
		margin-bottom: 30px;
	}

	button
	{
		.button;
		background-color: black;
	}
}

footer
{
	.inner
	{
		font-family: 'gothamhtf-book-webfont';
		font-size: 15px;
		max-width: 900px;
		padding: 30px 0px 50px;
		margin: 0px auto;

		.footer_in
		{
			> div
			{
				float: left;
				width: 25%;

				a
				{
					text-decoration: none;
					color: #686868;
					line-height: 25px;
				}

				.apple_app
				{
					text-align: right;
				}
			}
		}
	}
}