@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,400i|IBM+Plex+Serif&display=swap');

:root {
    --primary: #21618C;
    --secondary: #323232;
    --light: #AED6F1;
    --black: #323232;
	--light-bg: rgba(174, 214, 241, .25);
	--dark-bg: rgba(50, 50, 50, .5);

    --serif: 'IBM Plex Serif', serif;
    --sans: 'IBM Plex Sans', sans-serif;
    --sans-condensed: 'IBM Plex Sans Condensed', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
}

* {
    font-family: var(--serif);

    scroll-behavior: smooth;

    color: var(--black);
}

@media screen and (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto;
	}
}

html {
	overflow: hidden;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.m0 {
    margin: 0;
}

.p0 {
    padding: 0;
}

.full-size {
    width: 100%;
    height: 100%;
}

.content-padding {
    padding: 30px 0;
}

p.pad {
	padding: 15px 30px;
}

@media (orientation: landscape) {
	.pad-left {
		padding-left: 15px;
	}
}

input[type="checkbox"] {
	display: none;
}

/* ================================ GRID LAYOUT ================================= */

[class*="col-"] {
	float: left;
	width: 100%;
}

@media (orientation: landscape) {
	.row {
		height: auto;
        display: table;
        
        width: 100%;
    }
    
    .row-padding {
        padding: 30px;
        width: calc(100% - 60px);
    }

	[class*="col-"] {
		float: none;
		display: table-cell;
		vertical-align: middle;
	}

	.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%;
	}
}

.row::after {
	content: "";
	clear: both;
	display: table;
}