/* General */
html, body { margin: 0; font-family: 'Noto Sans', Calibri, Arial, Helvetica, sans-serif; height: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', Arial, Helvetica, sans-serif; font-weight: 600; }
h1, h2, h3 { margin-bottom: 1rem; }
a, input, button, img { transition: all .3s ease; }
.wrapper.global { min-height: 100%; margin-bottom: -300px; }
footer, .footer-push { min-height: 300px; overflow: visible; height: auto; }
a { color: #336699; text-decoration: none; }
a:hover { color: #487AAF; text-decoration: underline; }

button:disabled, button[disabled] { background-color: rgb(108, 117, 125) !important; }
.btn-primary { background-color: #336699; }
.btn-primary:hover { background-color: #487AAF; }

/* Slider */
.slider { max-height: 100% !important; min-height: 300px !important; }
.slider .slide { height: 100%; }
.slider .slide .slide-content { height: 100%; }
.slider .slide-content > img { width: 100%; height: 100%; object-fit: cover; }

/* Header - Video */
.video-wrapper { position: relative; width: 100%; min-height: 100%; overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center; z-index: 1; }
.video-wrapper video { position: absolute; object-fit: cover; width: 100%; height: 100%; top: 0; left: 0; }

/* Images */
img { max-width: 100%; }
.grid-layout .image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* Header */
header, header * { transition: background-color .3s ease; }
header a { text-decoration: none !important; }
header img { transition: all .3s ease; }
header { position: absolute; width: 100%; color: #ddd; z-index: 10; }
header p { margin: 0; }
#header-global { background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0)); }
#header-global.sticky { background: #f9f9f9; }
.header-top { padding: 0.5em 0; font-size: 0.9325em; }
.flag-icon { height: 18px; width: auto; vertical-align: text-bottom; opacity: 0.65; }
a:hover .flag-icon { opacity: 1; }
a.social-button { font-size: 1em; width: 28px; color: #f6f6f6; }
a.social-button:hover i { color: #fff; }
a.social-facebook:hover { background-color: #4267B2; }
a.social-instagram:hover { background-color: #E1306C; }
header #navbar-brand-img { width: 275px; height: auto; }
header #header-nav .nav-link { color: #f6f6f6; }
header .btn { color: #f6f6f6; }
hr.header-sep { margin: 0; padding: 0; height: 1px; color: rgba(255,255,255,0.5); }
header.sticky { position: fixed; color: #414549; background: none; background-color: #f9f9f9 !important; }
header.sticky .header-top { background-color: #eff0f2; }
header.sticky a.social-button { color: #414549; }
header.sticky #header-nav .nav-link { color: #212529; }
header.sticky #navbar-brand-img { width: 225px; height: auto; content: url('/css/assets/visiontask-logo.png?width=225'); }

/* Nav */
#header-nav li.nav-item { margin: 0 0.25em; } 
#header-nav a.nav-link { border-bottom: 2px transparent solid; }
#header-nav a.nav-link:hover { border-bottom: 2px #fff solid; }
header.sticky #header-nav a.nav-link:hover { color: #336699; }
header.sticky #header-nav a.nav-link:hover { border-bottom: 2px #336699 solid; }

/* Sections */
section.content { padding-top: 4em; padding-bottom: 4em; }
section.dark { background-color: #336699; color: #f6f6f6; }
section.numeric { text-align: center; }
section.numeric .card { background-color: transparent; border: none; font-size: 1.625rem; font-weight: bold; }
section.numeric .card h4 { font-size: 1.5em; }

/* Parallax */
/* .parallax { background-size: cover; background-attachment: fixed; background-position: 0% 25%; } */

/* Grid */
div.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(150px, 1fr)); }
div.grid > div.project { }
div.grid > div.project > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
div.grid > div.project > div img { object-fit: cover; }

/* Card: Blog */
.card.blog img.card-top-img { filter: grayscale(70%); }
.card.blog .card-date { position: absolute; top: .75em; left: .75em; display: flex; background-color: #336699; padding: .75em 1em; text-align: center; color: #f6f6f6; flex-direction: column; font-size: 1.375em; }
.card.blog .card-date > span:first-child { font-size: 1.875em; line-height: 100%; }

/* Accordion */
.accordion { border: none; }
.accordion-item { background-color: transparent; }
.accordion-button { background-color: transparent !important; border: none; }
.accordion-item { border: none; border-bottom: 1px rgba(51,102,153,0.25) solid; }

/* Footer */
footer { background-color: #336699; color: #e6e6e6; }