@charset "utf-8";
/* CSS Document */

/*Venus CSS Library Documentation
Overview
Venus CSS is a lightweight, utility-first CSS library that provides a comprehensive set of classes for building modern web interfaces. It focuses on providing flexible, reusable CSS utilities without enforcing specific design patterns or components.

Installation
Direct Include <link rel="stylesheet" href="script/vs_main.css">

Core Concepts
Naming Convention
Venus CSS follows a simple, intuitive naming pattern:

Property + Value: w50p means width: 50%
Numbers without 'p' refer to pixels: w50 means width: 50px
'p' suffix indicates percentage values
Class names are concise but readable

Utility Classes
Display & Positioning
Flex Containers

.dfr - Flex row container
.dfc - Flex column container
.dfr_ct - Centered flex row
.dfc_ct - Centered flex column
.dfr_bar - Scrollable flex row
.dfr_catalog - Flex wrap container

Grid

.dg - Grid container
.dg_hc - Centered grid
.gr2 - 2 column grid
.gr3 - 3 column grid
.gr4 - 4 column grid

Position

.psa - Position absolute
.psr - Position relative
.psx - Position fixed

Dimensions
Width Classes
Fixed Pixel Widths:

.w5 - 5px
.w35 - 35px
.w45 - 45px
.w50 - 50px
...up to .w1024

Percentage Widths:

.w10p - 10%
.w25p - 25%
.w33p - 33.33%
.w50p - 50%
.w75p - 75%
.w100p - 100%

Height Classes
Fixed Pixel Heights:

.h5 - 5px
.h25 - 25px
.h50 - 50px
...up to .h500

Percentage Heights:

.h25p - 25%
.h50p - 50%
.h75p - 75%
.h100p - 100%

Spacing
Margins

.mg5 - margin-top: 5px
.mg10 - margin-top: 10px
.mg15 - margin-top: 15px
...and so on

Paddings

.p5 - padding: 5px
.p10 - padding: 10px
.p15 - padding: 15px
...and so on

Typography
Font Sizes

.t7 - 7px
.t10 - 10px
.t12 - 12px
.t14 - 14px
.t16 - 16px
...up to .t75

Text Alignment

.ctr - Text align center
.rgt - Text align right
.lft - Text align left

Text Styles

.bol - Bold
.ita - Italic
.unl - Underline

Colors
Background Colors
Classic:

.bgFF - White
.bg00 - Black
.bg25 - #252525
...and so on

Transparent:

.bg0025 - rgba(0,0,0,0.25)
.bgFF25 - rgba(255,255,255,0.25)
...and so on

Text Colors

.cFF - White
.c00 - Black
.c25 - #252525
...and so on

Animations
Fade Animations

.af - Fade in
.af_bvt - Fade in up
.af_tvb - Fade in down
.af_lvr - Fade in right
.af_rvl - Fade in left

Other Animations

.ab_nor - Normal blink
.ab_lig - Light blink
.ar - Rotate
.ap - Pulse
.as - Shake

Responsive Design
The library includes a mobile-first responsive design system with breakpoints at:

700px (main breakpoint)
Additional height-based breakpoints at 250px, 400px, and 500px

Mobile Adjustments
Many classes have responsive variants that activate below 700px.

Custom Classes/Modifications: 
You can do CSS additions, grid layouts, flex components or unique element with id styles, and modifications/override these original classes in the "vs_support.css" file.

*/



/* Exclusive Values */
:root {

    --xff1: Muli; /* Default */
    --xff2: Verdana; /* Default */
  
    --xbg1: #1A8EFF;
    --xbg2: greenyellow;
    --xbg3: rgba(200,255,200,0.85);
    --xbg4: #8e0000;

    --xbxs1:-5px -5px 20px #ff7ca6 inset;;
    --xbxs2:50px 70px 100px #252525 inset;

    --xc1: #9E1C0D;
    --xc2: #037703;
    --xc3: #FFCC00;

    --xbo1:red;
    --xbo2:blue;
  
    --xmg1:17px;
    --xmg2:27px;

    --xad1:0.2;
    --xad2:0.8;

    --xw1:25px;
    --xw2:47px;

    --xh1:25px;
    --xh2:35px;

    --im_fx_p1:50% 50%;
    --im_fx_p2:50% 0px;

    }
/* Closing Exclusive Values */

/* Special Classes */
span[id^=not_signed_]:before { content: 'Inicie con su cuenta Google'; padding-right:50px; padding-left:2px; font-size:14px; font-weight:bold; color:#606060; }
/* Closing Special Classes */

/* General */
body { width: 100%; margin: 0; padding: 0; border: 0; background-color: #101010; line-height: 1; font-family:var(--xff1); }
div {-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

/* Scrollbars */
::-webkit-scrollbar { width:5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb { background: #252525; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #000000; }

.light_track::-webkit-scrollbar-track { background-color:transparent; }

/* Atributes */
.bol { font-weight:bold; }
.nor { font-weight:normal; }
.ita { font-style: italic; }
.unl { text-decoration: underline; }

.sctr { align-self:center; }
.ctr { text-align:center; }
.ctrl { text-align-last:center; }
.rgt { text-align:right; }
.lft { text-align:left; }

.trn { opacity:0; }
.db { display:block !important; }
.dn { display:none; }
.dbf { display:block; }

/* Background Colors */
/* Background Classics */
.bgFF { background-color:#FFFFFF; }
.bgEE { background-color:#EEEEEE; }
.bgDE { background-color:#DEDEDE; }
.bgDD { background-color:#DDDDDD; }
.bg00 { background-color:#000000; }
.bg10 { background-color:#101010; }
.bg15 { background-color:#151515; }
.bg25 { background-color:#252525; }
.bg35 { background-color:#353535; }
.bg55 { background-color:#555555; }
.bg95 { background-color:#959595; }
/* Background Transparent */
.bg0025 { background-color:rgba(0,0,0,0.25); }
.bg0040 { background-color:rgba(0,0,0,0.40); }
.bg0050 { background-color:rgba(0,0,0,0.50); }
.bg0060 { background-color:rgba(0,0,0,0.60); }
.bg0075 { background-color:rgba(0,0,0,0.75); }
.bg0085 { background-color:rgba(0,0,0,0.85); }
.bg0090 { background-color:rgba(0,0,0,0.90); }
.bg0095 { background-color:rgba(0,0,0,0.95); }
.bgFF25 { background-color:rgba(255,255,255,0.25); }
.bgFF40 { background-color:rgba(255,255,255,0.40); }
.bgFF50 { background-color:rgba(255,255,255,0.50); }
.bgFF60 { background-color:rgba(255,255,255,0.60); }
.bgFF75 { background-color:rgba(255,255,255,0.75); }
.bgFF85 { background-color:rgba(255,255,255,0.85); }
.bgFF90 { background-color:rgba(255,255,255,0.90); }
.bgFF95 { background-color:rgba(255,255,255,0.95); }
/* Background Extra */
.bgws { background-color:whitesmoke; }
.bglor { background-color:#FFCC00; }
.bgred { background-color:red; }
.bgver { background-color:#2DC342; }
/* Background Exclusive */
.xbg1 { background-color:var(--xbg1); }
.xbg2 { background-color:var(--xbg2); }
.xbg3 { background-color:var(--xbg3); }
.xbg4 { background-color:var(--xbg4); }
/* Closing Background Colors */

/* Box Shadow Classics */
.bxs45012i { box-shadow:0px -1px 2px #454545 inset; }
.bxs45024 { box-shadow:0px 2px 4px #454545; }
.bxs45048 { box-shadow:0px 4px 8px #454545; }
.bxs450815 { box-shadow:0px 8px 15px #454545; }
/* Box Shadows */
.xbxs1 { box-shadow:var(--xbxs1); }
.xbxs2 { box-shadow:var(--xbxs2); }
/* Closing Box Shadows */

/* Colors */
/* Color Classics */
.cFF { color:#FFFFFF; }
.cEE { color:#EEEEEE; }
.cDD { color:#DDDDDD; }
.cCC { color:#CCCCCC; }

.c00 { color:#000000; }
.c15 { color:#151515; }
.c25 { color:#252525; }
.c35 { color:#353535; }
.c60 { color:#606060; }
.c75 { color:#757575; }
.c90 { color:#909090; }
/* Colors Exclusive */
.xc1 { color:var(--xc1); }
.xc2 { color:var(--xc2); }
.xc3 { color:var(--xc3); }
/* Closing Colors */

/* Text Shadows */
.ts00 { text-shadow:0px 5px 10px #000000; }
.tsFF { text-shadow:0px 5px 10px #FFFFFF; }
/* Closing Text Shadows */

/* Borders */
/* Border Colors */
/* Border Colors Classics */
.bcFF { border-color:#FFFFFF; border-style:solid; }
.bcDD { border-color:#DDDDDD; border-style:solid; }
.bcCC { border-color:#CCCCCC; border-style:solid; }
.bc75 { border-color:#757575; border-style:solid; }
.bc95 { border-color:#959595; border-style:solid; }

.bc00 { border-color:#000000; border-style:solid; }
.bc15 { border-color:#151515; border-style:solid; }
.bc25 { border-color:#252525; border-style:solid; }
.bc35 { border-color:#353535; border-style:solid; }
.bc45 { border-color:#454545; border-style:solid; }
.bc60 { border-color:#606060; border-style:solid; }
/* Border Colors Exclusive */
.xbc1 { color:var(--xbo1); border-style:solid; }
.xbc2 { color:var(--xbo2); border-style:solid; }
/* Closing Border Colors */

/* Border Sides */
.bsset { border-width: 1px; }
.bstop { border-width: 1px 0px 0px 0px; }
.bsrig { border-width: 0px 1px 0px 0px; }
.bsbot { border-width: 0px 0px 1px 0px; }
.bslef { border-width: 0px 0px 1px 0px; }
.bssid { border-width: 0px 1px 0px 1px; }
.bstab { border-width: 1px 0px 1px 0px; }
/* Flexible Sides */
.bstoprig { border-width: 1px 0px 0px 0px; }
/* Closing Border Sides */

/* Border Radius */
.br2 { border-radius:2px; }
.br5 { border-radius:5px; }
.br7 { border-radius:7px; }
.br10 { border-radius:10px; }
.br15 { border-radius:15px; }
.br50 { border-radius:50%; }

.brl7 { border-radius: 0px 7px 7px 0px; }
.brl10 { border-radius: 0px 10px 10px 0px; }
.brl15 { border-radius: 0px 15px 15px 0px; }

.brr7 { border-radius: 7px 0px 0px 7px; }
.brr10 { border-radius: 10px 0px 0px 10px; }
.brr15 { border-radius: 15px 0px 0px 15px; }

.brt7 { border-radius: 7px 7px 0px 0px; }
.brt10 { border-radius: 10px 10px 0px 0px; }
.brt15 { border-radius: 15px 15px 0px 0px; }

.brb7 { border-radius: 0px 0px 7px 7px; }
.brb10 { border-radius: 0px 0px 10px 10px; }
.brb15 { border-radius: 0px 0px 15px 15px; }
/* Closing Border Radius */
/* Closing Borders */

/* Coords */
.cxl0 { left:0px; }
.cxl2 { left:2px; }
.cxl5 { left:5px; }
.cxl7 { left:7px; }
.cxl10 { left:10px; }
.cxl15 { left:15px; }
.cxl20 { left:20px; }
.cxl25 { left:25px; }
.cxl2p { left:2%; }
.cxl5p { left:5%; }
.cxl252p { left:25%; }
.cxl255p { left:25%; }
.cxl305p { left:30%; }

.cxr0 { right:0px; }
.cxr2 { right:2px; }
.cxr5 { right:5px; }
.cxr7 { right:7px; }
.cxr10 { right:10px; }
.cxr15 { right:15px; }
.cxr20 { right:20px; }
.cxr25 { right:25px; }
.cxr2p { right:2%; }
.cxr5p { right:5%; }

.cyt0 { top:0px; }
.cyt2 { top:2px; }
.cyt5 { top:5px; }
.cyt7 { top:7px; }
.cyt10 { top:10px; }
.cyt15 { top:15px; }
.cyt20 { top:20px; }
.cyt25 { top:25px; }
.cyt2p { top:2%; }
.cyt5p { top:5%; }
/* Flexible Y-Top */
.cyt10015 { top:100px; }
.cyt10020 { top:100px; }
.cyt10025 { top:100px; }

.cyb0 { bottom:0px; }
.cyb2 { bottom:2px; }
.cyb5 { bottom:5px; }
.cyb7 { bottom:7px; }
.cyb10 { bottom:10px; }
.cyb15 { bottom:15px; }
.cyb20 { bottom:20px; }
.cyb25 { bottom:25px; }
.cyb2p { bottom:2%; }
.cyb5p { bottom:5%; }
/* Closing Coords */

/* Margins */
.mgs2 { margin:2px; }
.mgs5 { margin:5px; }
.mgs10 { margin:10px; }
.mgs15 { margin:15px; }
.mgs20 { margin:20px; }
.mgs25 { margin:25px; }
/* Flexible Margins */
.mgs2010 { margin:20px; }

.mg2 { margin-top:2px; }
.mg5 { margin-top:5px; }
.mg10 { margin-top:10px; }
.mg15 { margin-top:15px; }
.mg20 { margin-top:20px; }
.mg25 { margin-top:25px; }
.mg35 { margin-top:35px; }
.mg45 { margin-top:45px; }
.mg60 { margin-top:60px; }
.mg225 { margin-top:225px; }
/* Flexible Margins */
.mg0005 { margin-top:0px; }
.mg0010 { margin-top:0px; }
.mg0015 { margin-top:0px; }
.mg2000 { margin-top:20px; }
.mg2500 { margin-top:25px; }
.mg2505 { margin-top:25px; }
.mg2515 { margin-top:25px; }
.mg3515 { margin-top:35px; }
.mg4525 { margin-top:45px; }
/* Margins Exclusive */
.xmg1 { margin-top:var(--xmg1); }
.xmg2 { margin-top:var(--xmg2); }
/* Closing Margins */

/* Margins left */
.ml2 { margin-left:2px; }
.ml5 { margin-left:5px; }
.ml15 { margin-left:15px; }
.ml25 { margin-left:25px; }
.ml35 { margin-left:35px; }
.ml0105 { margin-left:1%; }
.ml5p { margin-left:5%; }
.ml15p { margin-left:15%; }
.ml1502p { margin-left:15%; }

/* Margins Right */
.mr2 { margin-right:2px; }
.mr5 { margin-right:5px; }
.mr15 { margin-right:15px; }
.mr25 { margin-right:25px; }
.mr35 { margin-right:35px; }
.mr5p { margin-right:5%; }

/* Margins Bottom */
.mb2 { margin-bottom:2px; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb25 { margin-bottom:25px; }
.mb35 { margin-bottom:35px; }
.mb75 { margin-bottom:75px; }
.mb150 { margin-bottom:150px; }
.mb250 { margin-bottom:250px; }

/* Margins X Centered */
.mxaut { margin-left:auto; margin-right:auto; }

/* Z-Indexes */
.z1 { z-index:10000; }
.z2 { z-index:1000; }
.z3 { z-index:100; }
.z4 { z-index:10; }
.z5 { z-index:1; }
.zs { z-index:-1; }
/* Closing Indexes */

/* Transform */
/* Transform */
.tr2 { transform:rotate(5deg); }
.tr5 { transform:rotate(5deg); }
.tr7 { transform:rotate(7deg); }
.tr25 { transform:rotate(25deg); }
.tr45 { transform:rotate(45deg); }

.tr2r { transform:rotate(-2deg); }
.tr5r { transform:rotate(-5deg); }
.tr7r { transform:rotate(-7deg); }
.tr25r { transform:rotate(-25deg); }
.tr45r { transform:rotate(-45deg); }
/* Closing Transform */

/* Overflow */
.obh { overflow:hidden; }
.oxh { overflow-x:hidden; }
.oyh { overflow-y:hidden; }
.oxs { overflow-x:scroll; }
.oys { overflow-y:scroll; }
.otd { text-overflow:ellipsis; }
.oth { text-overflow:clip; }
/* Closing Overflow */

/* Paddings */
.p4 { padding:4px; }
.p5 { padding:5px; }
.p7 { padding:7px; }
.p10 { padding:10px; }
.p15 { padding:15px; }
.p20 { padding:20px; }
.p25 { padding:25px; }
/* Flexible Paddings */
.p1005 { padding:10px; }
.p1507 { padding:15px; }
.p1510 { padding:15px; }

/* Side Paddings */
.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }

.pb5 { padding-bottom:5px; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb25 { padding-bottom:25px; }
.pb35 { padding-bottom:35px; }
.pb50 { padding-bottom:50px; }
.pb150 { padding-bottom:150px; }
.pb250 { padding-bottom:250px; }
.pb350 { padding-bottom:350px; }
.pb500 { padding-bottom:500px; }

.pl2 { padding-left:2%; }
.pl4 { padding-left:4%; }
.pl5 { padding-left:5%; }

.pr2 { padding-right:2%; }
.pr4 { padding-right:4%; }
.pr5 { padding-right:5%; }
/* Closing Paddings */

/* Text */
.t7 { font-size:7px; }
.t8 { font-size:8px; }
.t9 { font-size:9px; }
.t10 { font-size:10px; }
.t11 { font-size:11px; }
.t12 { font-size:12px !important; }
.t14 { font-size:14px; }
.t15 { font-size:15px; }  
.t16 { font-size:16px; }
.t17 { font-size:17px; }
.t18 { font-size:18px; }
.t19 { font-size:19px; }
.t20 { font-size:20px; }
.t21 { font-size:21px; }  
.t22 { font-size:22px; }
.t24 { font-size:24px; } 
.t25 { font-size:25px; }
.t28 { font-size:28px; } 
.t32 { font-size:32px; }
.t35 { font-size:35px !important; }
.t38 { font-size:38px; }  
.t42 { font-size:42px; }
.t45 { font-size:45px !important; }
.t75 { font-size:75px !important; }

/* Flexible Text */
.t1107 { font-size:11px; }
.t1109 { font-size:11px; }
.t1208 { font-size:12px; }
.t1210 { font-size:12px; }
.t1211 { font-size:12px; }
.t1412 { font-size:14px; }
.t1410 { font-size:14px; }
.t1612 { font-size:16px; }
.t1614 { font-size:16px; }
.t1715 { font-size:17px; }
.t1814 { font-size:18px; }
.t1816 { font-size:18px; }
.t1916 { font-size:19px !important; }
.t2014 { font-size:20px; }
.t2016 { font-size:20px !important; }
.t2018 { font-size:20px; }
.t2216 { font-size:22px; }
.t2218 { font-size:22px; }
.t2220 { font-size:22px; }
.t2518 { font-size:25px; }
.t2520 { font-size:25px; }
.t2522 { font-size:25px; }
.t3522 { font-size:35px; }
.t4525 { font-size:45px !important; }
.t2555v { font-size:2.5vw; }
.t35120v { font-size:3.5vw; }
/* Exclusive Text */
.xff1 { font-family:var(--xff1); }
.xff2 { font-family:var(--xff2); }
/* Closing Widths */

/* Line Heights */
.ls05 { letter-spacing:0.5px; }
.ls10 { letter-spacing:1px; }
.ls15 { letter-spacing:1.5px; }
.ls20 { letter-spacing:2.0px; }
.ls35 { letter-spacing:3.5px; }
/* Closing Line Heights */

/* Line Heights */
.lh12 { line-height:1.2; }
.lh14 { line-height:1.4; }
.lh15 { line-height:1.5; }
.lh20 { line-height:2.0; }
/* Closing Line Heights */

/* Widths */
.w5 { width:5px; }
.w35 { width:35px; }
.w45 { width:45px; }
.w50 { width:50px; }
.w75 { width:75px; }
.w120 { width: 120px; } 
.w150 { width:150px; }
.w180 { width: 180px; }
.w250 { width:250px; }
.w320 { width: 320px; }
.w420 { width: 420px; }
.w640 { width: 640px; }
.w768 { width: 768px; }
.w1024 { width: 1024px; }

.w10p { width:10%; }
.w15p { width:15%; }
.w20p { width:20%; }
.w25p { width:25%; }
.w30p { width:30%; }
.w33p { width: 33.33%; }
.w35p { width:35%; }
.w37p { width: 37.5%; }
.w40p { width: 40%; }   
.w45p { width:45%; }
.w50p { width:50%; }
.w60p { width:60%; }
.w62p { width: 62.5%; } 
.w66p { width: 66.66%; }  
.w70p { width:70%; }
.w75p { width:75%; }
.w80p { width:80%; }
.w85p { width:85%; }
.w90p { width:90%; }
.w95p { width: 95%; }    
.w96p { width:96%; }
.w98p { width: 98%; }  
.w100p { width:100%; }

/* Flexible Widths */

.w25vw { width: 25vw; }
.w33vw { width: 33.33vw; }
.w50vw { width: 50vw; }
.w66vw { width: 66.66vw; }
.w75vw { width: 75vw; }

.w2575p { width:25%; }
.w2590p { width:25%; }
.w2500p { width:25%; }
.w3075p { width:30%; }
.w3580p { width:35%; }
.w3590p { width:35%; }
.w4060p { width:40%; }
.w4080p { width:40%; }
.w4090p { width:40%; }
.w4590p { width:45%; }
.w5080p { width:50%; }
.w5090p { width:50%; }
.w5090p { width:50%; }
.w5000p { width:50%; }
.w6075p { width:60%; }
.w6085p { width:60%; }
.w7090p { width:70%; }
.w7096p { width:70%; }
.w7500p { width:75%; }
.w9000p { width:90%; }
.w10025p { width:100%; }
/* Exclusive Widths */
.xw1 { width:var(--xw1); }
.xw2 { width:var(--xw2); }
/* Closing Widths */

/* Heights */
.ha { height:auto !important; }
.h33p { height: 33.33%; }  
.h35p { height:35%; }
.h25p { height:25%; }
.h40p { height: 40%; }  
.h50p { height:50%; }
.h60p { height: 60%; } 
.h66p { height: 66.66%; }
.h70p { height:70%; }
.h75p { height:75%; }
.h80p { height:80%; }
.h85p { height: 85%; }
.h90p { height:90%; }
.h95p { height:95%; }
.h97p { height:97%; }
.h100p { height:100%; }

.h5 { height:5px }
.h15 { height:15px; }
.h25 { height:25px; }
.h35 { height:35px; }
.h40 { height:40px; }
.h45 { height:45px; }
.h50 { height:50px; }
.h55 { height:55px; }
.h60 { height:60px; }
.h72 { height:72px; } 
.h75 { height:75px; }
.h84 { height:84px; } 
.h85 { height:85px; }
.h95 { height:95px; }

.h100 { height:100px; }
.h120 { height:120px; }
.h125 { height:125px; }
.h150 { height:150px; }
.h175 { height:175px; }
.h200 { height:200px; }
.h225 { height:225px; }
.h250 { height:250px; }
.h275 { height:275px; }
.h300 { height:300px; }
.h350 { height:350px; }
.h380 { height:380px; }
.h420 { height:420px; } 
.h450 { height:450px; }
.h500 { height:500px; }

/* Flexible Heights */

.h25vh { height: 25vh; }
.h33vh { height: 33.33vh; }
.h50vh { height: 50vh; }
.h66vh { height: 66.66vh; }
.h75vh { height: 75vh; }

.h4515 { height:45px; }
.h250150 { height:250px; }
.h2500p { height:25%; }
.h8025p { height:80%; }
.h8050p { height:80%; }
.h350250 { height:350px; }
/* Exclusive Heights */
.xh1 { height:var(--xh1); }
.xh2 { height:var(--xh2); }
/* Closing Heights */

/* Modern Filters */
.blur-sm { filter: blur(4px); }
.blur-md { filter: blur(8px); }
.brightness-50 { filter: brightness(0.5); }
.brightness-150 { filter: brightness(1.5); }
.contrast-50 { filter: contrast(0.5); }
.contrast-150 { filter: contrast(1.5); }

/* Aspect Ratio */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Modern Viewport Units */
.h-dvh { height: 100dvh; }
.h-svh { height: 100svh; }
.h-lvh { height: 100lvh; }

/* Scroll Snap */
.snap-x { scroll-snap-type: x mandatory; }
.snap-y { scroll-snap-type: y mandatory; }
.snap-start { scroll-snap-align: start; }
.snap-center { scroll-snap-align: center; }

/* Modern CSS Functions */
.w-clamp { width: clamp(200px, 50%, 800px); }
.text-clamp { font-size: clamp(1rem, 2.5vw, 2rem); }

/* Animations */
.an1 { animation-iteration-count:1; animation-timing-function:linear; animation-fill-mode: forwards; }
.an2 { animation-iteration-count:1; animation-timing-function:ease-in-out; animation-fill-mode: forwards; }

.a3 { animation-iteration-count:3 !important; }
.a5 { animation-iteration-count:5 !important; }
.a7 { animation-iteration-count:7 !important; }

.aloop1 { animation-iteration-count:infinite; animation-timing-function:linear; }
.aloop2 { animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-direction: alternate; }

.ad05 { animation-duration:0.5s !important;; }
.ad10 { animation-duration:1.0s !important; }
.ad15 { animation-duration:1.5s !important; }
.ad20 { animation-duration:2.0s !important; }

.xad1 { animation-duration:var(--xad1) !important; }
.xad2 { animation-duration:var(--xad2) !important; }

.aeta1 { animation-delay:1s !important; }
.aeta2 { animation-delay:2s !important; }
.aeta4 { animation-delay:4s !important; }

.akp { animation-fill-mode: both !important; }
.abk { animation-fill-mode: backwards !important; }

.af { animation:fadeIn 3.5s linear 0s 1 normal; animation-fill-mode: both }
.af_bvt { animation:fadeInUp 1.5s linear 0s 1 normal; }
.af_tvb { animation:fadeInBt 1.5s linear 0s 1 normal; }
.af_lvr { animation:fadeInRight 1.5s linear 0s 1 normal; }
.af_rvl { animation:fadeInLeft 1.5s linear 0s 1 normal; }

.af_dow25 { animation:fadeDown25 1.0s linear 0s 1 normal; }
.af_dow50 { animation:fadeDown50 1.0s linear 0s 1 normal; }
.af_dow100 { animation:fadeDown100 1.0s linear 0s 1 normal; }
.af_dow200 { animation:fadeDown200 1.0s linear 0s 1 normal; }
.af_dow300 { animation:fadeDown300 1.0s linear 0s 1 normal; }
.af_dow100p { animation:fadeDown100p 1.0s linear 0s 1 normal; }

.ab_nor { animation:blinker 1s ease-in-out 0s infinite alternate; }
.ab_lig { animation:blinker_light 1s ease-in-out 0s infinite alternate; }

.ar { animation:rotating 4s ease-in-out 0s infinite alternate; }
.ap { animation:pulsing 3s ease-in-out 0s infinite alternate; }
.as { animation:shake 1s ease-in-out 0s infinite alternate; }

/* Closing Animations */

/* Closing General */

/* Elements */

/* Buttons*/
.bt { cursor:pointer; }
/* Closing Buttons*/

/* Images*/
.im_fx1 { object-fit:cover; object-position:var(--im_fx_p1); }
.im_fx2 { object-fit:cover; object-position:var(--im_fx_p2); }
/* Closing Images*/

/* Closing Elements */

/* Structure Elements */

/* Containers */
/* Containers Position */
.psa { position:absolute !important; }
.psr { position:relative; }
.psx { position:fixed; }
/* Closing Containers Position */

/* Containers Displays with Atributes */
.dfr { display:flex; overflow-x:hidden; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfr_bar { display:flex; overflow-x:scroll; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfr_catalog { display:flex; flex-wrap:wrap; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto;}
.dfc { display:flex; flex-direction:column; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto;}

.dfr_ct { display:flex; justify-content:center; align-items:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfr_hc { display:flex; justify-content:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfr_vc { display:flex; align-items:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }

.dfc_ct { display:flex; flex-direction:column; justify-content:center; align-items:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfc_hc { display:flex; flex-direction:column; align-items:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }
.dfc_vc { display:flex; flex-direction:column; justify-content:center; flex: 0 1 auto; flex-shrink: 0; flex-basis: auto; }

.hr { justify-content:right !important; }

.wr { flex-wrap: wrap; }
.str { align-items:stretch !important; }

/* Grid Displays */
.dg { display:grid; }

.dg_hc { display:grid; justify-items:center; }

.gr2 { grid-template-columns:1fr 1fr; }
.gr3 { grid-template-columns:1fr 1fr 1fr; }
.gr4 { grid-template-columns:1fr 1fr 1fr 1fr; }

/* Modern Grid Layouts */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Grid Gaps */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* Closing Containers Displays with Atributes */

/* Closing Containers */

/* Closing Structure Elements */

@media only screen and (max-width: 700px) {

    .dbf { display:none; }

    .cxl252p { left:2%; }
    .cxl255p { left:5%; }
    .cxl305p { left:5%; }

    .cyt10015 { top:15px; }
    .cyt10025 { top:20px; }
    .cyt10025 { top:25px; }

    .bstoprig { border-width: 1px 1px 0px 0px; }

    .t1107 { font-size:7px; }
    .t1109 { font-size:9px; }
    .t1208 { font-size:8px; }
    .t1210 { font-size:10px; }
    .t1211 { font-size:11px; }
    .t1410 { font-size:10px; }
    .t1412 { font-size:12px; }
    .t1612 { font-size:12px; }
    .t1614 { font-size:14px; }
    .t1715 { font-size:15px; }
    .t1814 { font-size:14px; }
    .t1816 { font-size:16px; }
    .t1916 { font-size:16px !important; }
    .t2014 { font-size:14px; }
    .t2016 { font-size:16px !important; }
    .t2018 { font-size:18px; }
    .t2216 { font-size:16px; }
    .t2218 { font-size:18px; }
    .t2220 { font-size:20px; }
    .t2518 { font-size:18px; }
    .t2520 { font-size:20px; }
    .t2522 { font-size:22px; }
    .t3522 { font-size:22px; }
    .t4525 { font-size:25px !important; }
    .t2555v { font-size:5.5vw; }
    .t35120v { font-size:12vw; }

    .ml0105 { margin-left:5%; }
    .ml1502p { margin-left:2%; }

    .mgs2010 { margin:10px; }

    .mg0005 { margin-top:5px; }
    .mg0010 { margin-top:10px; }
    .mg0015 { margin-top:15px; }
    .mg2000 { margin-top:0px; }
    .mg2500 { margin-top:0px; }
    .mg2505 { margin-top:5px; }
    .mg2515 { margin-top:15px; }
    .mg3515 { margin-top:15px; }
    .mg4525 { margin-top:25px; }

    .p1005 { padding:5px; }
    .p1507 { padding:7px; }
    .p1510 { padding:10px; }
    /* Clean Paddings */
    .pzero { padding:0px !important; }

    .w2575p { width:75%; }
    .w2590p { width:90%; }
    .w2500p { width:100%; }
    .w3075p { width:75%; }
    .w3580p { width:80%; }
    .w3590p { width:90%; }
    .w4060p { width:60%; }
    .w4080p { width:80%; }
    .w4090p { width:90%; }
    .w4590p { width:90%; }
    .w5080p { width:80%; }
    .w5090p { width:90%; }
    .w5000p { width:100%; }
    .w6075p { width:75%; }
    .w6085p { width:85%; }
    .w7090p { width:90%; }
    .w7096p { width:96%; }
    .w7500p { width:100%; }
    .w9000p { width:100%; }
    .w10025p { width:25%; }

    .h4515 { height:15px; }
    .h250150 { height:150px; }
    .h2500p { height:100%; }
    .h8025p { height:25%; }
    .h8050p { height:50%; }
    .h350250 { height:250px; }

    .fr { flex-direction:column !important; }
    .fc { flex-direction:row !important; }

    }

@media only screen and (max-height: 250px) {
    .dn250 { display:none; }
    }

@media only screen and (max-height: 400px) {
    .dn400 { display:none; }
    }

@media only screen and (max-height: 500px) {
    .dn500 { display:none; }
    }

/* Additional Breakpoints */
@media only screen and (min-width: 768px) { /* Tablet */ }
@media only screen and (min-width: 1024px) { /* Desktop */ }
@media only screen and (min-width: 1280px) { /* Large Desktop */ }

/* Container Queries */
@container (min-width: 400px) {
  .container-sm { /* styles */ }
}
@container (min-width: 600px) {
  .container-md { /* styles */ }
}

/* Animations */

@keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
    }

@keyframes blinker_light {
    from {opacity: 0.8;}
    to {opacity: 0.2;}
    }

@keyframes rotating {
    from { transform: rotate(-7deg);}
    to { transform: rotate(7deg);}
    }

@keyframes fadeIn {
    from {opacity: 0.0;}
    to {opacity: 1.0;}
    }

@keyframes fadeDown25 {
    from {opacity: 0.0; height:0px; transition: height 1s; }
    to {opacity: 1.0; height:25px; }
    }

@keyframes fadeDown50 {
    from {opacity: 0.0; height:0px; transition: height 1s; }
    to {opacity: 1.0; height:50px; }
    }

@keyframes fadeDown100 {
    from {opacity: 0.0; height:0px; transition: height 1s; }
    to {opacity: 1.0; height:100px; }
    }

@keyframes fadeDown200 {
    from {opacity: 0.0; height:0px; transition: height 1s; }
    to {opacity: 1.0; height:200px; }
    }

@keyframes fadeDown300 {
    from {opacity: 0.0; height:0px; transition: height 1s; }
    to {opacity: 1.0; height:300px; }
    }

@keyframes fadeDown100p {
    from {opacity: 0.0; height:0%; transition: height 1s; }
    to {opacity: 1.0; height:100%; }
    }

@keyframes pulsing {
        0%   {transform: scale(1.0,1.0);}
        50%  {transform: scale(1.15,1.15);}
        100% {transform: scale(1.0,1.0);}
        }

@keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }

@-webkit-keyframes fadeInUp {
            0% {
               opacity: 0;
               -webkit-transform: translateY(100%);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0%);
            }
         }

@keyframes fadeInUp {
            0% {
               opacity: 0;
               transform: translateY(100%);
            }
            100% {
               opacity: 1;
               transform: translateY(0%);
            }
         }

@-webkit-keyframes fadeInBt {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-100%);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0%);
            }
         }

@keyframes fadeInBt {
            0% {
               opacity: 0;
               transform: translateY(-100%);
            }
            100% {
               opacity: 1;
               transform: translateY(0%);
            }
         }

@-webkit-keyframes fadeInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(-100%);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0%);
            }
         }

@keyframes fadeInRight {
            0% {
               opacity: 0;
               transform: translateX(-100%);
            }
            100% {
               opacity: 1;
               transform: translateX(0%);
            }
         }

@-webkit-keyframes fadeInLeft {
            0% {
               opacity: 0;
               -webkit-transform: translateX(100%);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0%);
            }
         }

@keyframes fadeInLeft {
            0% {
               opacity: 0;
               transform: translateX(100%);
            }
            100% {
               opacity: 1;
               transform: translateX(0%);
            }
         }

@-webkit-keyframes fadeOutRight {
            0% {
               opacity: 1;
               transform: translateX(0%);
            }
            100% {
               opacity: 0;
               transform: translateX(100%);
            }
         }

@keyframes fadeOutRight {
            0% {
               opacity: 1;
               transform: translateX(0%);
            }
            100% {
               opacity: 0;
               transform: translateX(100%);
            }
         }

@-webkit-keyframes fadeOutLeft {
            0% {
               opacity: 1;
               transform: translateX(0%);
            }
            100% {
               opacity: 0;
               transform: translateX(-100%);
            }
         }

@keyframes fadeOutLeft {
            0% {
               opacity: 1;
               transform: translateX(0%);
            }
            100% {
               opacity: 0;
               transform: translateX(-100%);
            }
         }