* {
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	color: #070a10;
	background-color: #fbfcff;
}

h1, h2, h3, h4, h5, h6 {
	padding: 16px 0 16px 0;
	font-weight: bold;
	color: #26385b;
}
h1 { font-size: 36px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

p, pre {
	margin-bottom: 16px;
}

pre {
	margin: 16px 0;
	overflow-x: scroll;
	border-radius: 8px;
}

blockquote {
	margin: 24px;
	font-size: 24px;
	font-weight: bold;
	color: #26385b;
}

ol,
ul {
	margin: -8px 0 16px 24px;
}

li {
	padding: 2px;
}

a {
	color: #4464a3;
	text-decoration: none;
	outline: none;
	font-weight: bold;
}

a:hover, a:focus {
	color: #6b9cff;
	text-decoration: underline;
}

#header {
	background-color: #6b9cff;
	box-shadow: 0 0 24px #26385b;
	margin-bottom: 24px;
	color: #fff;
}

#header h1 {
	font-size: 42px;
	color: #fff;
	padding: 16px; 
}

#header a,
#header a:hover,
#header a:focus {
	text-decoration: none;
	outline: none;
}

#header li a {
	color: #fff;
}

#header li a:hover, #header li a:focus {
	text-decoration: underline;
}

#footer {
	box-sizing: border-box;
	min-height: 100px;
	background-color: #26385b;
	color: #fff;
	box-shadow: 0 0 24px #26385b;
	margin-top: 24px;
	padding: 16px 0;
}

#header ul,
#footer ul {
	list-style: none;
	margin: 16px;
}

#footer a,
#footer a:hover,
#footer a:focus {
	color: #fff;
}

#content {
	margin: 8px 0 64px 0;
	min-height: calc(100vh - 294px);
	padding: 0 16px;
}

/* Utils */

.u-ra { text-align: right; }

/* Grid */

.container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
}

.col-1, .col-2, .col-3, 
.col-4, .col-5, .col-6,
.col-7, .col-8, .col-9,
.col-10, .col-11, .col-12 {
	padding: 8px;
	box-sizing: border-box;
}

.container {
	max-width: 1200px;
}

.col-1  { width: 100px;  }
.col-2  { width: 200px;  }
.col-3  { width: 300px;  }
.col-4  { width: 400px;  }
.col-5  { width: 500px;  }
.col-6  { width: 600px;  }
.col-7  { width: 700px;  }
.col-8  { width: 800px;  }
.col-9  { width: 900px;  }
.col-10 { width: 1000px; }
.col-11 { width: 1100px; }
.col-12 { width: 1200px; }

.col-100 { width: 100%   }
.col-50  { width: 50%    }
.col-25  { width: 25%    }
.col-75  { width: 75%    }
.col-33  { width: 33%    }
.col-66  { width: 66%    }


.carousel {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: left;
	margin: 0 0 16px 0;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.carousel .item {
	padding: 8px 16px 0 16px;
	border-radius: 16px;
	border: 1px solid #26385b;
	box-shadow: 8px 8px 16px #26385b;
	margin: 16px 32px 32px 16px;
	box-sizing: border-box;
	min-width: 1100px;
}