/* ==========================================================
+                                                           +
+															+
+															+
+							Page							+
+															+
+        		            Landing  	            		+           
+															+
+															+
+															+
+															+
+															+
+==========================================================*/

/*-- -------------------------- -->
<---           LANDING          -->
<--- -------------------------- -*/

@media only screen and (min-width: 0em) {
	#hero {
		min-height: 400px;
		height: 400px;
		background: url("/images/image-9.jpeg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		color: #fff;
	}

	#dark {
		background: #444;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 0;
		opacity: 0.7;
	}

	#home-h {
		width: 200px;
		text-align: center;
		font-size: 3.4375em;
		font-weight: bold;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		z-index: 50;
		margin-top: 50px;
		color: #fff;
	}

	#home-h:before {
		content: "";
		position: absolute;
		width: 180px;
		height: 200px;
		border: 10px solid rgba(255, 218, 45, 0.4);
		z-index: -1;
	}

	.white-comb {
		position: absolute;
		width: 100%;
		bottom: -2px;
		z-index: 100;
	}

	.white-comb.dark-mode {
		display: none !important;
	}

	.dark-comb.dark-mode {
		display: block;
		position: absolute;
		bottom: -2px;
		z-index: 100;
	}
}

@media only screen and (min-width: 48em) {
	#hero {
		position: relative;
		height: 600px;
	}

	#home-h {
		font-size: 4.375em;
		margin-bottom: 0;
	}

	#hero img {
		display: block;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 40;
	}

	.white-comb {
		position: absolute;
		bottom: -2px !important;
	}
}

@media only screen and (min-width: 64em) {
	#hero {
		height: 600px;

		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-attachment: fixed;
		position: relative;
	}

	#home-h {
		-webkit-transform: translateY(40px);
		-ms-transform: translateY(40px);
		transform: translateY(40px);
		font-size: 4.375em;
	}

	#hero img {
		display: block;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 40;
	}
}