@import url(https://fonts.googleapis.com/css?family=Rubik);
/* body, html {
	 color: #fff;
	 text-align: center;
	 background: #efefef;
	 font-family: Helvetica, sans-serif;
	 margin: 0;
}*/
 .grid-container {
	 background: #efefef;
	 font-family: 'Rubik', sans-serif;
}
 @supports (display: grid) {
	 .grid-container {
		 display: grid;
		 grid-template-columns: 1fr 1fr 1fr;
		 grid-template-rows: auto 1fr auto;
		 grid-template-areas: "header header header" "title title footer" "main main main";
	}
	 @media screen and (max-width: 500px) {
		 .grid-container {
			 grid-template-columns: 1fr;
			 grid-template-rows: 0.3fr 1fr auto 1fr;
			 grid-template-areas: "header" "title" "main" "footer";
		}
	}
	 .grid-item {
		 color: #fff;
		 background: skyblue;
		 padding: 3.5em 1em;
		 font-size: 1em;
		 font-weight: 700;
	}
	 /*.header {
		 background-color: #092a37;
		 grid-area: header;
		 padding: 1em;
	}
	 .title {
		 color: #555;
		 background-color: #f4fbfd;
		 grid-area: title;
	}*/
	 .main {
		 color: #959595;
		 background-color: #fff;
		 grid-area: main;
		 padding: 0;
		 overflow-x: scroll;
		 overflow-y: hidden;
	}
	 .footer {
		 background-colors: #5bbce4;
		 grid-area: footer;
		 padding: 0.6em;
	}
	 .items {
		 position: relative;
		 width: 100%;
		 overflow-x: scroll;
		 overflow-y: hidden;
		 white-space: nowrap;
		 transition: all 0.2s;
		 transform: scale(0.98);
		 will-change: transform;
		 user-select: none;
		 cursor: pointer;
	}
	 .items.active {
		 background: rgba(255, 255, 255, 0.3);
		 cursor: grabbing;
		 cursor: -webkit-grabbing;
		 transform: scale(1);
	}
	 .img {
		 display: inline-block;
		 background: skyblue;
		 height: 250px;
		 width: 400px;
		 margin: 2em 1em;
	}
	 @media screen and (max-width: 500px) {
		 .img {
			 height: 200px;
			 width: 200px;
		}
	}
}
/* a {
	 display: block;
	 color: #c9e9f6;
	 text-decoration: underline;
	 margin: 1em auto;
}
 a:hover {
	 cursor: pointer;
}
 p {
	 text-align: left;
	 text-indent: 20px;
	 font-weight: 100;
}
 i {
	 color: skyblue;
}
 */