/*****************************************************************************************
Datei:  tws_quick-and-dirty.css
*****************************************************************************************/

@charset "UTF-8";

/*****************************************************************************************
Layout
*****************************************************************************************/
/* Display */
.inline-block	        { display: inline-block; }
.flex                   { display: flex; }
.inline-flex            { display: inline-flex }
/* Object Fit */
.object-contain img     { object-fit: contain; }
.object-cover img	    { object-fit: cover; }
.object-fill img	    { object-fit: fill; }
.object-none img	    { object-fit: none; }
.object-scale-down img	{ object-fit: scale-down; } 

/* Object Positiom */
.object-top img	            { object-position: top; }
.object-center img	        { object-position: center; }
.object-right-top img	    { object-position: right top; }
.object-right img	        { object-position: right; }
.object-right-bottom img    { object-position: right bottom; }
.object-bottom img          { object-position: bottom; }
.object-left-bottom img	    { object-position: left bottom; }
.object-left img	        { object-position: left; }
.object-left-top img	    { object-position: left top; }

/* Position */
.absolute   { position: absolute; }
.relative   { position: relative; }

/* Z-Index */
.z-0        { z-index: 0; }
.z-10       { z-index: 10; }
.z-20       { z-index: 20; }
.z-30       { z-index: 30; }
.z-40       { z-index: 40; }
.z-50       { z-index: 50; }

/*****************************************************************************************
Spacing
*****************************************************************************************/
/* Padding */

.py-1\.5        { padding-top: 0.375em;     /* 6px */
                  padding-bottom: 0.375em;  /* 6px */   }
.py-2           { padding-top: 0.5em;       /* 8px */
                  padding-bottom: 0.5em;    /* 8px */   }

.p-4            { padding: 1em; }
.px-4           { padding-left: 1em; padding-right: 1em; }


.p-8            { padding: 2rem; } /* 32px */
.px-8	        { padding-left: 2rem; padding-right: 2rem; }
.py-8           { padding-top: 2rem; padding-bottom: 2rem; }
.ps-8           { padding-inline-start: 2rem; }
.pe-8           { padding-inline-end: 2rem; }
.pt-8           { padding-top: 2rem; }
.pr-8           { padding-right: 2rem; }
.pb-8           { padding-bottom: 2rem; }
.pl-8           { padding-left: 2rem; }

.pb-16          { padding-bottom: 4em;}

/* Margin */

.my-4	        { margin-top: 1rem;     margin-bottom: 1rem; }
.mt-4           { margin-top: 1rem; }
.mr-4           { margin-right: 1em; }
.mb-4           { margin-bottom: 1em; }

.mt-8           { margin-top: 2em; }

.m-8	        { margin: 2rem; }           /* 32px */
.mx-8	        { margin-left: 2rem;    margin-right: 2rem; }
.my-8	        { margin-top: 2rem;     margin-bottom: 2rem; }
.ms-8	        { margin-inline-start: 2rem; }
.me-8	        { margin-inline-end: 2rem; }
.mt-8	        { margin-top: 2rem; }
.mr-8	        { margin-right: 2rem; }
.mb-8	        { margin-bottom: 2rem; }
.ml-8	        { margin-left: 2rem; }


/*****************************************************************************************
Sizing
*****************************************************************************************/
/* Width */

.w-4	        { width: 1em; }         /* 16px */
.w-8	        { width: 2em; }         /* 32px */
.w-9	        { width: 2.25em; }      /* 36px */
.w-10	        { width: 2.5em; }       /* 40px */
.w-11	        { width: 2.75em; }      /* 44px */
.w-12	        { width: 3em; }         /* 48px */
.w-24	        { width: 6em; }         /* 96px */
.w-28	        { width: 7em; }         /* 112px */

.w-screen       { width: 100vw; }

/*****************************************************************************************
Typography
*****************************************************************************************/
/* Font Size */
.text-xs        { font-size: 0.75rem;   line-height: 1rem;        }    /* 12px / 16px */
.text-sm        { font-size: 0.875rem;  line-height: 1.25rem;     }    /* 14px / 20px */
.text-base      { font-size: 1rem;      line-height: 1.5rem;      }    /* 16px / 24px */
.text-lg        { font-size: 1.125rem;  line-height: 1.75rem;     }    /* 18px / 28px */
.text-xl        { font-size: 1.25rem;   line-height: 1.75rem;     }    /* 20px / 28px */
.text-2xl       { font-size: 1.5rem;    line-height: 2rem;        }    /* 24px / 32px */
.text-3xl       { font-size: 1.875rem;  line-height: 2.25rem;     }    /* 30px / 36px */
.text-4xl       { font-size: 2.25rem;   line-height: 2.5rem;      }    /* 36px / 40px */
.text-5xl       { font-size: 3rem;      line-height: 1;           }    /* 40px        */
.text-6xl       { font-size: 3.75rem;   line-height: 1;           }    /* 60px        */
.text-7xl       { font-size: 4.5rem;    line-height: 1;           }    /* 72px        */
.text-8xl       { font-size: 6rem;      line-height: 1;           }    /* 96px        */
.text-9xl       { font-size: 8rem;      line-height: 1;           }    /* 128px       */

/* Font Weight */
.font-thin      { font-weight: 100; }
.font-extralight{ font-weight: 200; }
.font-light     { font-weight: 300; }
.font-normal	{ font-weight: 400; }
.font-medium	{ font-weight: 500; }
.font-semibold	{ font-weight: 600; }
.font-bold	    { font-weight: 700; }
.font-extrabold	{ font-weight: 800; }
.font-black	    { font-weight: 900; }

/* Text Align */
.text-left      { text-align: left; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-justify   { text-align: justify; }
.text-start     { text-align: start; }
.text-end       { text-align: end; }

/* Text Color */
/* ---> extra Datei */

/* Vertical Align */
.align-top	    { vertical-align: top; }
.align-middle	{ vertical-align: middle; }

/*****************************************************************************************
Borders
*****************************************************************************************/
/* Border Radius */

.rounded	    { border-radius: 0.25rem; }     /* 4px */
.rounded-lg	    { border-radius: 0.5rem; }      /* 8px */

/* Border Width */
.border-0       { border-width: 0; }
.border-2       { border-width: 0.125rem; }      /* 2px */
.border-4       { border-width: 0.25rem; }       /* 2px */

/* Border Color */
.border-white   { border-color: rgb(255 255 255); }

/*****************************************************************************************
Effects
*****************************************************************************************/
/* Opacity */
.opacity-0	{ opacity: 0; }
.opacity-5	{ opacity: 0.05; }
.opacity-10	{ opacity: 0.1; }
.opacity-15	{ opacity: 0.15; }
.opacity-20	{ opacity: 0.2; }
.opacity-25	{ opacity: 0.25; }
.opacity-30	{ opacity: 0.3; }
.opacity-35	{ opacity: 0.35; }
.opacity-40	{ opacity: 0.4; }
.opacity-45	{ opacity: 0.45; }
.opacity-50	{ opacity: 0.5; }
.opacity-55	{ opacity: 0.55; }
.opacity-60	{ opacity: 0.6; }
.opacity-65	{ opacity: 0.65; }
.opacity-70	{ opacity: 0.7; }
.opacity-75	{ opacity: 0.75; }
.opacity-80	{ opacity: 0.8; }
.opacity-85	{ opacity: 0.85; }
.opacity-90	{ opacity: 0.9; }
.opacity-95	{ opacity: 0.95; }
.opacity-100	{ opacity: 1; }