/*
Theme Name: MIWDD
Description: MIWDD Theme for Jake Woodbury
Version: 2.0
Template Author: MIWDD
Site Author: Jake Woodbury
*/


/* Root
====================================*/
:root {
	--default: #1a1a2e; /*Font - near black for ADA high contrast*/
	--primo: #6c63ff; /*Primary - soft lavender purple*/
	--secondo: #a29bfe; /*Secondary - light lavender*/
	--terzo: #f0e6ff; /*Tertiary - very light lavender*/
	--quarto: #2d2d44; /*Quaternary - dark navy*/
	--ffamily: 'Roboto', sans-serif;
}


/* Global Styles
====================================*/

html, body {
	overflow-x: hidden;
}

body {
	color: var(--default);
	font-family: var(--ffamily);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	margin-bottom: 1rem;
}
h1, .h1 {
	color: var(--primo);
	font-size: 44px;
	line-height: 54px;
	font-weight: 700;
}
h2, .h2 {
	color: var(--primo);
	font-size: 36px;
	line-height: 46px;
	font-weight: 700;
}
h3, .h3 {
	color: var(--primo);
	font-size: 28px;
	line-height: 38px;
	font-weight: 700;
}
h4, .h4 {
	color: var(--secondo);
	font-size: 24px;
	font-weight: 700;
}
h5, .h5 {
	color: var(--primo);
	font-size: 22px;
	font-weight: 700;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
hr {
	border-top: 2px solid var(--primo);
	margin-top: 0;
}
mark {
	padding: 0;
}
ul li,
ol li {
	padding: 0.5rem 0;
}

blockquote {
	border-left: 5px solid var(--secondo);
	margin: 1rem 0;
	padding: 2rem 2rem 1rem 2rem;
	position: relative;
}
blockquote p {
	font-size: 18px;
	line-height: 26px;
	font-style: italic;
}
blockquote p:before {
	content: '\f10d';
	font-family: "FontAwesome";
	color: var(--primo);
	font-size: 7em;
	opacity: .2;
	position: absolute;
	margin-left: -20px;
}

.alignleft {
	float: left;
	margin: 0 2rem 2rem 0;
}
.alignright {
	float: right;
	margin: 0 0 2rem 2rem;
}
.aligncenter {
	display: block;
	margin: auto;
}

.small-text {
	font-size: 12px;
}
.med-text {
	font-size: 24px;
	line-height: 34px;
}
.large-text {
	font-size: 32px;
	line-height: 42px;
}
.super-large-text {
	font-size: 40px;
	line-height: 50px;
}
.bomb-large-text {
	font-size: 50px;
	line-height: 60px;
}
.extra-large-text {
	font-size: 60px;
	line-height: 70px;
}

.text-shadow {
	text-shadow: 1px 1px 3px #333;
}

.color-default { color: var(--default); }
.color-primo { color: var(--primo); }
.color-secondo { color: var(--secondo); }
.color-terzo { color: var(--terzo); }
.color-quarto { color: var(--quarto); }
.black { color: #333; }
.white, .white a { color: #fff !important;}

.bg-default { background-color: var(--default); }
.bg-primo { background-color: var(--primo); }
.bg-secondo { background-color: var(--secondo); }
.bg-terzo { background-color: var(--terzo); }
.bg-quarto { background-color: var(--quarto); }
.bg-gray { background-color: #f0f0f0; }
.bg-white { background-color: #fff; }


/* Image Overlay
==================*/

.img-overlay {
	position: relative;
}
[class^="img-overlay-"] {
	position: absolute;
}
.img-overlay-full {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.img-overlay-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.img-overlay-center-left {
	top: 50%;
	left: 10%;
	transform: translate(0%, -50%);
}
.img-overlay-center-right {
	top: 50%;
	right: 10%;
	transform: translate(0%, -50%);
}
.img-overlay-top-center {
	top: 0;
	left: 0;
	right: 0;
}
.img-overlay-top-left {
	top: 0;
	left: 10%;
}
.img-overlay-top-right {
	top: 0;
	right: 10%;
}
.img-overlay-bottom-center {
	bottom: 5%;
	left: 0;
	right: 0;
}
.img-overlay-bottom-left {
	bottom: 5%;
	left: 10%;
}
.img-overlay-bottom-right {
	bottom: 5%;
	right: 10%;
}

/* Buttons
==================*/

.btn {
	border: none;
	border-radius: 0;
	font-weight: 700;
	padding: 8px 20px 8px 20px;
	text-shadow: none;
	text-transform: uppercase;
	transition: 0.4s;
}
.btn-primo {
	background-color: var(--primo);
	color: #fff !important;
}
.btn-primo:hover, .btn-primo:active, .btn-primo:focus {
	background-color: var(--primo);
	color: #fff !important;
}
.btn-secondo {
	background-color: var(--secondo);
	color: #fff !important;
}
.btn-secondo:hover, .btn-secondo:active, .btn-secondo:focus {
	background-color: var(--secondo);
	color: #fff !important;
}
.btn-terzo {
	background-color: var(--terzo);
	color: #fff !important;
}
.btn-terzo:hover, .btn-terzo:active, .btn-terzo:focus {
	background-color: var(--terzo);
	color: #fff !important;
}
.btn-quarto {
	background-color: var(--quarto);
	color: #fff !important;
}
.btn-quarto:hover, .btn-quarto:active, .btn-quarto:focus {
	background-color: var(--quarto);
	color: #fff !important;
}


/* Zip Input
==================*/

.zipinput {
	border: 1px solid #585858;
	box-shadow: none;
	color: #585858;
	max-width: 180px;
	padding: 6px 10px;
	outline: none;
	text-align: center;
}
.zipinput::placeholder {
	color: #585858;
}


/* Breadcrumbs
====================================*/

.breadcrumbs a {
	color: #999999 !important;
	text-decoration: none;
}
.breadcrumbs {
	color: #999;
}


/* Header
====================================*/

header a {
	text-decoration: none;
}
header .logo {
	display: block;
	margin: auto;
}


/* Content
====================================*/

.content a {
	color: var(--primo);
}
.content ul li {
	padding-left: 0.5rem;
}
.content ul li::marker {
	content: "\f7e4";
	color: var(--primo);
	font: var(--fa-font-solid);
}


/* Footer
====================================*/

footer a {
	text-decoration: none;
}


/* Pagination
====================================*/

.pagination {
	margin: 3rem 0;
}
.page-numbers {
	border: 1px solid var(--secondo);
	padding: 5px 10px;
	text-decoration: none;
}


/* Post
====================================*/

.post {
	padding-bottom: 3rem;
}
.post h3 {
	margin: 1rem 0;
}
.post img {
	display: inline-block;
}


/* Responsive CSS
====================================*/

@media (width < 576px) {
	h1, .h1 {
		font-size: 32px;
		line-height: 42px;
	}
	h2, .h2 {
		font-size: 26px;
		line-height: 36px;
	}
	h3, .h3 {
		font-size: 22px;
		line-height: 30px;
	}
	.super-large-text {
		font-size: 36px;
		line-height: 46px;
	}
	.bomb-large-text {
		font-size: 40px;
		line-height: 50px;
	}
	.extra-large-text {
		font-size: 40px;
		line-height: 50px;
	}
}

@media (min-width: 576px) {
	.post img {
		float: right;
		margin-left: 1rem;
	}
}

@media (min-width: 768px) {
	.li-cols-2,
	.li-cols-3 {
		columns: 2;
		column-gap: 40px;
	}
}

@media (width < 992px) {
	.alignright, .alignleft {
		display: block;
		float: none;
		margin: 0 auto 1rem auto;
	}
}

@media (min-width: 1200px) {
	.li-cols-3 {
		columns: 3;
		column-gap: 40px;
	}
}


/* Custom Styles
====================================*/


/* Custom Styles Responsive CSS
====================================*/

/*These styles will overwrite any CSS above. 
For normal use, there is no need to specify a Media Query for less then 576px as the CSS above will cover that.
There should not be much need of Media queries past these default bootstrap breakpoints unless the theme requires something unique.*/
@media (width > 576px) {}
@media (width > 768px) {}
@media (width > 992px) {}
@media (width > 1200px) {}
@media (width > 1400px) {}