/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ .ratio-1-1, .squared { padding-bottom: 100%; } => 1:1 -> padding-bottom: calc(100% * 1 / 1); .ratio-16-9 { padding-bottom: 56.25%; } => 16:9 -> padding-bottom: calc(100% * 9 / 16); .ratio-4-3 { padding-bottom: 75%; } => 4:3 -> padding-bottom: calc(100% * 3 / 4); .ratio-3-2 { padding-bottom: calc(100% * 3 / 4); } => 3:2 -> padding-bottom: calc(100% * 2 / 3); .ratio-8-5 { padding-bottom: 62.5%; } => 8:5 -> padding-bottom: calc(100% * 8 / 5); */ main { --black: #1e1e1e; --black-rgb: 30,30,30; --white: #ffffff; --white-rgb: 255,255,255; /* Custom Colors */ --green: #147e31; --green-rgb: 20,126,49; --green_light: #9dbf15; --green_light-rgb: 157,191,21; --main-font: 'Josefin', sans-serif; --title-font: 'Playfair Display', serif; /* REM size */ font-size: 20px; --rem-max: 20; --rem: 20px; --rem-min: 14; --rem-min-px: 14px; } ul.topmenu-links-menu li a { padding: 10px 20px; font-weight: normal; color: #000; border-radius: 23px; } .topmenu * { box-sizing: initial; } ul.topmenu-links-menu li a { font-size: .8rem; } p, .p { --font-size: var( --rem ); --p-color: var( --black ); --p-family: var( --main-font ); --p-line: 1.4; --p-weight: normal; --p-style: normal; } h1, .h1 { --h1-max: 90; --h1-size: 90px; --h1-min: 40; --h1-min-px: 40px; --h1-color: var( --black ); --h1-family: var( --title-font ); --h1-line-height: 1.1; --h1-weight: 600; --h1-spacing: initial; --h1-style: normal; } h2, .h2 { --h2-max: 65; --h2-size: 65px; --h2-min: 35; --h2-min-px: 35px; --h2-color: var( --black ); --h2-family: var( --title-font ); --h2-line-height: 1.1; --h2-weight: 600; --h2-spacing: initial; --h2-style: normal; } h3, .h3 { --h3-max: 40; --h3-size: 40px; --h3-min: 30; --h3-min-px: 30px; --h3-color: var( --black ); --h3-family: var( --title-font ); --h3-line-height: 1; --h3-weight: normal; --h3-spacing: initial; --h3-style: normal; } h4, .h4 { --h4-max: 40; --h4-size: 40px; --h4-min: 30; --h4-min-px: 30px; --h4-color: var( --black ); --h4-family: var( --title-font ); --h4-line-height: 1; --h4-weight: normal; --h4-spacing: initial; --h4-style: normal; } h5, .h5 { --h5-max: 30; --h5-size: 30px; --h5-min: 25; --h5-min-px: 25px; --h5-color: var( --black ); --h5-family: var( --title-font ); --h5-line-height: 1; --h5-weight: normal; --h5-spacing: initial; --h5-style: normal; } h6, .h6 { --h6-max: 25; --h6-size: 25px; --h6-min: 20; --h6-min-px: 20px; --h6-color: var( --black ); --h6-family: var( --title-font ); --h6-line-height: 1; --h6-weight: normal; --h6-spacing: initial; --h6-style: normal; } a:hover, a:focus, a:active { --link-hover-color: #191970; } a:visited { --link-visited-color: #800080; } /* Highlights links on iPhones/iPads. Basically works like the :hover selector for mobile devices. */ @supports (-webkit-tap-highlight-color: initial;) { a:link, a:visited:link { --tap_highlight: rgba(30,30,30,.25); } } /* a:-webkit-any-link { color: inherit; } */ /*∞∞ Fluid Typography + Max font-size ∞∞*/ @media screen and (max-width: 1920px) { html { --rem-diff: calc( var(--rem-max) - var(--rem-min) ); --rem: calc( var(--rem-min-px) + var(--rem-diff) * ((100vw - 320px) / 1600)); } h1, .h1 { --h1-diff: calc( var(--h1-max) - var(--h1-min) ); --h1-size: calc( var(--h1-min-px) + var(--h1-diff) * ((100vw - 320px) / 1600)); } h2, .h2 { --h2-diff: calc( var(--h2-max) - var(--h2-min) ); --h2-size: calc( var(--h2-min-px) + var(--h2-diff) * ((100vw - 320px) / 1600)); } h3, .h3 { --h3-diff: calc( var(--h3-max) - var(--h3-min) ); --h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); } h3, .h3 { --h3-diff: calc( var(--h3-max) - var(--h3-min) ); --h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); } h4, .h4 { --h4-diff: calc( var(--h4-max) - var(--h4-min) ); --h4-size: calc( var(--h4-min-px) + var(--h4-diff) * ((100vw - 320px) / 1600)); } h5, .h5 { --h5-diff: calc( var(--h5-max) - var(--h5-min) ); --h5-size: calc( var(--h5-min-px) + var(--h5-diff) * ((100vw - 320px) / 1600)); } } /** * * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀▀ - VARS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ section { position: relative; } #sidenav { display: none !important; } .p20 { padding: 20px; } .site-content { padding-bottom: 0; } .credits p, .credits a { display: inline-block; } .site-content { overflow: visible; } /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE SWITCHER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .4em 1.8em; border: 2px solid var(--green); border-radius: 10rem; background-color: var(--green); color: var(--white); font-size: var(--rem); font-weight: 500; margin-bottom: .9rem; } .btn:hover { background-color: var(--white); color: var(--green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ a.link_btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .4em 1.8em; border: 2px solid var(--green); border-radius: 10rem; background-color: var(--green); color: var(--white); font-size: var(--rem); font-weight: 500; } a.link_btn:hover { background-color: var(--white); color: var(--green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARDS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .foot_block h4 { font-family: var(--main-font); font-size: 2.4rem !important; font-weight: 600; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #content .container_total { padding-top: 0; } .s1_title { text-align: center; } .s1_title h1 { color: #fff; text-shadow: 0 0 10px rgba(30,30,30,.3); } .s1_title p { font-size: 1.1rem; margin-top: 1.5rem; color: #fff; } .filter_green { background-color: var(--green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s2 { margin-top: -8%; } .t_center { text-align: center; } .shadow { box-shadow: 0 0 10px rgba(30,30,30,.2); } .text h2 { margin-bottom: 1.5rem; } .text h3 { margin-bottom: 1rem; } .text p { margin: .6rem 0; } .acf-map { margin: 0; height: 35rem; } .map_container { width: 100%; height: auto; background-color: var(--white); overflow: hidden; border-radius: 1rem; box-shadow: 0 0 10px rgba(30,30,30,.2); } .info_container { height: 100%; } .card_info_marker { padding: 5%; position: absolute; top: 0; left: 0; width: 100%; display: none; } .info_point img { height: 2.5rem; margin-bottom: 1rem; } .info_point h4 { font-size: .9rem; line-height: 1.2; margin-bottom: .5rem; font-family: var(--amin-font); } .info_point p { color: #999; font-size: .8rem; line-height: 1.2; margin: .3rem 0; } .info_point p a:hover { color: var(--light_green); opacity: .6; } .swiper-esp-cat.swiper { margin-top: 2rem; } .button_esp { width: 8rem; height: 8rem; background-color: var(--green_light); border-radius: 50%; padding: 0.5rem; text-align: center; } .button_esp:hover { background-color: rgba(var(--green-rgb),.5); } .button_esp p { color: #fff; margin-top: .8rem; } .button_esp img { height: 2rem; } .button_esp.active { background-color: var(--green); } .info_container { width: 0; overflow: hidden; transition: .3s ease-in-out; } .acf-map { width: 100%; transition: .3s ease-in-out; } .map_container.open .info_container { width: 100%; min-height: 35rem; } .map_container.open .acf-map { width: 100%; } .map_container.open .card_info_marker { position: relative; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .tit_esp:after { content: ""; width: 3rem; height: 1px; background-color: #6d6d6d; position: absolute; top: 60%; left: 0; transform: translateX(-120%); } .tit_esp:before { content: ""; width: 3rem; height: 1px; background-color: #6d6d6d; position: absolute; top: 60%; right: 0; transform: translateX(120%); } .tit_esp { display: inline-block; } .card_gen img { height: 12rem; } .card_gen .card_content { padding: 1rem 0; } .card_gen .card_content h2 { font-family: var(--main-font); font-size: 1.2rem; line-height: 1.1; margin-bottom: 1rem; } .card_gen .card_content p { font-size: 18px; margin-bottom: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_wrapper { padding: 0 3rem; } .slider_nav { width: 2.4em; z-index: 1; background-color: transparent !important; } .slider_prev { left: 0; } .slider_next { right: 0; } .slider_nav.swiper-button-disabled { display: none; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [page-52909 (landing-accessibilità)] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Search & Filter */ /* Terms Loop */ /* Posts Loop */ /* Custom pagination */ /* Load More */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie { text-align: center; } .back_wrapper { margin-top: 2.5%; } .go_back { display: inline-block; padding: .75em 1.25em .75em 4.5em; border: 1px solid #1e1e1e; border-radius: .5em; background: url(../images/svg/back.svg) no-repeat 1.25em center; background-size: 2em; font-size: 1.25em; font-weight: bolder; color: #1e1e1e; letter-spacing: .1em; text-transform: uppercase; } .go_back:hover, .go_back:active, .go_back:focus { background-color: #888; color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elemtni specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 320px) / (1920 - 320) ) ) * => CALC 1920px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 1600 ) ) * => CALC 1280px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 960 ) ) * => CALC 1024px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 704 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 320 * * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (max-width: 1921px) { .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .hamburger_btn { font-size: calc( var(--hamburger-px) + ( var(--hamburger-max) - var(--hamburger-min) ) * ( (100vw - 320px) / 1600 ) ); } .scroll { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 320px) / 1600 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 320px) / 1600 ) ); } } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec [...] */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template ... */ /* Template ... */ /* Template ... */ /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 480 -> 767 * * Stylesheet: 481px and Up Stylesheet * This stylesheet is loaded for larger devices. * It's set to 481px because at 480px it would load on a landscaped iPhone. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 481px) {} /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 -> 1280 * * Stylesheet: Tablet & Small Desktop Stylesheet * Here's where you can start getting into the good stuff. * This size will work on iPads, other tablets, and desktops. * So you can start working with more styles, background images, and other resources. * You'll also notice the grid starts to come into play. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*__ FOOTER __*/ .credits br { display: none; } .credits .resp_sep { display: inline-block; } /* MAPPA */ .map_container { height: 35rem; } /* Animation */ .info_container { width: 0; overflow: hidden; transition: .3s ease-in-out; } .acf-map { width: 100%; transition: .3s ease-in-out; } .map_container.open .info_container { width: 40%; min-height: unset; } .map_container.open .acf-map { width: 60%; } .map_container.open .card_info_marker { position: absolute; } } /** * * Stylesheet: Desktop Stylsheet * This is the desktop size. * It's larger than an iPad so it will only be seen on the Desktop. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1025px) { /*__ HEADER __*/ /* Overlay */ .hamburger_btn { font-size: 25px; } .hamburger_btn:hover { } .hamburger_btn.tapped:hover { } /*__ FOOTER __*/ .credits a:hover, .credits a:active, .credits a:focus { opacity: 1; color: var(--color); } #credits_studio:hover { color: #e74e0f; } /* Back Top */ .back_top { opacity: 1; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 -> 1366 * * Stylesheet: Super Large Monitor Stylesheet * You can add some advanced styles here if you like. * This kicks in on larger screens. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) {} /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1440 -> 1919 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) {} /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1920 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {} /** * * █▀▀▄ █▀▀ ▀▀█▀▀ ▀ █▄ █ ▄▀▀▄ * █▐█▀ █▀▀ █ █ █ ▀█ █▀▀█ * ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀ ▀ - RETINA (2x RESOLUTION DEVICES) * * This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. * You can also create a media query for retina AND a certain size if you want. * Go Nuts. * __________________________________________________________________________________________________________________________________________________________________________ */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /** * * █▀▀▄ █▀▀ ▐▌ ▐▌ ▀ ▄▀▀ █▀▀ ▄▀▀ * █ █ █▀▀ ▀▄▀ █ █ █▀▀ ▀▄ * ▀▀▀ ▀▀▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - SPECIFIC DEVICES * __________________________________________________________________________________________________________________________________________________________________________ */ /* If is Device */ @media screen and (max-device-width: 1280px){} @media screen and (max-device-width: 768px){} @media screen and (max-device-width: 480px){}