:root {
  --bg-color: #fff;
  --white: #fff;
  --primary-color: #165788;
  --secondary-color: #90acc8;
  --tertiary-color: #c4e0f2;
  --primary-text-color: #000;
  --button-hover: #9bb2ce;
  --light-gray: #f9f9f9;
}

html { width: 100%; margin: 0 !important; }
body { margin: 0; padding: 0; width: 100%; font-weight: 400; font-style: normal; font-size: 16px; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { color: var(--primary-color); }
h1 { padding: 0; margin: 0 0 1.5rem 0; font-size: 2.5rem; font-weight: 400; }
h2 { padding: 0; margin: 0 0 1.5rem 0; font-size: 2rem; }
h3 { padding: 0; margin: 0 0 1.5rem 0; font-size: 1.5rem; }
p { padding: 0; margin: 0 0 1.5rem 0; }
* { box-sizing: border-box; font-family: "Red Hat Display", sans-serif; font-optical-sizing: auto; }
.inner-box { max-width: 1320px; margin: 0 auto; }
a { color: var(--primary-color); text-decoration: underline; }
.desktop-only { display: flex; }
.mobile-only { display: none; }
p { letter-spacing: 1px; margin: .5rem 0 1rem 0; }
#wpadminbar { display: none; }
.text-center { text-align: center; }

/* HEADER */
.simply-header-container { padding: 1.5rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.site-header { width: 100%; background-color: var(--white); }
.site-header-logo { height: 65px;}
.site-header-logo img { height: 65px; width: auto; }
.site-header-motto { display: flex; flex-direction: column; align-items: center; }
.site-header-motto p { margin: 8px 0 0 0; padding: 0; color: var(--primary-color); font-weight: 700; }
.hamburger-button { width: 55px; height: 45px; background-image: url('images/hamburger.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; background-color: transparent; border: none; display: none; }

/* NAVIGATION */
.site-navigation-container { width: 100%; background-color: var(--primary-color); top: auto; right: auto; z-index: auto; position: relative; height: auto; overflow-y: visible; padding: 0; }
.site-navigation-container-inner { padding: 0 3rem 0 0; }
#simply-navigation { display: flex; width: 100%; padding: 0; justify-content: center; overflow-y: hidden; }
#simply-navigation ul { display: flex; flex-direction: row; width: 100%; padding: 0; justify-content: center; align-items: center; margin: 0; padding: 0; }
#simply-navigation li { display: inline-block; padding: 0.5rem 1rem; width: auto; }
#simply-navigation li a { color: var(--white); font-size: 0.857rem; text-decoration: none; text-transform: uppercase; transition: .5s; padding: 0; display: inline-block; width: auto; }
#simply-navigation ul li.menu-item-has-children ul { display: none; }
#simply-navigation ul li.menu-item-has-children ul.menu-opened { display: flex; flex-direction: row; position: absolute; top: 37px; left: 0; width: 100%; background-color: var(--primary-color); flex-wrap: wrap; justify-content: flex-start; padding: 1.5rem 3rem; z-index: 2; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); }
#simply-navigation ul li.menu-item-has-children ul.menu-opened li { padding: 0.25rem 0; width: 25%; }
.search-button { width: 3rem; height: 100%; background-image: url('images/search.svg'); background-position: right center; background-repeat: no-repeat; background-size: 20px 20px; cursor: pointer; position: absolute; right: 0; top: 0; background-color: transparent; border: none; }
.search-box { position: absolute; top: 37px; right: 0px; z-index: 99; opacity: 0; transition: .5s; width: 300px; }
.search-box.search-opened { opacity: 1; transition: .5s; }
.search-field { padding: .5rem 3rem .5rem .5rem; width: 100%; position: relative; border: 1px solid #ccc; }
.search-field-submit { width: 36px; height: 34px; background-color: #ededed; background-image: url('images/search-gray.svg'); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; border: none; border-left: 1px solid #ccc; position: absolute; top: 1px; right: 1px; }

/* HERO */
.simply-hero-image { height: 450px; width: 100%; overflow: hidden; position: relative; display: flex; }
.simply-hero-image img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.simply-hero-title { position: absolute; top: 0; left: 0; height: 100%; width: 50%; max-width: 50%; padding: 48px; display: flex; align-items: center; z-index: 1; }
.simply-hero-title h1 { color: var(--white); margin: 0; padding: 0; }

/* MAIN */
.simply-main { padding: 3rem 3rem 6rem 3rem; width: 100%; margin: 0; }

/* TEXT CONTENT */
.simply-text-content { max-width: 768px; margin: 0 auto; }

/* FOOTER */
#simply-footer { padding: 3rem; background-color: var(--primary-color); }
.simply-footer-logo { display: flex; justify-content: center; margin: 0 0 .75rem 0; }
.simply-footer-logo img { width: 97px; height: auto; }
#simply-footer p { color: var(--white); font-size: .875rem; text-align: center; }
.footer-content { max-width: 768px; margin: 0 auto; }

/* BACK TO TOP */
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 1001; border: none; background-color: transparent; width: 75px; height: 75px; outline: none; background-image: url('images/back-to-top.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; }

/* BRANDS */
.simply-brands-container { width: 1320px; margin: 6rem auto 0 auto; }
.simply-brands { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 32px; width: 100%; margin: 0 -16px; }
.simply-brand { width: 100%; display: flex; }
.simply-brand span { display: block; text-align: center; }
.simply-brand a img { height: 50px; width: auto; margin: 0 auto 1rem auto; }
.simply-brand a { text-decoration: none; text-transform: uppercase; display: flex; flex-direction: column; justify-content: center; width: 100%; }

/* MU PLUGINS */
.simply-vimeo-videos { max-width: 768px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; margin: 3rem auto 0 auto; }
.simply-vimeo-video { background-color: #f9f9f9; box-shadow: 1px 3px 10px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 3px 10px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 3px 10px 2px rgba(0,0,0,0.2); }
.simply-vimeo-video-thumbnail { width: 100%; aspect-ratio: 16/9; overflow: hidden; display: flex; }
.simply-vimeo-video-thumbnail img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.simply-vimeo-video-text { padding: 1.5rem; }
.simply-vimeo-video-text h3 a { text-decoration: none; }
.simply-vimeo-video-text-link { font-size: 16px; color: #165788; text-decoration: none;}
.simply-video-text-content { width: 100%; margin: 0 0 1.5rem 0; }
.simply-vimeo-video-embed-content { max-width: 100%; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.simply-subcategories-container { width: 768px; margin: 3rem auto 0 auto; }
.simply-subcategories { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.simply-vimeo-video-embed { max-width: 768px; margin: 0 auto; }
.simply-vimeo-video-embed-content iframe { max-width: 100%; aspect-ratio: 16/9; overflow: hidden; }

.simply-warning-pop-up { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 10000; transition: .5s; }
.simply-warning-pop-up.not-accepted { display: flex; }
.simply-warning-pop-up-content { max-width: 768px; height: auto; padding: 3rem; background-color: var(--primary-color); border-radius: 10px; }
.simply-warning-pop-up-content h1, .simply-warning-pop-up-content h2, .simply-warning-pop-up-content h3, .simply-warning-pop-up-content h4, .simply-warning-pop-up-content h5, .simply-warning-pop-up-content h6 { color: var(--white); font-size: 2.5rem; }
.simply-warning-pop-up-content p { color: var(--white); font-size: 1.25rem; }
.wp-block-button__link { border-radius: 10px; background-color: #F46036; opacity: 1; transition: .5s; }
.wp-block-button__link:hover { opacity: .75; transition: .5s; }

/* PAGE & SINGLE */
.simply-single-info { padding: 1rem; margin: 2rem 0; border: 1px solid var(--tertiary-color); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; font-size: .75rem; }
.simply-single-info p { margin: 0; padding: 0; }
.simply-single-inner figure { max-width: 100%; overflow: hidden; margin: 0; padding: 0; }
.simply-single-inner img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* SITE CARDS */
.site-category { padding: 0 0 6rem 0; }
.site-cards-content { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; width: 1320px; margin: 3rem auto 6rem auto; }
.site-card { padding: 1rem; margin: 0; }
.site-card-inner, .site-card-news { background-color: var(--light-gray); padding: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); min-height: 200px; }
.site-card-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; display: flex; justify-content: center; margin: 0 0 1rem 0; padding: 1rem 0 0 0; }
.site-card-image picture { width: 100%; height: 100%; }
.site-card-image img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.site-card-text { min-height: 150px; }
.site-card h3 { font-size: 1.125rem; }
.site-card h3 a { color: var(--primary-color); text-decoration: none; font-size: 1rem; }

.simply-pagination { margin: 3rem 0 0 0; }
.simply-pagination .nav-links { display: flex; justify-content: center; }
.simply-pagination .page-numbers { padding: .25rem .75rem; border: 1px solid var(--secondary-color); margin: 0 .5rem; text-decoration: none; color: var(--secondary-color); background-color: var(--white); transition: .5s; }
.simply-pagination .page-numbers.current { border: 1px solid var(--primary-color); background-color: var(--primary-color); color: var(--white); }


/*
    MOBIL
*/
@media (max-width: 1320px) {
    .inner-box { max-width: 90%; }
    .site-cards-content { width: 90%; }
    .simply-main { padding: 3rem 0 6rem 0; width: 90%; margin: 0 auto; }
    .simply-brands-container { width: 90%; }
}

@media (max-width: 1200px) {
    .desktop-only { display: none; }
    .mobile-only { display: flex; }
    .site-header-logo { height: 40px;}
    .site-header-logo img { height: 40px; width: auto; }
    .site-navigation-container { position: fixed; top: 0px; left: 120%; z-index: 1000; transition: 1s; height: 100vh; padding: 0; }
    .site-navigation-container-inner { padding: 2rem 0 0 0; }
    .site-navigation-container.opened { left: 0px; transition: 1s; }
    #simply-navigation, #simply-navigation.inner-box, #simply-navigation .menu { width: 100%; max-width: 100%; }
    #simply-navigation ul { flex-direction: column; width: 100%; }
    #simply-navigation ul li { width: 100%; padding: 10px 0; }
    #simply-navigation ul li a { text-align: center; width: 100%; font-size: 1.25rem; display: block; }
    #simply-navigation ul li.menu-item-has-children ul.menu-opened { display: flex; flex-direction: column; position: relative; top: auto; left: auto; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; padding: 0; }
    #simply-navigation ul li.menu-item-has-children ul.menu-opened li { padding: 1rem 0 0 0; }
    .simply-brands, .simply-subcategories { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .simply-text-content { max-width: 90%; }
    .back-to-top { width: 60px; height: 60px; }
    #simply-footer { padding: 3rem 3rem calc(3rem + 60px) 3rem; background-color: var(--primary-color); }
    .simply-vimeo-videos { margin: 0; }
    .simply-brands { grid-template-columns: repeat(2, 1fr); }
    .simply-subcategories-container { width: 100%; }
    .site-cards-content { grid-template-columns: repeat(2, 1fr); }
    .simply-text-content { width: 100%; max-width: 100%; }
    .simply-vimeo-videos { max-width: 100%; padding: 0; }
}

@media (max-width: 768px) {
    .site-cards-content { grid-template-columns: repeat(1, 1fr); }
    .simply-brands, .simply-subcategories { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .simply-vimeo-videos { grid-template-columns: repeat(1, 1fr); }
    .simply-brands, .simply-subcategories { grid-template-columns: repeat(1, 1fr); }
}