/* pixel size RESPONSIVE -------*/
@media(min-width:576px){
.px160-80 {
 font-size: calc(80px + (160 - 80) * ((100vw - 300px) / (1920 - 300)));
}
.px150-80 {
 font-size: calc(80px + (150 - 80) * ((100vw - 300px) / (1920 - 300)));
}
.px80 {
font-size:2.22rem }
.px70 {
font-size:1.94rem }
.px60-48 {
 font-size: calc(48px + (60 - 48) * ((100vw - 300px) / (1920 - 300)));
}
.px60-32 {
 font-size: calc(32px + (60 - 32) * ((100vw - 300px) / (1920 - 300)));
}
.px40-32 {
 font-size: calc(32px + (40 - 32) * ((100vw - 300px) / (1920 - 300)));
}
.px40-30 {
 font-size: calc(30px + (40 - 30) * ((100vw - 300px) / (1920 - 300)));
}
.px40-20 {
 font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1920 - 300)));
}
.px36 {
 font-size: calc(24px + (36 - 24) * ((100vw - 300px) / (1920 - 300)));
}
.px32 {
 font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
}
.px28 {
 font-size: calc(24px + (28 - 24) * ((100vw - 300px) / (1920 - 300)));
}
.px24 {
 font-size: calc(10px + (24 - 10) * ((100vw - 300px) / (1920 - 300)));
}
.px20 {
 font-size: calc(10px + (20 - 10) * ((100vw - 300px) / (1920 - 300)));
}
.px20-14 {
 font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.px18 {
 font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.px16 {
 font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1920 - 300)));
}
} /* end responsive -----------------------*/

/* pixel size STATIC -------*/
.px160c {
font-size: 160px}
.px150c {
font-size: 150px}
.px46c {
font-size: 40px}
.px40c {
font-size: 40px}
.px36c {
font-size:36px }
.px32c {
font-size:32px }
.px28c {
 font-size:28px }
.px24c {
 font-size:24px }
 .px24c {
 font-size:24px }
.px20c {
 font-size:20px }
.px18c {
 font-size:18px }
.px16c {
 font-size:16px }
 .px14c {
 font-size:14px }
 .px12c {
 font-size:12px }
 .px10c {
 font-size:10px }
  .px8c {
 font-size:8px }

 /* pixel size MOBILE ------------------------------------------------*/
@media(max-width:575px){

.px-m-160 {
font-size: 160px }
.px-m-150 {
font-size: 150px }
.px-m-80 {
font-size: 80px} 
.px-m-40 {
font-size: 40px}
.px-m-36 {
font-size:36px }
.px-m-32 {
font-size:32px }
.px-m-30 {
font-size:30px }
.px-m-28 {
 font-size:28px }
.px-m-24 {
 font-size:24px }
.px-m-20 {
 font-size:20px }
.px-m-18 {
 font-size:18px }
.px-m-16 {
 font-size:16px }
 .px-m-14 {
 font-size:14px }
 .px-m-12 {
 font-size:12px }
 .px-m-10 {
 font-size:10px }
 .px-m-8 {
 font-size:8px }

} /* END MOBILE PIXEL SIZE --------------*/





/*
100 – Thin
200 – Extra Light (Ultra Light)
300 – Light
400 – Normal
500 – Medium
600 – Semi Bold (Demi Bold)
700 – Bold
800 – Extra Bold (Ultra Bold)
900 – Black (Heavy) */

.medium {
font-weight:500
}
.semibold {
font-weight:600
}
.bold {
font-weight:700  
}
.extrabold {
font-weight:800 
}

 @media only screen and  (max-width:767px) {
.medium-m {
font-weight:500
}
.semibold-m {
font-weight:600
}
.bold-m {
font-weight:700  
}
.extrabold-m {
font-weight:800 
}}

@media only screen and (min-width:768px) and (max-width:1199px) {
.medium-t {
font-weight:500
}
.semibold-t {
font-weight:600
}
.bold-t {
font-weight:700  
}
.extrabold-t {
font-weight:800 
}}

@media only screen and (min-width:1200px) {
.medium-d {
font-weight:500
}
.semibold-d {
font-weight:600
}
.bold-d {
font-weight:700  
}
.extrabold-d {
font-weight:800 
}}


/* letter spacing -----------------*/
.ls500 {
letter-spacing: 0.5em
}
.ls700 {
letter-spacing: 0.7em
}
.ls50 {
letter-spacing: 0.05em
}
/* line height -------------------------*/
/* v XD je to vyska radku v pixlech */
.lh16 {
line-height: 1.6em
}
.lh15 {
line-height: 1.5em
}
.lh14 {
line-height: 1.4em
}
.lh135 {
line-height: 1.35em
}
.lh13 {
line-height: 1.3em
}
.lh12 {
line-height: 1.2em
}
.lh11 {
line-height: 1.1em
}


/* responzice text align -----------*/

.txt-left {
text-align: left;
}
.txt-center {
text-align: center;
}
.txt-right {
text-align: right;  
}

 @media only screen and  (max-width:767px) {
.txt-left-m {
text-align: left;
}
.txt-center-m {
text-align: center;
}
.txt-right-m {
text-align: right;  
}
}
@media only screen and (min-width:768px) and (max-width:1199px) {
.txt-left-t {
text-align: left;
}
.txt-center-t {
text-align: center;
}
.txt-right-t {
text-align: right;  
}
}

@media only screen and (min-width:1200px) {
.txt-left-d {
text-align: left;
}
.txt-center-d {
text-align: center;
}
.txt-right-d {
text-align: right;  
}
}