/*
Theme Name: TIC Online Marketing
Text Domain: tic-om
Version: 1.0
Author: TIC Online Marketing
Author URI: https://ticonlinemarketing.nl/
*/
/*
==========================================
Variables
==========================================
*/
:root { --grid-unit: 1rem; --border-radius-base: 0.5rem; }

[data-bs-theme="light"] { --body-bg: #fefefe; }

[data-bs-theme="dark"] { --body-bg: #191919; }

body { background-color: var(--body-bg); }

/*
==========================================
Reset
==========================================
*/
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

header ul, footer ul { list-style: none; margin: 0; padding: 0; }

p:last-of-type { margin-bottom: 0; }

input:not([type="checkbox"]), textarea { -webkit-appearance: none; border-radius: 0; }

img { max-width: 100% !important; height: auto; }

iframe { max-width: 100%; }

/*
==========================================
General
==========================================
*/
/*
==========================================
Text Elements
==========================================
*/
body, li, p { font-family: "Open Sans", sans-serif; font-weight: 300 !important; }

/*
==========================================
Links & Buttons
==========================================
*/
a, button, input[type="submit"] { -webkit-transition: 0.2s; transition: 0.2s; }

p a { color: inherit; }

a { font-weight: 500; text-decoration: none; color: #ed7218; }
a:hover { text-decoration: underline; }

.button-primary, .button-secondary, .button-outline-primary { text-decoration: none; display: inline-block; padding: 0.5rem 1.5rem; border: none; border-radius: 4px; }
.button-primary:hover, .button-secondary:hover, .button-outline-primary:hover { text-decoration: none; -webkit-transform: scale(1.05); transform: scale(1.05); color: #fefefe; }

.button-primary { color: #fefefe; background-color: #ed7218; }

.button-secondary { color: #fefefe; background-color: #009dde; }

.button-text:hover { text-decoration: none; color: #191919; }
.button-text::after { content: "\f30b"; font-family: 'Font Awesome 5 Free'; padding-left: 0.5rem; }

.button-outline-primary { color: #ed7218; border: 2px solid #ed7218; background: none; }
.button-outline-primary:hover { background-color: #ed7218; }

.navbar { background-color: var(--bs-body-bg); }

/*
==========================================
Graphic Elements
==========================================
*/
.bg-white { background: #fefefe; }

.image-fit { -o-object-fit: cover; object-fit: cover; width: 100%; }

#scroll-progress { position: fixed; top: 0; width: 0%; height: 4px; background: #009dde; z-index: 999999; }

/*
==========================================
Forms
==========================================
*/
/*
==========================================
Header
==========================================
*/
header { background-size: cover; overflow: hidden; background-position: center; color: #fefefe; }
header ul li { display: inline-block; padding: 0 1rem; }
header #mega-menu-wrap-primary { background-color: var(--body-bg) !important; }

/*
==========================================
Footer
==========================================
*/
footer ul, footer ul { padding-left: 0; }

/*
==========================================
Dynamic content blocks
==========================================
*/
.blog-card { border: none; }
.blog-card .category-tag a:hover { color: #ed7218; }

/*
==========================================
Archive Pages
==========================================
*/
/*
==========================================
Pages
==========================================
*/
.single-post .sticky { position: -webkit-sticky; position: sticky; top: 8rem; }
.single-post .sticky .tic-toc-wrapper { padding: 1rem; }
.single-post .sticky .tic-toc-wrapper .table-of-contents ul { list-style: none; padding-left: 0; }
.single-post .sticky .tic-toc-wrapper .table-of-contents ul li { margin-bottom: 5px; }
.single-post .sticky .tic-toc-wrapper .table-of-contents ul li a { color: #009dde; font-weight: 400; font-size: .9rem; }
.single-post .sticky .share-buttons a { color: lightgray; width: 2rem; height: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 1rem; margin-bottom: 10px; }
.single-post .sticky .share-buttons a:hover { color: #fefefe; text-decoration: none; background: #ed7218; }

/*
==========================================
Flexslider
==========================================
*/
.flexslider { overflow: hidden; margin: 0; }
.flexslider .flex-control-nav { position: static; margin-top: 1rem; }
.flexslider .flex-direction-nav { line-height: 40px; }
.flexslider .flex-direction-nav a { width: 50px; height: 50px; padding: 10px; }
.flexslider .flex-direction-nav a::before { margin-top: -1rem; }

/*
==========================================
ACF oEmbed
==========================================
*/
.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
==========================================
Spacing
==========================================
*/
.pt-xs { padding-top: 2rem; }

.pt-sm { padding-top: 3rem; }

.pt-md { padding-top: 4rem; }

.pt-lg { padding-top: 5rem; }

.pt-xl { padding-top: 6rem; }

.pb-xs { padding-bottom: 2rem; }

.pb-sm { padding-bottom: 3rem; }

.pb-md { padding-bottom: 4rem; }

.pb-lg { padding-bottom: 5rem; }

.pb-xl { padding-bottom: 6rem; }

/*
==========================================
Media Queries
==========================================
*/
@media (min-width: 992px) { .pt-6 { padding-top: 5rem; }
  .pt-7 { padding-top: 7.5rem; }
  .pb-6 { padding-bottom: 5rem; }
  .pb-7 { padding-bottom: 7.5rem; } }
/* The switch - the box around the slider */
.form-switch { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.form-switch .form-check-input { height: 20px !important; width: 75px !important; }
.form-switch .form-check-input:hover { cursor: pointer; }