/*	Color Palette (https://coolors.co/0b132b-1c2541-3a506b-5bc0be-6fffe9)
	# Dark Blue:		#0b132b		rgb(11,19,43)
	# Mid Blue:		#1c2541 		rgb(28,37,65)
	# Light Blue:		#3a506b		rgb(58,80,107)
	# Mid Green:		#5bc0be		rgb(91,192,190)
	# Light Green:	#6fffe9		rgb(111,255,233)
*/


/* ---------------------------------------- 
	General Styles
---------------------------------------- */
::-moz-selection {
	background:#1c2541;
	color:#fff;
	text-shadow:none;
}
::selection {
	background:#1c2541;
	color:#fff;
	text-shadow:none;
}
html {
	font-size:62.5%;
	line-height:1.6;
	overflow-x:hidden;
	overflow-y:scroll;
	text-rendering:optimizeLegibility;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
body {
	font-size:1.6em;
	font-family:"Raleway", sans-serif;
	color:#1c2541;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-family:"Montserrat", sans-serif;
	font-weight:700;
	line-height:1.3;
	margin-bottom:1rem;
}
h1 {
	font-size:3.5rem;
}
h2 {
	font-size:3.25rem;
}
h3 {
	font-size:3rem;
}
h4 {
	font-size:2.75rem;
}
h5 {
	font-size:2.5rem;
}
h6 {
	font-size:2.25rem;
}
a {
	color:#5bc0be;
	cursor:pointer;
	text-decoration:none;
	-webkit-transition:color .2s ease-in-out;
	-o-transition:color .2s ease-in-out;
	transition:color .2s ease-in-out;
}




/* ---------------------------------------- 
	Section Header
---------------------------------------- */
.section-header-wrapper {
	text-align:center;
	padding:100px 0 60px;
}
.section-header h2 {
	font-size:10rem;
	line-height:1;
	margin:0;
	letter-spacing:-4px;
}
.section-header p {
	font-size:4rem;
	line-height:1;
	color:#5bc0be;
	margin:0;
	font-weight:300;
}




/* ---------------------------------------- 
	Page Styles
---------------------------------------- */
.desktop {
	display:block;
}
.mobile {
	display:none;
}
.demo-content * {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
header, 
.wrapper,
footer {
	width:90%;
	max-width:1200px;
	margin:0 auto;
}
.demo-content {
	list-style:none;
}
.demo-content li {
	margin-bottom:50px;
}
.demo-element {
	background:rgba(11,19,43,1);
	background:-moz-linear-gradient(45deg, rgba(11,19,43,1) 0%, rgba(28,37,65,1) 100%);
	background:-webkit-gradient(left bottom, right top, color-stop(0%, rgba(11,19,43,1)), color-stop(100%, rgba(28,37,65,1)));
	background:-webkit-linear-gradient(45deg, rgba(11,19,43,1) 0%, rgba(28,37,65,1) 100%);
	background:-o-linear-gradient(45deg, rgba(11,19,43,1) 0%, rgba(28,37,65,1) 100%);
	background:-ms-linear-gradient(45deg, rgba(11,19,43,1) 0%, rgba(28,37,65,1) 100%);
	background:linear-gradient(45deg, rgba(11,19,43,1) 0%, rgba(28,37,65,1) 100%);
	border:10px solid #1c2541;
	border-radius:4px;
	overflow:hidden;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-direction:column;
}
.demo-element, 
.demo-element a {
	height:270px;
}
.demo-element a {
	display:-webkit-box;	
	display:-ms-flexbox;	
	display:flex;
	color:#fff;
	-webkit-transition:background-position 1s ease-in-out;
	-moz-transition:background-position 1s ease-in-out;
	-ms-transition:background-position 1s ease-in-out;
	-o-transition:background-position 1s ease-in-out;
	transition:background-position 1s ease-in-out;
}
.demo-element a:hover {
    background-position:0px -2417px;
	-webkit-transition:background-position 8s ease-in-out;
	-moz-transition:background-position 8s ease-in-out;
	-ms-transition:background-position 8s ease-in-out;
	-o-transition:background-position 8s ease-in-out;
	transition:background-position 8s ease-in-out;
}
.demo-element h3 {
	margin:0;
	padding-left:550px;
	padding-right:50px;
	display:-webkit-box;	
	display:-ms-flexbox;	
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.demo-1 a {
	background:url("../img/demo-1.jpg") no-repeat;
}
.demo-2 a {
	background:url("../img/demo-2.jpg") no-repeat;
}
.demo-3 a {
	background:url("../img/demo-3.jpg") no-repeat;
}
.demo-4 a {
	background:url("../img/demo-4.jpg") no-repeat;
}
.demo-5 a {
	background:url("../img/demo-5.jpg") no-repeat;
}
.demo-6 a {
	background:url("../img/demo-6.jpg") no-repeat;
}
.demo-7 a {
	background:url("../img/demo-7.jpg") no-repeat;
}
.demo-8 a {
	background:url("../img/demo-8.jpg") no-repeat;
}
footer {
	text-align:center;
	padding:40px 0;
	margin-bottom:40px;
}
footer h1 {
	letter-spacing:-.6px;
}





/* ---------------------------------------- 
	Media Queries
---------------------------------------- */
/* Min 1200 - Max 1399 */
@media only screen and (min-width:1200px) and (max-width:1399px) {
	html {
		font-size:50%;
	}
}




/* Min 900 - Max 1199 */
@media only screen and (min-width:900px) and (max-width:1199px) {
	html {
		font-size:45%;
	}
}




/* Max 899px */
@media only screen and (max-width:899px) {
	.desktop {
		display:none !important;
	}
	.mobile {
		display:block !important;
	}
	h3.mobile {
		text-align:center;
	}
}




/* Min 600 - Max 899 */
@media only screen and (min-width:600px) and (max-width:899px) {
	html {
		font-size:50%;
	}
	.section-header h2 {
		font-size:7.5rem;
	}
	.section-header p {
		font-size:3rem;
		line-height:3rem;
	}
	.wrapper {
		width:500px;
	}
	footer h1 {
		font-size:3rem;
	}
}




/* Max 599px */
@media only screen and (max-width:599px) {
	html {
		font-size:45%;
	}
	.section-header h2 {
		font-size:7rem;
	}
	.section-header p {
		font-size:3rem;
		line-height:4rem;
	}
	.demo-element a {
		background-size:cover;
	}
	.demo-element a:hover {
		background-position:0 0;
	}
	footer h1 {
		font-size:2.5rem;
	}
}
	
	
	
	
/* ---------------------------------------- 
	Print styles
---------------------------------------- */
@media print {
	*,
	*:before,
	*:after {
		background:transparent !important;
		color:#000 !important;
		-webkit-box-shadow:none !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	table, 
	pre,
	blockquote {
		page-break-inside:avoid;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content:"";
	}
	pre,
	blockquote {
		border:1px solid #999;
	}
	thead {
		display:table-header-group;
	}
	tr,
	img {
		page-break-inside:avoid;
		page-break-after:avoid;
		max-width:100% !important;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 {
		page-break-after:avoid; 
		page-break-inside:avoid;
	}
	ul, 
	ol, 
	dl { 
		page-break-before:avoid; 
	}
	iframe, 
	ins {
		display:none;
		width:0 !important;
		height:0 !important;
		overflow:hidden !important;
		line-height:0pt !important;
		white-space:nowrap;
	}
}