@charset "UTF-8";
/*
Theme Name: Reload 21
Theme URI: http://www.reload.se
Author: Rohan Jaguste
Author URI: https://www.rohanjaguste.com
Description: Reload Design's theme.
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.202106
*/
html { border: none; outline: none; font-family: "futura-pt", Futura, sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; font-smooth: always; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; scroll-behavior: smooth; }

body { margin: 40px; color: #101010; background-color: #fffefd; font-family: "futura-pt", Futura, sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; opacity: 0; visibility: hidden; }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }

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

nav.top-menu { padding-bottom: 10px; border-bottom: 1px solid #bbbbbb; margin-bottom: 20px; }

nav.top-menu #main-menu { font-size: 1rem; float: right; }

nav.top-menu #main-menu ul, nav.top-menu #main-menu ol { margin: 0; padding: 0; list-style: none; }

nav.top-menu #main-menu ul li, nav.top-menu #main-menu ol li { display: inline-block; margin-left: 10px; }

nav.top-menu #main-menu ul li.current_page_item, nav.top-menu #main-menu ul li.current-menu-item, nav.top-menu #main-menu ol li.current_page_item, nav.top-menu #main-menu ol li.current-menu-item { font-weight: 600; }

nav.top-menu a { color: #101010; text-decoration: none; }

nav.top-menu a:hover { color: #78b0e0; }

nav.top-menu a#main-logo { background-image: url("assets/media/reload-logotype.svg"); background-repeat: no-repeat; height: 16px; width: 140px; display: inline-block; }

footer { font-size: 12px; line-height: 16px; text-transform: uppercase; text-align: center; color: #bbbbbb; margin-right: auto; margin-left: auto; margin-top: 20px; max-width: 1280px; min-width: 640px; }

footer a { color: #bbbbbb; text-decoration: none; }

footer a:hover { color: #78b0e0; }

footer a#footer-logo { background-image: url("assets/media/reload-logotype-grey.svg"); background-repeat: no-repeat; height: 10px; width: 88px; text-align: center; display: block; margin: auto; margin-top: 10px; }

a { text-decoration: none; -o-transition: .4s; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; }

a.grid-item-link { opacity: 1; }

a.grid-item-link:hover { opacity: 0.8; }

.content { margin-right: auto; margin-left: auto; max-width: 1280px; min-width: 640px; }

.section { margin-right: auto; margin-left: auto; padding-top: 40px; padding-bottom: 40px; min-width: 640px; max-width: 840px; }

.section a.category { font-weight: bold; color: #101010; }

.section h1 { font-size: 2rem; line-height: 2.4rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 20px; }

.section h1.big { font-size: 3.2rem; line-height: 4rem; font-weight: 300; color: #78b0e0; text-align: center; margin-bottom: 40px; }

.section h1.black { font-size: 3.2rem; line-height: 4rem; font-weight: 300; color: #101010; text-align: center; margin-bottom: 40px; }

.section h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 20px; }

.section p { color: #58595b; margin-bottom: 24px; }

.categories { margin-right: auto; margin-left: auto; padding-top: 40px; padding-bottom: 40px; min-width: 640px; max-width: 960px; }

.categories a.category { font-weight: bold; color: #101010; }

.categories h1 { font-size: 2rem; line-height: 2.4rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 20px; }

.categories h1.big { font-size: 3.2rem; line-height: 4rem; font-weight: 300; color: #78b0e0; text-align: center; margin-bottom: 40px; }

.categories h1.black { font-size: 3.2rem; line-height: 4rem; font-weight: 300; color: #101010; text-align: center; margin-bottom: 40px; }

.categories h2 { font-size: 1.6rem; font-weight: bold; margin-bottom: 20px; }

.categories p { color: #58595b; margin-bottom: 24px; }

.project { margin-right: auto; margin-left: auto; padding-top: 40px; padding-bottom: 40px; min-width: 640px; max-width: 840px; }

.project h1 { font-size: 2rem; line-height: 2.4rem; font-weight: 400; letter-spacing: -0.01em; margin: 0 90px; margin-bottom: 20px; }

.project h1.big { font-size: 3.2rem; line-height: 4rem; font-weight: 300; color: #78b0e0; text-align: center; margin-bottom: 40px; }

.project h2 { font-size: 1.6rem; font-weight: bold; margin: 0 90px; margin-bottom: 20px; }

.project h3 { font-size: 1.2rem; font-weight: bold; margin: 0 90px; margin-bottom: 20px; }

.project p { font-size: 1rem; line-height: 1.4rem; color: #101010; margin: 0 90px; margin-bottom: 24px; }

.grid-showcase { padding: 15px 0; padding-bottom: 0px; border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; }

.grid-clients { margin: 15px 0; padding: 40px; background-color: #f6f6f6; }

.grid-type-3 { display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 40vh); margin-bottom: 15px; }

.grid-type-4 { display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(1, 40vh); margin-bottom: 15px; }

.grid-type-5 { display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 30px); margin-bottom: 0px; }

.grid-unit { position: relative; text-align: center; width: 100%; height: 100%; overflow: hidden;}

.grid-unit a { -o-transition: .4s; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; opacity: 1; color: transparent; text-decoration: none; }

.grid-unit a:hover { color: #101010; text-decoration: none; opacity: 0.8; }

.grid-unit a:hover img { opacity: 0.3; }

.grid-unit img { height: 100%; width: 100%; object-fit: cover; }

.grid-unit span.grid-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: normal; text-transform: capitalize; line-height: 1.2rem; }

.grid-unit span.grid-label b { font-weight: bolder; }

.grid-logo { position: relative; text-align: center; width: 100%; height: 100%; overflow: hidden; }

.grid-logo img { height: 22px; object-fit: contain; align-self: center; opacity: 0.6; }

.project-des { margin: 0 80px; }

.project-des p { font-size: 1rem; line-height: 1.4rem; color: #101010; }

.quote-blue { font-size: 1.6rem; line-height: 2rem; font-weight: bold; color: #78b0e0; text-align: center; margin: 10px 20px; margin-top: 40px; }

.quote-author { font-size: 1rem; line-height: 1.2rem; color: #78b0e0; margin-bottom: 40px; text-align: right; }

.grid { width: 100%; margin: 20px auto; }

.grid-item { width: 44%; min-width: 280px; max-width: 260px; margin: 20px; overflow: hidden; background-color: #f6f6f6; border-bottom: 1px solid #bbbbbb; }

.grid-item:hover { border-bottom: 1px solid #78b0e0; }

.grid-item a { color: #101010; text-decoration: none; }

.grid-item a:hover { color: #78b0e0; }

.grid-item img { width: 100%; object-fit: cover; }

.grid-item h2 { font-size: 1rem; line-height: 1.4rem; padding: 20px; margin: 0; color: #101010; }

.grid-item p { font-size: 0.9rem; line-height: 1.2rem; padding: 10px 20px; padding-top: 0px; margin-bottom: 10px; }

.hidden { display: none; }

.right { float: right; }

.left { float: left; }

.wp-block-image { margin-top: 24px; }

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

figcaption { font-size: 0.9rem; line-height: 1.1rem; }

figcaption em { font-size: 0.9rem; line-height: 1.1rem; }

blockquote.wp-block-quote p { font-size: 1.6rem; line-height: 2rem; font-weight: 600; color: #78b0e0; text-align: center; margin: 10px 20px; margin-top: 40px; }

blockquote.wp-block-quote p:before { content: '“'; }

blockquote.wp-block-quote p:after { content: '”'; }

blockquote.wp-block-quote cite { font-size: 1rem; line-height: 1.2rem; color: #78b0e0; margin-bottom: 40px; text-align: right; display: block; }

blockquote.wp-block-quote cite:before { content: '—'; margin-right: 5px; }

blockquote.black p { color: #101010; font-weight: normal; }

blockquote.black p:before { content: none; }

blockquote.black p:after { content: none; }

.has-medium-font-size { line-height: 30px; }

.swiper-container { width: 100%; height: 100%; }

.swiper-container.hero { margin-bottom: 40px; }

.swiper-wrapper { height: 680px; }

.swiper-slide { background-position: center; background-size: cover; }

.swiper-slide img { object-fit: cover; }

.swiper-caption { position: absolute; left: 0px; top: 600px; z-index: 100; width: 100%; height: 80px; color: #101010; background-color: #fffefd; font-size: 0.9rem; line-height: 1.1rem; padding: 20px 0; }

.swiper-caption p { font-size: 0.9rem; line-height: 1.1rem; margin: 0; padding: 0; }

.swiper-hero-caption { position: absolute; left: 40px; top: 500px; z-index: 5; width: 230px; color: #101010; font-size: 3rem; line-height: 3rem; padding: 20px 0; }

.swiper-hero-caption p { font-size: 2rem; line-height: 2rem; margin: 0; padding: 0; }

.swiper-button-next, .swiper-button-prev { top: 46%; }

.swiper-button-white { color: #78b0e0; }

.swiper-pagination { position: relative; bottom: 0; left: 0; margin-top: 10px; }

.swiper-pagination-bullet-active { background-color: #78b0e0; }