/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "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); */ /** * * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀▀ - VARS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ section { position: relative; } #sidenav { display: none !important; } .p20 { padding: 20px; } .site-content { padding-bottom: 0; } .credits p, .credits a { display: inline-block; } ul.topmenu-links-menu li a { padding: 10px 20px; font-weight: normal; color: #000; border-radius: 23px; } .topmenu * { box-sizing: initial; } #content .container_total { padding-top: 0; } .filter_gradient { background: rgb(20,126,49); mix-blend-mode: multiply; background: -moz-linear-gradient(left, rgba(20,126,49,1) 0%, rgba(157,191,18,1) 100%); background: -webkit-linear-gradient(left, rgba(20,126,49,1) 0%,rgba(157,191,18,1) 100%); background: linear-gradient(to right, rgba(20,126,49,1) 0%,rgba(157,191,18,1) 100%); } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ main { --black: #1e1e1e; --black-rgb: 30,30,30; --white: #ffffff; --white-rgb: 255,255,255; /* Custom Colors */ --yellow: #f7cc42; --yellow-rgb: 247,204,66; --red: #cd1818; --red-rgb: 205,23,25; } @font-face { font-family: 'Bahnschrift'; src: url('font/Bahnschrift.eot'); src: url('font/Bahnschrift.eot?#iefix') format('embedded-opentype'), url('font/Bahnschrift.woff2') format('woff2'), url('font/Bahnschrift.woff') format('woff'), url('font/Bahnschrift.ttf') format('truetype'), url('font/Bahnschrift.svg#Bahnschrift') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } ::-moz-selection { color: #ffffff; background: #575756; } ::selection { color: #ffffff; background: #575756; } main { /* Backup */ font-family: Georgia, Times, "Times New Roman", serif; /* Fonts */ --main-font: 'Montserrat', sans-serif; --title-font: 'Bahnschrift', serif; /* REM size */ font-size: 20px; --rem-max: 20; --rem: 20px; --rem-min: 14; --rem-min-px: 14px; } p a, li a { display: inline-block; font: inherit; text-decoration: underline; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1em; border: 2px solid #3e3e3e; background-color: #ccc; font-size: 130%; text-transform: uppercase; font-weight: 800; border-radius: .8rem; } .btn_gold { background-color: var(--gold); color: #fff; border-color: var(--gold); } .btn_red { background-color: var(--red); color: #fff; border-color: var(--red); } .btn_gold:hover, .btn_gold:focus { background-color: var(--white); color: var(--gold); } .btn_red:hover, .btn_red:focus { background-color: var(--white); color: var(--red); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ a.link_btn { display: inline-block; position: relative; font-family: var(--main-font); font: inherit; color: inherit; padding: .5em 1em; border: 2px solid #3e3e3e; background-color: #ccc; font-size: var(--rem); border-radius: 10rem; text-transform: uppercase; font-weight: 600; margin: .5rem; margin-top: 0; } .link_btn:hover, .link_btn:focus, .link_btn:active {} a.link_green { background-color: #147e31; color: #fff; border-color: #147e31; } a.link_light_green { background-color: #9dbf12; color: #fff; border-color: #9dbf12; } a.link_green:hover { color: #147e31; background-color: #fff; } a.link_light_green:hover { color: #9dbf12; background-color: #fff; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .color_yellow { color: var(--yellow); } .color_red { color: var(--red); } .color_white { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_black { background-color: #1e1e1e; opacity: .5; mix-blend-mode: multiply; } .s1_title img { height: 15rem; margin-bottom: 2rem; filter: drop-shadow(5px 5px 10px rgba(30,30,30,.5)); } .link_s1 { margin-top: 1rem; } .btn_custom { width: 20rem; margin: .4rem .8rem; display: inline-block; filter: drop-shadow(5px 5px 3px rgba(30,30,30,.2)); } .btn_custom img { height: auto; width: 100%; margin-bottom: 0; } .btn_custom:hover { transform: scale(.95); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .text p { margin: 1rem 0; } .bullet_points { text-align: center; padding: 2rem 1rem; border-right: 1px solid #1e1e1e; } .bullet_points:last-of-type { border: 0; } .bullet_points img { height: 3rem; margin-bottom: 1rem; } .bullet_points { border-color: #fff; } .percorso_gara .bullet_points img { filter: brightness(0) invert(1); } .percorso_gara .bullet_points p { color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .pr_after { padding-bottom: 5%; } #pr_race_3 li { margin: 1rem 0; padding-left: 2.5rem; font-weight: 500; position: relative; } #pr_race_3 li:after { content: ""; position: absolute; left: 0; top: calc(50% - 1rem); width: 2rem; height: 2rem; background: no-repeat center; background-size: contain; background-image: url(ico-list.svg); } #pr_race_3 .percorso_gara li:after { background-image: url(ico-list-red.svg); } .gallery_container { box-shadow: 0 0 10px rgba(30,30,30,.2); } .gallery_container .swiper-slide { height: 30rem; } .slider_nav { top: 50%; height: 2.5em; z-index: 1; transform: translateY(-50%); background-color: transparent !important; } .slider_nav img { height: 100%; width: auto; max-width: unset; object-fit: contain; } .slider_prev { left: .5em; } .slider_next { right: .5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_tour { padding: .7rem; margin: 1rem 0; } .box_tour .w100 { background-color: #fff; border-radius: 1.4rem; overflow: hidden; } .box_tour h3 { padding: 5%; } .box_tour:nth-of-type(1) h3 { background-color: #f49932; color: #fff; text-align: center; } .box_tour:nth-of-type(2) h3 { background-color: var(--red); color: #fff; text-align: center; } .box_tour:nth-of-type(1) img:nth-of-type(2) { display: none; } .box_tour:nth-of-type(2) img:nth-of-type(1) { display: none; } .box_tour .card_content { padding: 5%; } .icon { padding-left: 1.8rem; margin: .7rem 0; position: relative; } .icon:after { content: ""; position: absolute; left: 0; top: .1rem; width: 1.2rem; height: 1.2rem; background-position: center; background-size: contain; background-repeat: no-repeat; } .box_tour:nth-of-type(2) .icon:after { filter: brightness(0.7) saturate(1.5); } .icon-lung:after { background-image: url(icon/durata.svg); } .icon-class:after { background-image: url(icon/precorso.svg); } .icon-dur:after { background-image: url(icon/info.svg); } .icon-ingo:after { background-image: url(icon/classificazione.svg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .logo_sponsor { display: block; margin: 1rem 1.3rem; max-width: 8rem; text-align: center; } .logo_sponsor img { height: 6rem; width: 100%; max-width: 15rem; object-fit: contain; } .logo_sponsor p { font-size: .9rem; margin-top: .5rem; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ /* Section 2 */ /* Section 3 */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - 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 * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ input[type="..."], select, textarea {} input[type="..."]:focus, input[type="..."]:active, select:focus, select:active, textarea:focus, textarea:active {} /* Animazioni */ input:focus { /* animation-name / animation-duration / animation-delay / animation-iteration-count */ -webkit-animation: formanim 0.25s forwards; animation: formanim 0.25s forwards; } @-webkit-keyframes formanim { 0% {} 100% {} } @keyframes formanim { 0% {} 100% {} } input[type=checkbox]:not(.switch), input[type=radio]:not(.switch), input[type="checkbox"] { border: 1px solid var(--black); width: 1.5em; height: 1.5em; } input[type=checkbox]:checked { background: url(../images/svg/checked.svg) no-repeat center; background-size: 1.25em; } input[type="..."].wpforms-error {} input[type="..."].wpforms-error:hover {} input[type="..."].wpforms-valid {} input[type="..."][disabled] {} select {} textarea {} input[type="submit"] {} input[type="submit"]:hover {} input[type="submit"]:focus, input[type="submit"]:active {} /* input[type=checkbox]:not(.switch):after { display: none; } */ /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - 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; } .pr_after { padding: 0; padding-right: 5%; } } /** * * 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){}