/*
	Colors:
	#cc171d
	#162336
	#325765
	#4d818c
*/

/* Imports */
@import url('reset.css');
/* General */
a { color: #162336; }
a:hover { text-decoration: underline; }
/* Classes */
.container { max-width: 1200px; margin: auto; }
.main.menu, .secondary.menu { background-color: #162336; }
.menu ul { list-style: none; display: flex; }
.menu ul li { flex: 3; }
.menu ul li a { color: white; font-weight: 300; letter-spacing: 2px; padding: 20px 5px; display: inline-block; width: 100%; text-align: center; transition: background-color .3s ease-in-out; }
.menu ul li a:hover, .menu a.pull-right:hover { background-color: #326765; }
.menu .notify { display: none; }
.menu a.pull-right { height: 58px; line-height: 46px; font-size: 24px; padding: 8px; color: #fff; transition: background-color .3s ease-in-out; }
.secondary.menu ul { display: block; }
.pt-1 { padding-top: .5em; }
.mt-1 { margin-top: .5em; }
.grid { overflow: hidden; }
.grid .tile { float: left; width: 200px; height: 200px; max-width: 100%; background-color: #326765; margin: 0 1em 1em 0; }
.grid .tile a { display: block; width: 100%; height: 100%; color: #fff; text-align: center; line-height: 200px; }
.grid .tile a:hover, .menu ul li a:hover { text-decoration: none; }
.pull-left { float: left; }
th.pull-left { float: none; text-align: left; }
.pull-right { float: right; }
.pull-right a { margin-right: 5px; }
.pull-right a:last-child { margin-right: 0; }
.notify { background-color: #C00; padding: 3px; border-radius: 12px; }
.full-width { width: 100%; }
.block { display: block; }
.b-bottom { border-bottom-width: 1px; border-bottom-style: solid; }
.b-top { border-top-width: 1px; border-top-style: solid; }
.border-grey { border-color: #CCC; }
.border-black { border-color: #000; }
.btn { display: inline-block; border: #000 1px solid; padding: 5px 10px; font-size: .8em; color: #000; background-color: #fff; cursor: pointer; line-height: 1.2em; font-weight: 400; font-family: verdana, sans-serif; }
.btn.primary { color: #fff; background-color: #000; }
.btn:hover { text-decoration: none; }
.btn-group .btn { margin-left: 5px; }
.btn-group .btn:first-child { margin-left: 0; }
ul.js-sortable { list-style: none; }
.js-sortable .handle { cursor: grab; }
.js-sortable div.handle { display: block; }
.js-sortable span.handle { display: inline-block; padding: 3px; margin-right: 5px; }
.handle, .js-dateselection, .hidden { display: none; }
.handle-width { max-width: 18px; }
.button-container button { display: block; margin: auto; }
/* Grid */
[class*="col-"] { width: 100%; }
.row::after { content: ""; clear: both; display: table; }
.p-0 { padding: 0; }
.p-1 { padding: .5em }
.p-2 { padding: 1em; }
.p-3 { padding: 1.5em; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: .5em; }
.pb-2 { padding-bottom: 1em; }
.pb-3 { padding-bottom: 1.5em; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: .5em; }
.pt-2 { padding-top: 1em; }
.pt-3 { padding-top: 1.5em; }
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: .5em; }
.pl-2 { padding-left: 1em; }
.pl-3 { padding-left: 1.5em; }
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: .5em; }
.pr-2 { padding-right: 1em; }
.pr-3 { padding-right: 1.5em; }
.m-0 { margin: 0; }
.m-1 { margin: .5em; }
.m-2 { margin: 1em; }
.m-3 { margin: 1.5em; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5em; }
.mb-2 { margin-bottom: 1em; }
.mb-3 { margin-bottom: 1.5em; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5em; }
.mt-2 { margin-top: 1em; }
.mt-3 { margin-top: 1.5em; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: .5em; }
.ml-2 { margin-left: 1em; }
.ml-3 { margin-left: 1.5em; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: .5em; }
.mr-2 { margin-right: 1em; }
.mr-3 { margin-right: 1.5em; }
@media all and (min-width: 768px) {
[class*="col-"] { float: left; }
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.menu .notify { display: inline; }
}
@media all and (max-width: 1000px) {
.menu ul { flex-wrap: wrap; }
.menu li { flex: 1 1 50%; }
}
@media all and (max-width: 480px) {
.menu li { flex-basis: 100%; }
}