/*
Theme Name: Hot Business
Theme URI: https://hot-themes.com/wordpress/themes/business/
Author: HotThemes
Author URI: https://hot-themes.com/
Description: Hot Business theme appropriate for business and corporate websites. Responsive and Gutenberg ready WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: sparky-framework
*/

/*****

This stylesheet contains base style.
There are more CSS files inside /CSS folder.

TABLE OF CONTENTS 

I   BASE CSS

    1. Box model
    2. Reset elements
    3. Default paragraphs
    4. Default link
    5. Blockquote
    6. Table
    7. Deleted text
    8. Inserted text
    9. Horizontal rule
    10. Subscript & superscript
    11. Small text
    12. Default image
    13. Text for screen readers
    14. Form elements
    15. Reset non-text input types
    16. Buttons
    17. Responsive images/videos
    18. Image align
    19. Avatar image
    20. Caption
    21. Gallery
    22. Author profiles
    23. Posts loop
    24. Archives
    25. Attachment
    26. Comments
    27. Comment form
    28. Widgets
    29. Post formats

II  LAYOUT

    1. Clear floats
    2. Non-collapsible rows
    3. Full width rows
    4. Multi column layouts
       a. Pages
       b. Archives

III THEME FEATURES

    1. Image animation
    2. Scroll to top button
    3. Page transitions

IV  SITE ELEMENTS

    1. Site title
    2. Logo & slogan
    3. Social
    4. Custom header
    5. Copyright notice
    6. Navigation

V   PAGE ELEMENTS

    1. Post details
    2. Author block
    3. Custom fields
    4. Linked pages
    5. Blank page

VI  TYPOGRAPHY

	1. Titles
    2. Unordered & ordered lists
    3. Font awesome icon sizes
    4. Textual blocks
    5. Dropcaps
    6. Inset styles
    7. Highlighted text
    8. Definition lists

VII MENUS

    1. Static menu type
    2. Drop-down menu type
    3. Off-canvas menu type
    4. Menu descriptions

VIII RESPONSIVE

    1. Responsive top menu
    2. Media queries for multi-column layouts
       a. Pages
       b. Archives
    3. Admin bar

*****/



/*** I BASE CSS ***/

/* 1. Box model */

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* 2. Reset elements */

html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	min-height: 100%;
	position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
}

pre {
	max-width: 100%;
    overflow: auto;
    padding: 15px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
	margin-bottom: 30px;
	background: #f3f3f3;
}

pre.wp-block-verse {
	background: transparent;
    font-family: inherit;
    font-style: italic;
    padding-left: 0;
    padding-right: 0;
}

address {
	margin-bottom: 30px;
}

body {
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* 3. Default paragraphs */

p.has-small-font-size {
	font-size: 13px;
}

p {
	margin: 0 0 30px 0;
}

p.has-large-font-size {
	font-size: 36px;
}

p.has-huge-font-size {
	font-size: 42px;
}

p.thin {
	max-width: 700px;
	margin: 0 auto 30px;
}

/* 4. Default link */

a {
	outline: none;
}

a:focus {
	outline: thin dotted;
}

/* 5. Blockquote */

blockquote, q, blockquote.wp-block-quote {
	quotes: none;
	font-family: Georgia;
	font-size: 20px;
    font-style: italic;
    padding: 10px 10px;
    margin: 10px 0;
    border-left: 5px solid #1371b1;
    background-color: #f3f3f3;
    clear: both;
}

blockquote.wp-block-quote p {
	font-size: 20px;
	font-style: italic;
}

blockquote.wp-block-quote cite {
	font-weight: 700;
	font-style: normal;
	font-size: 14px;
}

.wp-block-pullquote blockquote {
	background: transparent;
	border-left: 0;
	border-top: 5px solid #1371b1;
	border-bottom: 5px solid #1371b1;
	padding: 10px;
	margin: 0;
}

.wp-block-pullquote blockquote cite {
	font-style: normal;
}

q {
	background-color: transparent;
	border-left: 0;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

blockquote p:last-child {
	margin-bottom: 0;
}

/* 6. Table */

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border:2px solid #ccc;
	margin-bottom: 30px;
}

table.wp-block-table.is-style-stripes {
	border: 0;
}

table thead {
	background: #1371b1;
}

th, td {
	padding: 10px;
	text-align: left;
    border: 1px solid #ccc;
}

/* 7. Deleted text */

del {
	color: #aaa;
}

/* 8. Inserted text */

ins {
	background: #fff9c0;
	text-decoration: none;
}

/* 9. Horizontal rule */

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 25px;
}

hr.wp-block-separator.is-style-default {
	background-color: #dde5de;
	max-width: 200px;
	padding: 0;
    margin: 50px auto;
    height: 3px;
}

hr.wp-block-separator.is-style-wide {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin: 50px -50vw;
    background-color: #dde5de;
}

.wp-block-column hr.wp-block-separator.is-style-wide {
    right: auto;
    width: 100%;
    max-width: 100%;
}

/* 10. Subscript & superscript */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* 11. Small text */

small {
	font-size: smaller;
}

/* 12. Default image */

img {
	max-width: 100%;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

figure.wp-block-image {
	margin-bottom: 30px;
}

/* 13. Text for screen readers */

.says, .screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

/* 14. Form elements */

button,
input,
textarea {
	background-color: #f0f1f3;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	padding: 8px;
	margin-top: 5px;
	-webkit-appearance: none;
}

button,
input {
    line-height: normal;
}

textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
	background-color: #f0f1f3;
    border: 0;
}

button:focus,
input:focus,
textarea:focus {
	outline: none;
}

select {
   -webkit-appearance: button;
   -moz-appearance: none;
   -webkit-border-radius: 5px;
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(images/select_arrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 0;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
}

.post-password-form input[type="password"] {
	padding: 14px;
    margin: 0 15px;
}

@media (max-width: 480px) {

	.post-password-form input[type="password"] {
		display: block;
	    margin: 15px 0;
	    width: 100%;
	}

}

/* 15. Reset non-text input types */

input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* 16. Buttons */

input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
li.bypostauthor cite span,
.button, .btn, a.more-link,
.woocommerce #review_form #respond .form-submit input {
    display: inline-block;
    padding: 10px 25px;
    margin: 0;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    background-color: #1371b1;
    background-image: none;
    border: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

a.more-link {
	margin-bottom: 0;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
	font-size: inherit;
}

button[disabled],
input[disabled] {
    cursor: default;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover,
.button:hover, .btn:hover, a.more-link:hover {
	background: #333;
    text-decoration: none;
    transition: all .3s;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	border: 1px solid #333;
}

li.bypostauthor cite span {
	color: #fff;
	background-color: #21759b;
	border: 1px solid #1f6f93;
	padding: 0;
}

.wp-block-hotblocks-button a {
    min-width: 50px;
    text-align: center;
    text-decoration: none !important;
}

/* 17. Responsive images/videos */

.entry-content img,
.comment-content img,
.widget img,
.gallery-item img {
	max-width: 100%;
	height: auto;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
	display: block;
}

img.wp-post-image {
	max-width: 100%;
	height: auto;
	display: block;
}

embed,
iframe,
object,
video {
	max-width: 100%;
}

.wp-block-embed-youtube .wp-block-embed__wrapper {
    position: relative;
}

.wp-block-embed-youtube .wp-block-embed__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.wp-block-embed-youtube .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 18. Image/blocks align */

.alignleft {
	float: left;
	margin: 0 30px 15px 0;
}

.alignright {
	float: right;
	margin: 0 0 15px 30px;
}

.aligncenter {
	display: block;
	margin: 0 auto 15px;
}

.alignfull {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.alignwide {
    width: 90vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -45vw;
    margin-right: -45vw;
}

.wp-block-column .alignwide {
	margin: 0;
	left: auto;
	right: auto;
	width: 100%;
	max-width: 100%;
}

/* 19. Avatar image */

.comment-content img,
.author-avatar img,
img.avatar {
	margin: 0 15px 15px 0;
}

.comment img.avatar {
	float: left;
	border-radius: 50%;
}

/* 20. Caption */

.wp-caption {
	max-width: 100%;
	padding: 0;
	margin-bottom: 30px;
}

.wp-caption-text {
	color: #999;
	padding: 0 10px;
	margin-bottom: 30px;
	clear: both;
}

.wp-caption.alignright {
	margin: 0 0 30px 30px;
}

.wp-caption.alignleft {
	margin: 0 30px 30px 0;
}

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	padding: 10px;
}

img.wp-smiley,
.rsswidget img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* 21. Gallery */

.gallery {
	clear: both;
	padding: 30px 0;
}

.gallery-item {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding-bottom: 15px;
}

.gallery-icon img {
	display: inline;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.11%;
}

/* 22. Author profiles */

.author .archive-header {
	margin-bottom: 25px;
}

.author-info {
	border-top: 1px solid #ededed;
	margin: 25px 0;
	padding-top: 25px;
	overflow: hidden;
}

.author.archive .author-info {
	border-top: 0;
	margin: 0 0 50px;
}

.author.archive .author-avatar {
	margin-top: 0;
}

/* 23. Posts loop */

article.post {
	padding: 50px 0;
	border-bottom:1px solid #dde5de;
}

article.post:last-child {
	border-bottom: 0;
}

.single article.post {
	padding-top: 0;
}

main:not(.multicol) article.post {
	clear: both;
}

.post_wrapper {
	display: flex;
}

.featured_image {
	width: 35%;
}

.post_container {
	width: 65%;
}

.post_align_aligncenter {
	flex-direction: column;
}

.post_align_aligncenter .post_container {
	width: 100%;
}

.featured_image.featured_image_alignleft {
	width: 33%;
	margin-right: 2%
}

.featured_image.featured_image_alignright {
	order: 2;
	width: 33%;
	margin-left: 2%;
}

.featured_image.featured_image_aligncenter {
	width: 100%;
}

.post_format-post-format-image .wp-caption-text {
	text-align: center;
}

.featured_image .wp-caption-text {
	max-width: 100%;
	font-weight: 400;
	text-align: center;
}

/* 24. Archives */

.archive-header,
.page-header {
	margin-bottom: 50px;
	padding-bottom: 25px;
}

.archive-meta {
	margin-top: 25px;
}

/* 25. Attachment */

p.attachment img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

.attachment .entry-caption {
	margin-top: 15px;
}

/* 26. Comments */

.nav-single + .comments-area,
#comment-nav-above {
	margin: 50px 0;
}

.commentlist .pingback {
	margin:0;
	padding: 15px 0;
	border-bottom:1px solid #d6e8ee;
}

.commentlist .pingback p {
	margin-bottom: 0;
}

.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.commentlist .children {
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
}

.commentlist > li.comment {
	margin: 0;
	padding: 0;
}

.commentlist li.comment article {
	margin-bottom: 0;
	padding: 15px 0;
    border-bottom: 1px solid #d6e8ee;
	clear: both;
}

.commentlist li.bypostauthor {
	background: #eee;
	padding: 15px;
}

h3#comments-title {
	padding-top: 15px;
}

.comment-meta {
	color: #999;
	font-weight: 300;
}

.comment-meta a {
	color: #999;
	font-weight: 400;
}

.comment-meta a:hover {
	color: #d44457;
}

.comment-author {
	display: block;
}

.comment-author cite,
.comment-author cite a {
	color: #333;
	font-weight: 700;
}

.comment-author cite a:hover {
	color: #d44457;
}

.comment-author cite {
	font-style: normal;
	font-size: 18px;
	font-weight: bold;
}

.comment-text {
	clear: both;
}

/* 27. Comment form */

#respond {
	clear: both;
	margin-top: 30px;
}

#respond h3#reply-title #cancel-comment-reply-link {
	margin-left: 15px;
}

#respond form p {
	margin: 15px 0;
}

#respond form p.logged-in-as {
	margin-bottom: 30px;
}

#respond form label {
	display: block;
	margin-bottom: 15px;
}

#respond form input[type="text"],
#respond form input[type="email"],
#respond form input[type="url"],
#respond form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
}

#respond form p.form-allowed-tags {
	margin: 0;
	color: #5e5e5e;
}

/* 28. Widgets */

.widget input.search-submit {
	padding: 5px 10px 4px;
}

#wp-calendar {
	margin: 0;
	width: 100%;
}

#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}

#wp-calendar #next {
	padding-right: 25px;
	text-align: right;
}

#wp-calendar #today {
	font-weight: bold;
}

/* 29. Post formats */

.format-quote a.more-link {
	color: #d44457;
	border:0;
	padding: 0;
}

.format-quote a.more-link:hover {
	background: transparent;
}




/*** II LAYOUT ***/

/* 1. Clear floats */

.clr {
    clear:both;
}

/* 2. Non-collapsible rows
      Rows with class .one in Layout will not collapse on small screens */

.one [class*="sparkle"] {
	float: left;
}

.one .sparkle1 {
    width: 8.33333333%;
}

.one .sparkle2 {
    width: 16.66666667%;
}

.one .sparkle3 {
    width: 25%;
}

.one .sparkle4 {
    width: 33.33333333%;
}

.one .sparkle5 {
    width: 41.66666667%;
}

.one .sparkle6 {
    width: 50%;
}

.one .sparkle7 {
    width: 58.33333333%;
}

.one .sparkle8 {
    width: 66.66666667%;
}

.one .sparkle9 {
    width: 75%;
}

.one .sparkle10 {
    width: 83.33333333%;
}

.one .sparkle11 {
    width: 91.66666667%;
}

.one .sparkle12 {
    width: 100%;
}

/* 3. Full width rows 
      Rows with class .fluid in Layout will use 100% of screen space */

.fluid .sparky_container {
    width: 100%;
}

/* 4. Multi column layouts */

.sparky_container::after, [class*="sparky_cols_"]:after {
    content: '';
    display: table;
    clear: both;
}

.sparky_container .sparky_container {
    width: 100%;
}

.wp-block-columns {
	margin-left: -15px;
    margin-right: -15px;
}

.wp-block-columns .wp-block-column {
	margin-left: 15px;
	margin-right: 15px;
}

/* 4.a Pages */

div.sparky-left-col > div.maincontent {
	width: 75%;
	float: left;
	padding-left: 50px;
}

div.sparky-right-col > div.maincontent {
	width: 75%;
	float: left;
	padding-right: 50px;
}

div.sparky-left-right-col > div.maincontent {
	width: 60%;
	float: left;
}

/* 4.b Archives */

.sparky-left-col > aside {
	width: 25%;
	float: left;
	padding: 0 0 40px;
}

.sparky-left-col > div.sparky-main-col {
	width: 75%;
	float: left;
	padding-left: 50px;
}

.sparky-right-col > aside {
	width: 25%;
	float: left;
	padding: 0 0 40px;
}

.sparky-right-col > div.sparky-main-col {
	width: 75%;
	float: left;
	padding-right: 50px;
}

.sparky-left-col.sparky-right-col > div.sparky-main-col {
	width: 60%;
	float: left;
}

.sparky-left-right-col > aside {
	width: 20%;
	float: left;
	padding: 0 0 40px;
}




/* III THEME FEATURES */

/* 1. Image animation */

.img-with-animation {
    opacity: 0;
    position: relative;
}

.img-with-animation[data-animation='grow-in'] {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);}

.img-with-animation[data-animation='fade-in-from-left'] {
    left: -40px;
}

.img-with-animation[data-animation='fade-in-from-right'] {
    right: -40px;
}

.img-with-animation[data-animation='fade-in-from-bottom'] {
    bottom: -100px;
}

/* 2. Scroll to top button */

#back-top a {
    width: 60px;
    display: block;
    text-decoration: none;
    outline:none;
}

#back-top span {
    width: 60px;
    height: 60px;
    display: block;
    background: url(images/top.png) no-repeat center center;
    cursor: pointer;
}

/* 3. Page transitions */

.animsition,
.animsition-overlay {
    position: relative;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animsition-overlay-slide {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}

.animsition-loading,
.animsition-loading:after {
    width: 32px;
    height: 32px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    border-radius: 50%;
    z-index: 100;
}

.animsition-loading {
    background-color: transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.2);
    border-right: 5px solid rgba(0, 0, 0, 0.2);
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
    border-left: 5px solid #eee;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: animsition-loading;
    animation-name: animsition-loading;
}

@-webkit-keyframes animsition-loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animsition-loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
}




/*** IV SITE ELEMENTS ***/

/* 1. Site title */

.mp_sitetitle p {
	line-height: 1;
	padding: 0;
    margin: 0;
}

.mp_sitetitle p.site-title {
	font-size: 2em;
	font-weight: bold;
}

.mp_sitetitle p.site-description {
	font-size: 1em;
}

/* 2. Logo & slogan */

.mp_logo a {
	text-decoration: none;
}

/* 3. Social */

.mp_social img {
	max-width: 64px;
}

.mp_social i {
	font-size: 18px;
}

.mp_social i:hover {
	color: #ffffff;
}

/* 4. Custom header */

.mp_customheader img {
    width:100%;
}

/* 5. Copyright notice */

p.copyright {
	margin: 0;
}

p.copyright a:hover {
}

/* 6. Navigation */

.sparky_navigation {
	margin: 60px 0 40px;
}

.page-links {
	margin: 15px 0;
}

.sparky_navigation span,
.sparky_navigation a,
.page-links span,
.page-link a {
	padding: 0 7px;
}

.page-link span {
	padding-right: 7px;
}

.sparky_navigation .prevnavi,
.sparky_navigation .nextnavi {
	width: 50%;
	display: block;
	float: left;
	padding: 0;
}

.sparky_navigation .nextnavi {
	text-align: right;
}

.sparky_navigation .prevnavi a,
.sparky_navigation .nextnavi a,
span.page-links-title {
	padding: 0;
}

.sparky_navigation .pages {
	padding-left: 0;
}




/*** V PAGE ELEMENTS ***/

/* 1. Post details */

.sparky-details-top,
.sparky-details-bottom {
	padding: 7px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.sparky-details-top {
	margin-bottom: 15px;
	font-size: 12px;
}

.single-post .sparky-details-top {
	margin-top: 15px;
}

.sparky-details-bottom {
	margin-bottom: 30px;
}

.post-edit-link {
	font-size: 12px;
	padding: 0 10px;
}

/* 2. Author block */

.sparky-author-block {
	padding: 15px 30px;
	margin: 60px 0;
	border: 1px solid #d6e8ee;
}

.sparky-author-block img {
	float: left;
	margin: 0 15px 15px 0;
}

/* 3. Custom fields */

ul.post-meta {
	margin:0;
	padding: 0;
	list-style: none;
}

.post-meta-key {
	display: block;
	font-weight: 700;
}

/* 4. Linked pages */

.page-link {
	margin-bottom: 30px;
}

/* 5. Blank page */

.page-template-page-blank .sparky_cell.content_sparky {
    padding-top: 0;
    padding-bottom: 50px;
}



/*** VI TYPOGRAPHY ***/

/* 1. Titles */

h1 {
	text-align: center;
}

h1.page-title {
	margin: 20px 0 20px;
}

h1, h2, h3 {
	word-wrap: break-word;
	margin: 0 0 15px;
}

h4, h5, h6 {
	word-wrap: break-word;
	margin: 0 0 5px;
}

h1 {
	font-size: 32px;
	color:#d62027;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 18px;
}

h4.subheadboldgold {
color:#a68637;
font-weight:700;
}

h3.graysubhead {
    color:#606060;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 16px;
	font-weight: 400;
}

/* 2. Unordered & ordered lists */

ul, ol {
	margin: 15px 15px 30px 45px;
	padding: 0;
}

ul li, ol li {
	padding: 0;
	margin: 0 0 15px 0;
}

/* 3. Font awesome icon sizes */

.fa-1 {
	font-size: 1em;
}

.fa-2 {
	font-size: 2em;
}

.fa-3 {
	font-size: 4em;
}

.fa-4 {
	font-size: 7em;
}

.fa-5 {
	font-size: 12em;
}

.fa-6 {
	font-size: 16em;
}

/* 4. Textual blocks */

.txtblock {
	padding:15px 15px 15px 60px;
	margin: 10px 0;
}

.txtblock-warning {
	padding:15px 30px 15px 90px;
	color:#444;
	border: 1px solid #ffcc00;
	background:#ffff66;
	min-height: 50px;
}

.txtblock-warning:before {
	font-family: FontAwesome;
	content: "\f071";
	font-size: 32px;
	color: #ffcc00;
	position: absolute;
	margin: 0 0 0 -70px;
	line-height: 1;
}

.txtblock-info {
	padding:15px 30px 15px 90px;
	color:#006699;
	border: 1px solid #006699;
	background:#bde1ff;
	min-height: 50px;
}

.txtblock-info:before {
	font-family: FontAwesome;
	content: "\f05a";
	font-size: 32px;
	color: #006699;
	position: absolute;
	margin: 0 0 0 -70px;
	line-height: 1;
}

.txtblock-error {
	padding:15px 30px 15px 90px;
	color:#900;
	border: 1px solid #900;
	background:#f8b5b5;
	min-height: 50px;
}

.txtblock-error:before {
	font-family: FontAwesome;
	content: "\f057";
	font-size: 32px;
	color: #900;
	position: absolute;
	margin: 0 0 0 -70px;
	line-height: 1;
}

.txtblock-quote {
	padding:10px;
	font-size:140%;
	font-family: Georgia, serif;
	font-style:italic;
	line-height:1.4;
}

.txtblock-quote:before {
	font-family: FontAwesome;
	content: "\f10d";
	font-size: 32px;
	font-style:normal;
	color: #ddd;
	float: left;
	margin-right: 30px;
}

.txtblock-quote:after {
	font-family: FontAwesome;
	content: "\f10e";
	font-size: 32px;
	font-style:normal;
	color: #ddd;
	float: right;
	margin-left: 30px;
}

/* 5. Dropcaps */

.dropcap:first-letter {
    font-size: 400%;
    font-weight:bold;
    float:left;
    margin:0 10px 5px 0;
    line-height: 1;
}

span.sparky-drop-default,
span.sparky-drop-circle,
span.sparky-drop-square,
span.sparky-drop-round {
	font-size: 300%;
	font-weight:bold;
	float:left;
	margin:0 15px 10px 0;
	padding: 0 0.1em;
	position: relative;
	width: 60px;
    height: 60px;
    line-height: 60px;
	text-align: center;
}

span.sparky-drop-circle,
span.sparky-drop-square,
span.sparky-drop-round {
	background: #ccc;
	color: #fff;
}

span.sparky-drop-circle {
	border-radius: 50%;
}

span.sparky-drop-round {
	border-radius: 10px;
}


/* 6. Inset styles */

.inset_left {
	display:block;
	float:left;
	width: 150px;
	font-style: italic;
	margin: 15px 30px 15px 0;
}

.inset_right {
	display:block;
	float:right;
	width: 150px;
	font-style: italic;
	margin: 15px 0 15px 30px;
}

.inset_title {
    font-weight: bold;
    display: block;
}

/* 7. Highlighted text */

.sparky-highlight {
	padding: 0 3px;
}

.sparky-highlight-blue {
	background: #99ffff;
}

.sparky-highlight-green {
	background: #99ff99;
}

.sparky-highlight-orange {
	background: #ffcc99;
}

.sparky-highlight-pink {
	background: #ff9999;
}

.sparky-highlight-purple {
	background: #ff99ff;
}

.sparky-highlight-yellow {
	background: #ffff66;
}

/* 8. Definition lists */

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 30px;
}




/* VII MENUS */

/* 1. Static menu type */

ul.menu.static {
    margin:0;
    padding:0;
    list-style: none;
}

ul.menu.static li {
    display:block;
    margin:0;
    padding:0;
}

/* 2. Drop-down menu type */

ul.menu.dropdown {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    z-index:100;
    white-space:normal;
}

ul.menu.dropdown ul {
    display:none;
    list-style:none;
    margin:0;
    padding:10px 0;
    position:absolute;
    z-index:100;
}

ul.menu.dropdown > li > a {
    display:block;
    text-decoration:none;
    cursor:pointer;
}

ul.menu.dropdown > li {
    display:inline-block;
    position:relative;
    margin:0;
    padding:0;
}

ul.menu.dropdown li ul li {
	position:relative;
    margin:0;
    padding:0;
}

ul.menu.dropdown li ul a {
    display:block;
    cursor:pointer;
}

ul.menu.dropdown li ul li:last-child a {
    border-bottom:0;
}

ul.menu.dropdown ul ul {
    top:0px;
    margin-top: -10px;
}

/* 3. Off-canvas menu type */

img.open-menu {
	width: 40px;
	height: 30px;
	margin-top: 7px;
}

.overlay-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
	z-index: 999;
}

.overlay-menu.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
}

.overlay-menu.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
}

.overlay-menu .nav-title {
	text-align: center;
	top: 8%;
}

.overlay-menu nav {
	position: relative;
	height: 50%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.overlay-menu ul.menu {
	list-style: none;
	padding: 0;
	margin: 0 auto !important;
	display: inline-block;
	position: relative;
}

.overlay-menu ul li {
	display: block;
	position: relative;
	opacity: 0;
	margin:0 0 10px;
}

.overlay-menu ul li a {
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
}

.open-menu,
.close-menu,
.button {
	cursor: pointer;
}

.close-menu {
	display: block;
	padding-top: 15px;
	opacity: .7;
}

.close-menu:hover {
	opacity: 1;
}

.overlay-menu ul li ul {
	margin: 10px 0;
}

.overlay-menu ul li ul.sub-menu a {
	font-size: 14px;
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		left: 20%;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}

/* 4. Menu descriptions */

ul.menu .sub {
	position: absolute;
    left: 0;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    text-align: center;
    width: 100%;
    line-height: 1;
    margin-top: -5px;
}

.nav-collapse.opened ul.menu .sub {
	text-align: left;
	padding-left: 15px;
    padding-right: 15px;
}

ul.menu ul .sub {
	position: relative;
    width: 180px;
    display: block;
    white-space: normal;
    text-align: left;
    margin-top: 0;
}



/*** VIII RESPONSIVE ***/

/* 1. Responsive top menu */

.js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    zoom: 1;
}

.nav-collapse.opened {
    max-height: 9999px;
    position:absolute;
}

.nav-collapse.opened > ul {
    position: fixed !important;
    top: 0;
    left: 5%;
    width: 90%;
    background:#444;
    z-index:100000 !important;
}

.nav-collapse.opened > ul ul {
    width: 100% !important;
    position: relative !important;
    left:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:#444 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.nav-collapse.opened > ul ul li {
    height:auto;
}

.nav-collapse.opened li {
    width: 100%;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.nav-collapse.opened li.current-menu-item, .nav-collapse.opened li:hover {
    background:#333 !important;
}

.nav-collapse.opened li.current-menu-item a {
    color:#fff !important;
}

.nav-collapse.opened li a {
    padding:10px 15px !important;
    margin:0;
    line-height:25px;
    color:#fff !important;
}

.nav-collapse.opened li li a {
	padding:10px 25px !important;
}

.nav-toggle {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:url(images/tinynav.png);
    background-size: 40px 30px;
    float: right;
    width: 40px;
    height: 30px;
    margin-top: 23px;
    text-indent:-9999px;
}

.nav-toggle.current-menu-item {
    position: absolute;
    z-index: 100001;
    right: 7%;
    top: 0;
    margin-top:10px;
    outline:none;
}

.nav-collapse.opened span.openMenu {
	position: absolute;
    right: 15px;
    top: 0;
    width: 45px;
    height: 45px;
    background: url(images/arrow_submenu.png);
    cursor: pointer;
}

/* 2. Media queries for multi-column layouts */

@media (max-width: 767px) {

	/* 2.a Pages */

	div.sparky-left-col > div.maincontent,
	div.sparky-right-col > div.maincontent,
	div.sparky-left-right-col > div.maincontent {
		width: 100%;
		float: none;
	}

	/* 3.a Archives */

	.sparky-left-col > aside,
	.sparky-left-col > div.sparky-main-col,
	.sparky-right-col > aside,
	.sparky-right-col > div.sparky-main-col,
	.sparky-left-col.sparky-right-col > div.sparky-main-col,
	.sparky-left-right-col > aside {
		width: 100%;
		float: none;
	}

}

/* 3. Admin bar */

body.admin-bar {
    margin-top: 32px !important;
}

.admin-bar .nav-collapse.opened ul#menu-top-menu.menu.dropdown {
    margin-top:32px;
}

@media (max-width: 992px) {

	.alignwide {
	    width: 100vw;
	    position: relative;
	    left: 50%;
	    right: 50%;
	    margin-left: -50vw;
	    margin-right: -50vw;
	}

}

@media (max-width: 781px) {

	.admin-bar .nav-collapse.opened ul#menu-top-menu.menu.dropdown {
	    margin-top:46px;
	}

	.wp-block-column {
		flex-basis: 100%;
	}

	.wp-block-image img {
		margin-left: auto;
		margin-right: auto;
	}

	.home .wp-block-media-text.alignwide {
		grid-template-columns:15% auto !important;
	}

}

@media (max-width: 600px) {

	body.admin-bar {
	    margin-top: 46px !important;
	}

}