/*------------------------------------------ Defining variables */ :root { --padding: 20px; --half-padding: 10px; --doble-padding: 40px; --interface-height: 0px; } /*------------------------------------------ Switches */ .mob-only { display: block; } .tab-only { display: none; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: none; } .tab-off { display: block; } .lap-off { display: block; } .des-off { display: block; } .big-only { display: none; } .big-off { display: block; } .hover-only { display: none; } .hover-off { display: block; } .off { display: none; } .obliterate { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .admin-bar .admin-off { display: none; } /*------------------------------------------ Padding and margin */ .padding { padding: var(--padding); } .padding-v { padding-top: var(--padding); padding-bottom: var(--padding); } .padding-h { padding-left: var(--padding); padding-right: var(--padding); } .padding-no-top { padding: 0 var(--padding) var(--padding) var(--padding); } .padding-no-bottom { padding: var(--padding) var(--padding) 0 var(--padding); } .padding-no-left { padding: var(--padding) var(--padding) var(--padding) 0; } .padding-no-right { padding: var(--padding) 0 var(--padding) var(--padding); } .padding-top { padding-top: var(--padding); } .padding-bottom { padding-bottom: var(--padding); } .padding-left { padding-left: var(--padding); } .padding-right { padding-right: var(--padding); } .padding-grid { padding: var(--half-padding); } .padding-grid-v { padding-top: var(--half-padding); padding-bottom: var(--half-padding); } .padding-grid-h { padding-left: var(--half-padding); padding-right: var(--half-padding); } .padding-grid-no-top { padding: 0 var(--half-padding) var(--half-padding) var(--half-padding); } .padding-grid-no-bottom { padding: var(--half-padding) var(--half-padding) 0 var(--half-padding); } .padding-grid-no-left { padding: var(--half-padding) var(--half-padding) var(--half-padding) 0; } .padding-grid-no-right { padding: var(--half-padding) 0 var(--half-padding) var(--half-padding); } .padding-grid-top { padding-top: var(--half-padding); } .padding-grid-bottom { padding-bottom: var(--half-padding); } .padding-grid-left { padding-left: var(--half-padding); } .padding-grid-right { padding-right: var(--half-padding); } .padding-interface { padding: calc(var(--interface-height) + var(--padding)) var(--padding) var(--padding); } .padding-interface-v { padding-top: calc(var(--interface-height) + var(--padding)); padding-bottom: var(--padding); } .padding-interface-top { padding-top: calc(var(--interface-height) + var(--padding)); } .padding-interface-top-clean { padding-top: calc(var(--interface-height)); } .padding-interface-no-bottom { padding: calc(var(--interface-height) + var(--padding)) var(--padding) 0; } .margin-top { margin-top: var(--padding); } .margin-bottom { margin-bottom: var(--padding); } .margin-left { margin-left: var(--padding); } .margin-right { margin-right: var(--padding); } .margin-grid-top { margin-top: var(--half-padding); } .margin-grid-bottom { margin-bottom: var(--half-padding); } .margin-grid-left { margin-left: var(--half-padding); } .margin-grid-right { margin-right: var(--half-padding); } /*------------------------------------------ Grid Engine */ .mob-block { display: block; } .mob-flex { display: flex; } .mob-flex-wrap { flex-wrap: wrap; } .mob-flex-col { flex-direction: column; } .mob-flex-jc-start { justify-content: flex-start; } .mob-flex-jc-end { justify-content: flex-end; } .mob-flex-jc-space-between { justify-content: space-between; } .mob-flex-jc-center { justify-content: center; } .mob-flex-ai-start { align-items: flex-start; } .mob-flex-ai-end { align-items: flex-end; } .mob-flex-ai-center { align-items: center; } .mob-w1 { width: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-w2 { width: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-w3 { width: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-w4 { width: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-w5 { width: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-w6 { width: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-w7 { width: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-w8 { width: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-w9 { width: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-w10 { width: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-w11 { width: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-w12 { width: calc(((100vw - var(--doble-padding)) / 12)*12); } .mob-h1 { height: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-h2 { height: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-h3 { height: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-h4 { height: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-h5 { height: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-h6 { height: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-h7 { height: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-h8 { height: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-h9 { height: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-h10 { height: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-h11 { height: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-h12 { height: calc(((100vw - var(--doble-padding)) / 12)*12); } .mob-pl1 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-pl2 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-pl3 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-pl4 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-pl5 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-pl6 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-pl7 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-pl8 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-pl9 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-pl10 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-pl11 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-pl12 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .mob-pr1 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-pr2 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-pr3 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-pr4 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-pr5 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-pr6 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-pr7 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-pr8 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-pr9 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-pr10 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-pr11 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-pr12 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*12); } .mob-ml1 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-ml2 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-ml3 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-ml4 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-ml5 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-ml6 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-ml7 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-ml8 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-ml9 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-ml10 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-ml11 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-ml12 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .mob-mr1 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .mob-mr2 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .mob-mr3 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .mob-mr4 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .mob-mr5 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .mob-mr6 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .mob-mr7 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .mob-mr8 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .mob-mr9 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .mob-mr10 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .mob-mr11 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .mob-mr12 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*12); } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --padding: 30px; --half-padding: 15px; --doble-padding: 60px; --interface-height: 260px; --interface-reduced-height: 88px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: block; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: block; } .tab-off { display: none; } .lap-off { display: block; } .des-off { display: block; } /*------------------------------------------ Grid Engine */ .tab-block { display: block; } .tab-flex { display: flex; } .tab-flex-wrap { flex-wrap: wrap; } .tab-flex-col { flex-direction: column; } .tab-flex-jc-start { justify-content: flex-start; } .tab-flex-jc-end { justify-content: flex-end; } .tab-flex-jc-space-between { justify-content: space-between; } .tab-flex-jc-center { justify-content: center; } .tab-flex-ai-start { align-items: flex-start; } .tab-flex-ai-end { align-items: flex-end; } .tab-flex-ai-center { align-items: center; } .tab-w1 { width: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-w2 { width: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-w3 { width: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-w4 { width: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-w5 { width: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-w6 { width: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-w7 { width: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-w8 { width: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-w9 { width: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-w10 { width: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-w11 { width: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-w12 { width: calc(((100vw - var(--doble-padding)) / 12)*12); } .tab-h1 { height: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-h2 { height: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-h3 { height: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-h4 { height: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-h5 { height: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-h6 { height: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-h7 { height: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-h8 { height: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-h9 { height: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-h10 { height: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-h11 { height: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-h12 { height: calc(((100vw - var(--doble-padding)) / 12)*12); } .tab-pl1 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-pl2 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-pl3 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-pl4 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-pl5 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-pl6 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-pl7 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-pl8 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-pl9 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-pl10 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-pl11 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-pl12 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .tab-pr1 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-pr2 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-pr3 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-pr4 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-pr5 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-pr6 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-pr7 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-pr8 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-pr9 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-pr10 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-pr11 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-pr12 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*12); } .tab-ml1 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-ml2 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-ml3 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-ml4 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-ml5 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-ml6 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-ml7 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-ml8 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-ml9 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-ml10 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-ml11 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-ml12 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .tab-mr1 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .tab-mr2 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .tab-mr3 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .tab-mr4 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .tab-mr5 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .tab-mr6 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .tab-mr7 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .tab-mr8 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .tab-mr9 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .tab-mr10 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .tab-mr11 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .tab-mr12 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*12); } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --padding: 50px; --half-padding: 25px; --doble-padding: 100px; --interface-height: 280px; --interface-reduced-height: 92px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: none; } .lap-only { display: block; } .des-only { display: none; } .mob-off { display: block; } .tab-off { display: block; } .lap-off { display: none; } .des-off { display: block; } .big-only { display: block; } .big-off { display: none; } /*------------------------------------------ Grid Engine */ .lap-block { display: block; } .lap-flex { display: flex; } .lap-flex-wrap { flex-wrap: wrap; } .lap-flex-col { flex-direction: column; } .lap-flex-jc-start { justify-content: flex-start; } .lap-flex-jc-end { justify-content: flex-end; } .lap-flex-jc-space-between { justify-content: space-between; } .lap-flex-jc-center { justify-content: center; } .lap-flex-ai-start { align-items: flex-start; } .lap-flex-ai-end { align-items: flex-end; } .lap-flex-ai-center { align-items: center; } .lap-w1 { width: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-w2 { width: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-w3 { width: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-w4 { width: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-w5 { width: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-w6 { width: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-w7 { width: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-w8 { width: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-w9 { width: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-w10 { width: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-w11 { width: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-w12 { width: calc(((100vw - var(--doble-padding)) / 12)*12); } .lap-h1 { height: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-h2 { height: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-h3 { height: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-h4 { height: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-h5 { height: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-h6 { height: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-h7 { height: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-h8 { height: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-h9 { height: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-h10 { height: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-h11 { height: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-h12 { height: calc(((100vw - var(--doble-padding)) / 12)*12); } .lap-pl1 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-pl2 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-pl3 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-pl4 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-pl5 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-pl6 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-pl7 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-pl8 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-pl9 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-pl10 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-pl11 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-pl12 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .lap-pr1 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-pr2 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-pr3 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-pr4 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-pr5 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-pr6 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-pr7 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-pr8 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-pr9 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-pr10 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-pr11 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-pr12 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*12); } .lap-ml1 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-ml2 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-ml3 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-ml4 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-ml5 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-ml6 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-ml7 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-ml8 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-ml9 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-ml10 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-ml11 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-ml12 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .lap-mr1 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .lap-mr2 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .lap-mr3 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .lap-mr4 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .lap-mr5 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .lap-mr6 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .lap-mr7 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .lap-mr8 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .lap-mr9 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .lap-mr10 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .lap-mr11 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .lap-mr12 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*12); } } @media(min-width: 1400px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --padding: 60px; --half-padding: 30px; --doble-padding: 120px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: none; } .lap-only { display: none; } .des-only { display: block; } .mob-off { display: block; } .tab-off { display: block; } .lap-off { display: block; } .des-off { display: none; } /*------------------------------------------ Grid Engine */ .des-block { display: block; } .des-flex { display: flex; } .des-flex-wrap { flex-wrap: wrap; } .des-flex-col { flex-direction: column; } .des-flex-jc-start { justify-content: flex-start; } .des-flex-jc-end { justify-content: flex-end; } .des-flex-jc-space-between { justify-content: space-between; } .des-flex-jc-center { justify-content: center; } .des-flex-ai-start { align-items: flex-start; } .des-flex-ai-end { align-items: flex-end; } .des-flex-ai-center { align-items: center; } .des-w1 { width: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-w2 { width: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-w3 { width: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-w4 { width: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-w5 { width: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-w6 { width: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-w7 { width: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-w8 { width: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-w9 { width: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-w10 { width: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-w11 { width: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-w12 { width: calc(((100vw - var(--doble-padding)) / 12)*12); } .des-h1 { height: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-h2 { height: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-h3 { height: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-h4 { height: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-h5 { height: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-h6 { height: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-h7 { height: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-h8 { height: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-h9 { height: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-h10 { height: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-h11 { height: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-h12 { height: calc(((100vw - var(--doble-padding)) / 12)*12); } .des-pl1 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-pl2 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-pl3 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-pl4 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-pl5 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-pl6 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-pl7 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-pl8 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-pl9 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-pl10 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-pl11 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-pl12 { padding-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .des-pr1 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-pr2 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-pr3 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-pr4 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-pr5 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-pr6 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-pr7 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-pr8 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-pr9 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-pr10 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-pr11 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-pr12 { padding-right: calc(((100vw - var(--doble-padding)) / 12)*12); } .des-ml1 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-ml2 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-ml3 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-ml4 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-ml5 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-ml6 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-ml7 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-ml8 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-ml9 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-ml10 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-ml11 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-ml12 { margin-left: calc(((100vw - var(--doble-padding)) / 12)*12); } .des-mr1 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*1); } .des-mr2 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*2); } .des-mr3 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*3); } .des-mr4 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*4); } .des-mr5 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*5); } .des-mr6 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*6); } .des-mr7 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*7); } .des-mr8 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*8); } .des-mr9 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*9); } .des-mr10 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*10); } .des-mr11 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*11); } .des-mr12 { margin-right: calc(((100vw - var(--doble-padding)) / 12)*12); } } @media(min-width: 1500px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --padding: 80px; --half-padding: 40px; --doble-padding: 160px; } } @media(hover: hover) { /* -------------------------------------------- */ /*------------------------------------------ Switches */ .hover-only { display: block; } .hover-off { display: none; } }