/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/* 
COLOR SCHEME

Light Orange #f37252
Medium Orange #f15026
Dark Orange #b43b1c

Light Blue #92d4e2
Medium Blue #77c8d9
Dark Blue #5997a2
*/

/* import fonts */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@500&display=swap');



/* OVERALL/BODY */
/* zero margin & padding for everything */
* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/* set background color and add padding on body */
html, body {
	height: 100%;
}
body {
	background-color: #92d4e2;
}
#container {
	min-height: calc(100vh - 114px - 180px);
}
#page-content {
	overflow: auto;
}


/* HEADER */
/* set display, alignment, & padding settings for header (logo, nav, & button) */
header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 30px 10%;
}

/* LOGO */
/* make the cursor a pointer above the logo */
.logo {
	cursor: pointer;
}

/* NAV */
/* remove default styling from nav */
.nav {
	list-style: none;
}
/* set display mode and padding for list items in nav */
.nav li {
	display: inline-block;
	padding: 0px 20px;
}
/* set font and color of text in main nav and add transition to all its attributes */
.navlink {
	color: #f37252;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-decoration: none;
}
/* change color of text in main nav when you hover over it */
.navlink:hover {
	color: #f15026;
}

/* DROPDOWN */
/* set position and padding for dropdown menus & remove their default styling */
ul.drop-menu {
	position: absolute;
	list-style-type: none;
	padding: 5px 0px;
}
/* hide list items in dropdown by default */
ul.drop-menu li {
	display: none;
}
/* fade in with animation list items in dropdown when you hover over its parent */
li:hover > ul.drop-menu li {
	display: block;
	opacity: 0;
	animation-name: drop-menu;
	animation-duration: 200ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
/* keyframes for dropdown fade in animation */
@keyframes drop-menu {
	0% {opacity: 0}
	100% {opacity: 1}
}
/* set background color and padding for dropdown menu list items */
ul.drop-menu li {
	background: #5997a2;
	padding: 10px;
}
/* set font and color of text in dropdown nav and add transitions to all its attributes */
.drop-item {
	color: whitesmoke;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-decoration: none;
}
/* change color of text in dropdown nav when you hover over it */
.drop-item:hover {
	color: #D6D6D6;
}
/* add padding to top corners of first item in a dropdown */
ul.drop-menu li:first-child {
	border-radius: 5px 5px 0px 0px;
}/* add padding to bottom corners of last item in a dropdown */
ul.drop-menu li:last-child {
	border-radius: 0px 0px 5px 5px;
}

/* BUTTON */
/* set font and color of text for contact button */
button {
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: whitesmoke;
	text-decoration: none;
}
/* set padding, border, cursor, and background color for button, and add transition to all attributes */
button {
	padding: 9px 25px;
	background-color: rgba(89,151,162,1.00);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
/* change opacity of button when you hover over it */
button:hover {
	background-color: rgba(89,151,162,0.7);
}



/* FOOTER */
footer {
	padding-top: 20px;
	background: #5997a2;
	position: relative;
	height: 180px;
	clear: both;
}
.footer-content {
	max-width: 1300px;
	margin: auto;
	padding: 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap-reverse;
}
.logo-footer {
	cursor: pointer;
	margin-left: 137px;
}
.social-media {
	margin: 20px 0;
}
.social-media a {
	color: whitesmoke;
	margin-right: 25px;
	font-size: 22px;
	text-decoration: none;
	transition: all .3s ease;
}
.social-media a:hover {
	color: #f37252;
}
.copyright {
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	color: whitesmoke;
	font-size: 14px;
}



/* 404 page */
.error {
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	color: #f37252;
	text-align: center;
	padding: 150px 0;
}



/* CONSOLE GRID */
/* set up basic grid */
.feed {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 350px;
	grid-gap: 16px;
	margin: 40px 0px 40px 0px;
}
/* set color and font of text on cards */
.card-title {
	font-family: "Hind", sans-serif;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: whitesmoke;
	margin: 0;
}
/* set background settings for cards and add transition to all attributes */
.card {
	background-size: cover;
	background-repeat: none;
	background-postion: center;
	border-radius: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	padding: 20px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	-ms-grid-column: span 4;
	    grid-column-start: span 4;
}
/* scale up card and add shadow when you hover over it */
.card:hover {
	cursor:pointer;
	-webkit-box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
	        box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
	-webkit-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	        transform: scale(1.02);
}
/* set background gradient and image for nth card */
.card:nth-child(1) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/s-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/s-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/s-series.jpg");
}
.card:nth-child(2) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/m32.png");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/m32.png");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/m32.png");
}
.card:nth-child(3) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/sq-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/sq-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/sq-series.jpg");
}
.card:nth-child(4) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/qu-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/qu-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/qu-series.jpg");
}
.card:nth-child(5) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/si-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/si-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/si-series.jpg");
}
.card:nth-child(6) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/m-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/m-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/m-series.jpg");
}
.card:nth-child(7) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/eos-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/eos-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/eos-series.jpg");
}
.card:nth-child(8) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/mq-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/mq-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/mq-series.jpg");
}
.card:nth-child(9) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/strand-neo.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/strand-neo.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/strand-neo.jpg");
}
.card:nth-child(10) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/palette-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/palette-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/palette-series.jpg");
}
.card:nth-child(11) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/nx-series.png");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/nx-series.png");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/nx-series.png");
}
.card:nth-child(12) {
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(10,10,10,0)),
	color-stop(50%, rgba(10,10,10,0)),
	to(rgba(10,10,10,0.7))),url("images/s-series.jpg");
	background-image: -o-linear-gradient(
	top,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/s-series.jpg");
	background-image: linear-gradient(
	to bottom,
	rgba(10,10,10,0) 0%,
	rgba(10,10,10,0)	50%,
	rgba(10,10,10,0.7) 100%),url("images/s-series.jpg");
}
/* scale number of columns based on resolution of screen */
@media screen and (max-width: 1200px) {
	.card {
		-ms-grid-column: span 6;
		    grid-column-start: span 6;
	}
}
@media screen and (max-width: 800px) {
	.card {
		-ms-grid-column: span 12;
		    grid-column-start: span 12;
}