/*  Absolute Lengths
 
 cm	     centimeters
 mm	     millimeters
 in	     inches (1in = 96px = 2.54cm)
 px      pixels (1px = 1/96th of 1in)
 pt	     points (1pt = 1/72 of 1in)
 pc	     picas (1pc = 12 pt)
 
 Relative Lengths
 em	     Relative to the font-size of the element (2em means 2 times the size of the current font)	
 ex	     Relative to the x-height of the current font (rarely used)	
 ch	     Relative to the width of the "0" (zero)	
 rem     Relative to font-size of the root element	
 vw	     Relative to 1% of the width of the viewport*	
 vh	     Relative to 1% of the height of the viewport*	
 vmin    Relative to 1% of viewport's* smaller dimension	
 vmax    Relative to 1% of viewport's* larger dimension	
 %	     Relative to the parent element

*/

/* Define --main-bg-color here */
:root {
    --main-box-size: 22em;          /* var(--main-box-size) */
    --main-box-size-2: 44em;        /* var(--main-box-size-2) */ 
    /* header-strip: */
    --color-header-strip: #111111DD; /* #111111DD */
    --color-header-strip-home: #11111111;  
    --color-menu-back: #222222EE;   /* #222222DD */
    /* body-DARK: */
    --color-dark-fore: #cdcdcd;     /* var(...) */   
    --color-dark-back: #222222;   /* var(...) */
    --color-dark-blue: #41a5ed;   /* var(...) */  
    /* body-LIGHT: */ 
    --color-light-fore: #3f3f3f;  /* var(...) */   
    --color-light-back: #f7f7f7;  /* var(...) ... odecteno z www.svsfem.cz */
    --color-light-blue: #0070C0;  /* var(...) */   
    /* YELLOW (SVS-FEM): */
    --color-fed100: #fed100; /* fed100 */ 
    /* scroll-buttons: */
    --color-gray-button: #9a9a9a55;
    --color-gray-button-sel: #9a9a9a;
}


body { 
    font-size: calc(8.05px + 1.65vmin); 
     font-family: Arial, sans-serif; 
    /* font-family: "Fira Sans", sans-serif; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;  
    /* background-color: #111111; */
    background-color: var(--color-dark-back);
    scroll-behavior: smooth;  
    overflow-x: hidden;
}

.body-mobile-phone {
    scroll-behavior: auto;
    /* font-size: calc(10.05px + 1.65vmin);  */
    font-size: 120%; 
}

button {
    cursor: pointer;
}

/********************************************************************************/
/*                                                                              */
/*     HEADER & NAV                                                             */
/*                                                                              */
/********************************************************************************/

header a {
    cursor: pointer;
    border-bottom: 0.05em solid transparent;
    transition: border 0.5s;
}
header a:hover {
    border-bottom: 0.05em solid var(--color-fed100); 
}

header div {  
    position: fixed;
    font-size: 100%; /* prepsano: small-header-strip */
    color: var(--color-dark-fore); 
    background-color: var(--color-header-strip);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0.5em;
    width: 100vw;
    height: 1.3em;
    transition: 0.5s;
    z-index: 9;
}
 
.small-header-strip { /* rozsireni: header */
    font-size: 75%; /* o kolik je mensi prouzek kdyz je zavreny */ 
}
.small-header-strip-home { /* rozsireni: header div */
    background-color: var(--color-header-strip-home);
}

nav, 
nav button {
    font-size: calc(6px + 1.4vmin); 
    color: var(--color-dark-fore);   
}

.body-mobile-phone nav, 
.body-mobile-phone nav button {
    font-size: calc(8px + 1.8vmin); 
    /* color: var(--color-dark-fore);  */
}

nav {  
    margin: 0; /* 0.5em; */
    position: fixed;
    right: 0;
    top: 0;
    padding: 0.4em;
    text-align: right;
    overflow: hidden; 
    z-index: 10;  
    opacity: 0.1;
} 
nav div {
    height: auto;
    max-width: 18em;
    max-height: calc(100vh - 7em);  
    overflow-x: none;
    overflow-y: auto;
}

.nav-menu-opened {
    background-color: var(--color-menu-back);  
}

nav a {
    font-size: 90%;
    cursor: pointer; 
    margin-right: 0.75em;
    transition: color 0.5s;
}

nav a:hover {
    cursor: pointer;
    color: var(--color-fed100);
}

nav img { /* main menu icon */
    cursor: pointer;
    width: 2.0em; 
    height: auto;
    transition: 0.5s;
    margin: 0.10em;
    filter: invert(0.5); 
    vertical-align: middle;
}


nav img:hover {  
    filter: invert(0.75) sepia(1) saturate(10);
}

nav .inline-icon { /* icon */
    width: 0.7em; 
    height:  0.7em; 
    margin-right: 0.35em;
    margin-bottom: 0.10em;
    transform: scale(1.50) translate(0, 0.05em);
}
 
nav button {
    height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: 0;
    padding: 0.1em 0.5em 0.1em 0.5em; 
    background-color: transparent;
    border: none; 
    text-align: left;
    cursor: pointer; 
    transition: color 0.5s, background-color 0.5s, height 0.5s;
}

nav button div {
    overflow: visible; 
    white-space: nowrap;
}

.nav-button-main {
    width: 16.7em;
    color: var(--color-fed100);
    /* font-weight: bold; */
}

.nav-button-sub { 
    font-size: 90%; 
    padding-left: 1.25em;
    overflow: hidden;
    width: calc(18em);
}

nav button:hover {
    background-color: var(--color-fed100);
    color: black;
}

nav button div {
    height: 1.25em; 
    width: 16em; 
    margin: 0;
    padding: 0;
}

nav button img {
    width: 0.7em;
    height: 0.7em; 
    margin: 0;
    padding-right: 0.25em;
    overflow: hidden;
    filter: brightness(0) invert(1);
}


nav button img:hover {
    filter: none;
}

/********************************************************************************/
/*                                                                              */
/*     MAIN                                                                     */
/*                                                                              */
/********************************************************************************/

main button {
    font-size: 0.8em; 
    transform: skew(-20deg);
    transition: color 0.5s, background-color 0.5s;
    border: 1px solid var(--color-fed100);  
    background-color: var(--color-fed100);
    color: black;
    margin: 1.25em 0.75em;  
    padding: 0.25em 1.25em 0.25em 1.25em;
}



main button:hover {
    background-color: transparent;
    border: 1px solid var(--color-fed100);  
    color: var(--color-fed100);
}  


.image-switch-button {
    position: absolute;   /* fixed */
    width: 0.1em; /* prepsano v JS: updateButton(...) */
    height: 0.75em; 
    background-color: var(--color-gray-button);
    color: #000000;
    padding: 0;
    text-align: center;
    text-decoration: none; 
    margin: 0.3em 0.3em;
    cursor: pointer;
    border: 1px solid transparent;
    transform: skew(-20deg);
    /* transition: background-color 0.5s;   */ 
    /* transition: transform 3.2s ease, background-color 0.5s ease; */
    transition: 0.25s;
    z-index: 1; 
    /* min-width: 30px; */
    vertical-align: middle;
}

.image-switch-button:hover {
    background-color: black;
}

.head-switch-button {
    position: absolute;   /* fixed */
    width: 0.75em; 
    height: 0.65em; 
    background-color: var(--color-gray-button);
    color: #000000;
    padding: 0;
    text-align: center;
    text-decoration: none; 
    margin: 0.2em 0.2em;
    cursor: pointer;
    border: 1px solid transparent;
    /* transform: skew(-20deg);  rotate(70deg); */
    transition: background-color 0.5s, transform 0.5s;
    z-index: 1; 
    /* min-width: 30px; */
    vertical-align: middle;
}

.head-switch-button-scaled {
    transform: skew(-20deg) rotate(70deg) scale(150%);
}

.head-switch-button:hover {
    background-color: var(--color-fed100);
}

.head-switch-button-selected {
     /* border-top: 0.35em solid var(--color-fed100);   */
     background-color: var(--color-gray-button-sel);
}

.head-switch-button-selected:hover {
    /* border-top: 0.35em solid var(--color-fed100);   */
    background-color: var(--color-fed100);
}
 
.image-switch-button-selected {
    /* border-bottom: 0.35em solid var(--color-fed100);   */
    background-color: var(--color-gray-button-sel);
}
.image-switch-button-selected:hover {
    /* border-bottom: 0.35em solid var(--color-fed100);  
    background-color: black; */
    background-color: var(--color-fed100);  
}
 
.article-section-button { /* section */
    font-size: 65%;
    position: absolute;  
    text-align: center;
    height: 1.8em;  
    /* width: auto;  */
    /* transition: 0.5 s; /* color 0.5s, background-color 0.5s; */
    /* transition: 0.05s; /* color 0.5s, background-color 0.5s; */
    /* border: 2px solid #AAAAAA;
    background-color: #AAAAAA; */
    border: none;
    background-color: var(--color-gray-button);
    color: black;
    margin: 0;
    padding: 0.25em 0.4em 0.25em 0.4em;
    transform: skew(-20deg); 
    overflow: hidden;
}

.article-section-button:hover { 
    transition: transform 0.5s; 
    color: black;
    background-color: var(--color-fed100);  
    /* transform: scale(1.1) skew(-20deg); */
}

.article-section-button-selected {
    color: black;
    /* border-bottom: 0.35em solid var(--color-fed100);    */
    background-color: var(--color-gray-button-sel);
    transform: skew(-20deg); /* translate(0, -0.4em); */
}


main {
    display: block; 
    min-height: 100vh; 
    width: 100vw;
}  

article { 
    display: flex;
    overflow-x: hidden; /* prepsano JS: auto */
    overflow-y: hidden;
    white-space: nowrap;
    /* border: 5px solid blue;   */
    scroll-behavior: smooth;
}

.back-canvas-black,
.back-canvas-white {    
    position: absolute;
    left: 0;
    width: 100vw;
    z-index: -2;
    /* border: 2px solid orange; */
    transition: opacity 0.5s;
}

.back-canvas-black{
    background-color: var(--color-dark-back);  
}
.back-canvas-white{
    background-color: var(--color-light-back); 
}
 
.article-black { 
    color: var(--color-dark-fore);
} 

.article-white { 
    color: var(--color-light-fore);
}


article b {
    font-weight: 700; /* normal */ 
}

.inline-icon { /* icon */
    width: 0.9em;  
    height: 0.9em; 
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    transform: scale(1.25) translate(0, 0.05em);
    filter: none;
}
 
.article-black b {
    /* font-style: italic;  */
    /* color: white; /* #FECE12; */ 
    /* backdrop-filter: blur(5px); */
}

.article-white b {
    /* background-color: white; /* #FECE1277; */
}

.article-white a {  
    /* font-weight: 700; */
    cursor: pointer;
    color: var(--color-light-blue);
    border-bottom: 2px solid transparent; 
    text-decoration: none;
    transition: 0.5s;
}

.article-white a:hover {   
    color: var(--color-light-blue);
    border-bottom: 2px solid var(--color-light-blue);  
}

.article-black a {  
    /* font-weight: 700; */
    cursor: pointer; 
    color: var(--color-dark-blue);
    border-bottom: 2px solid transparent; 
    text-decoration: none;
}

.article-black a:hover {   
    border-bottom: 2px solid var(--color-fed100); 
}


a.black-button {
    display: inline-block;
    font-size: 0.8em; 
    transform: skew(-20deg);
    transition: color 0.5s, background-color 0.5s;
    /* border: 1px solid var(--color-fed100);   */
     border: none;
    color: var(--color-dark-fore);
    background-color: var(--color-dark-back);
    margin: 1.25em;
    padding: 0.25em 1.25em 0.25em 1.25em;
}

a.black-button:hover {
    /* border: 1px solid var(--color-fed100);   */
    /* color: var(--color-fed100); */
    border: none;
    color: var(--color-black-fore);
    background-color: var(--color-fed100);
}  


section {   
    flex-wrap: wrap;
    overflow: hidden; 
    justify-content: center;
    align-items: center;
    /* border: 2px solid yellow;  */
}

section div {    
    overflow-y: visible; /* auto; */
    padding: 0; 
    scroll-behavior: smooth;
}
 
section center {
    overflow: visible;
    white-space: normal;
    width: 100%;
}
 
.gdt4 {
    margin: 0px;
    font-size: 120%;
    color: var(--color-fed100);
}
 
.gdt4second { 
    font-size: 55%; 
    font-weight: normal;
}

.yellow {
    margin: 0px; 
    color: var(--color-fed100);
}

h1, h2 {
    width: 100%;
    /* border: 2px solid red; */
    white-space: normal;      
    text-align: left; 
    /* height: 6em;
    max-height: 15%; */
    min-height: 1em; 
}

h1 {  /* GD&T Tools for FEM */
    font-size: 150%;
    margin: 3.4em 0.25em 0.7em 0.25em;
}

h2 {  /* GDT4FEM <br>Online & Inside Ansys */
    font-size: 80%; 
    font-weight: normal;
}
 
h3 { /* article heading */
    font-size: 1.5em;
    text-align: center; 
    margin: 0;
    padding: 0; 
    height: 0;
    overflow: visible; 
    cursor: pointer;
}

section small {     /*  nepouzito */
    font-size: 87%;
} 

section big {     /*  nepouzito */
    font-size: 250%;
} 

section p,  
section ul {
    font-size: 75%;  /* velikost fontu v jednolivych odrzkach */
}

section li ul {
    margin-top: 0.4em;
    font-size: 95%;  /* velikost fontu v jednolivych odrzkach */
}

section p { 
    margin-top: 0em;  
    margin-bottom: 0.75em; 
    text-align: left;
    white-space: normal;  
    width: calc(100% - 2em);
    padding-left: 1.5em;  
    padding: 0em 1em 0 1em;
}
 


section h4 {  /* section heading */
    display: inline-block;
    width: auto;
    margin: 0;  
    padding: 0 0 0.65em 0.75em;  
    /* border-bottom: 2px solid var(--color-fed100); */
}
 
section ul {  
    margin-top: 0; 
    margin-bottom: 0.75em; 
    padding-top: 0;
    text-align: left;
    white-space: normal;  
    width: calc(100% - 3em);
    padding-left: 2.25em;  
}

.p-before-ul-caption,   /* odstavec P koncici ':' pred UL chci bez spodniho margin */
section li {
    margin-bottom: 0.35em;
}

.h5-head-container {
    height: calc(var(--main-box-size) - 4em);
}

section h5 { /* #object-3D-bearing-head 
               #object-3D-rod-head        
               #object-3D-printer-head */
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    /* overflow: visible;   */
}
 
section img, 
section h6 {  
    display: inline-block;
    /* margin: 0 0.25em 0 0.25em; */
    margin: 0;
    padding: 0 0.5em 0 0.5em;
    font-size: 1em;
    width: calc(var(--main-box-size) - 4em);
    height: calc(var(--main-box-size) - 4em);  
}
 
section h6 {
    overflow: hidden;  /* visible */
}

section h5 canvas {  /* head-container-canvas */
    position: absolute;   
    z-index: -1;
    /* background-color: #FF0000; */
}

section h6 canvas {  
    position: static;
    /* position: absolute;  */
    /* position: absolute; */
    z-index: -1;    
    /* transform: scale(1.5); */
    /* width: 100vw;
    height: 100vh;
    transform: translate(calc(-50vw + 50%), calc(-50vh + 50%)); */ 
    /* background: linear-gradient(135deg, #555555 0%, #0e0e0e 100%); */
}

.orbit-3D-button {
    display: block;
    position: absolute;
    bottom: 1%;
    left: 1%;
    width: 2em;
    height: auto;
    z-index: 100;
    /* transform: translate(0.5%, -3%); */
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    max-height: 100%;  /* ignorace nadrazenoho */
    min-height: 0%;    /* ignorace nadrazenoho */
}

.orbit-3D-button :hover {
    background-color: transparent;
    transform:  scale(1.2);
    border: none; 
}

.orbit-3D-button img { 
    width: 100%;
    height: 100%; 
    padding: 0;
    margin: 0;
} 

.orbit-3D-button img :hover { 
    background-color: transparent;
    border: none;
}  

.orbit-3D-fullscreen {  /* pro: "section h6 canvas" */
    position: fixed;
    z-index: 101;     
    margin: 0;
    padding: 0;
    left: 0vw;
    top: 0vh;
    width: 100vmax;
    height: 100vmax;
    transform: translate(calc(50vw - 50vmax), calc(50vh - 50vmax));  
    background-color: #000000DD; 
    border: 2px solid white;
}

.orbit-3D-div-overlay { 
    position: relative; /* relative; */
    /* background-color: #FF000033;  */
    width: calc(var(--main-box-size) - 4em);
    height: calc(var(--main-box-size) - 4em); 
    transform: translate(0, -100%);
    margin: 0;         /* ignorace nadrazenoho */
    max-height: 100%;  /* ignorace nadrazenoho */
    min-height: 0%;    /* ignorace nadrazenoho */
}

.orbit-3D-legend { 
    position: absolute; /* relative; */
    top: 3%; 
    left: 0%; 
    height: 38%;
    width: auto;
    /* transform: translate(0, -250%);  */
    /* transform: translate(0, calc(1.5% - var(--main-box-size)));  */
}  

.orbit-3D-gdt4fem { 
    position: absolute; /* relative; */
    top: 2%;
    right: 1%;
    height: 13%;
    width: 13%;
    /* transform: translate(9em, calc(1.5% - var(--main-box-size) - 5%));   */
} 

.orbit-3D-ansys { 
    position: absolute; /* relative; */
    top: 16%;
    right: 0%;
    height: auto;
    width: 16.5%;
    /* transform: translate(4em, calc(1.5% - var(--main-box-size) - 2.5%));   */
} 

.div-full-fullscreen {  /* pro: "section h6 img" */
    position: fixed;
    z-index: 101;     
    margin: 0;
    padding: 0;
    left: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100vh; 
    background-color: #000000DD; 
} 

.div-full-fullscreen img,     /* spolecne */
.div-full-fullscreen canvas {
    position: fixed;
    left: 0;
    top:  0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

.div-full-fullscreen img {  /* pro: "section h6 img" */
    min-width:  90vmin;
    min-height: 90vmin; 
    max-width:  90vmin;
    max-height: 90vmin; 
}

.div-full-fullscreen canvas{     
    min-width:  100vmax;
    min-height: 100vmax;  
    max-width:  100vmax;
    max-height: 100vmax;  
}
 
.orbit-3D-close img {
    padding-right: 0.5em;
}

.orbit-3D-close {  /* pro: "section h6 canvas" */
    display: inline-flex;
    position: fixed;
    z-index: 1001;     
    margin: 0;
    padding: 0;
    right: 1em;
    top: 1.2em;
    width: 5em;
    height: 1.1em; 
    background-color: transparent;
    color: white;
    border: none;
    font-size: 0.8em;
    cursor: pointer;
}

.orbit-3D-close span {
    border: 2px solid transparent;
    height: 1.25em;
}

.orbit-3D-close span:hover {  /* pro: "section h6 canvas" */
    /* transform:  scale(1.3); */
    border-bottom: 2px solid white;
}


section h6 button {  /* Orbit3D */  
    position: absolute;
    /* z-index: -1;       */
}

section h1 img /* png/IconGDT-150px.png */
{
    margin: 0em;
    width: 3em;
    height: 3em;
}
 
blockquote {
    color: black;
    background-color: var(--color-fed100);
    font-size: 75%;
    /* display: flex;  */
    /* border: 2px solid blue;    */
    text-align: center;
    justify-content: center;
    align-items: center; 
    margin: 0;
    padding: 0.75em;
    width: calc(100% - 1.5em);
    height: calc(100% - 2em);
    font-style: italic; 
    white-space: normal;       
}

blockquote div {
    color: var(--color-light-fore);
    font-style: normal; 
    font-weight: 700;
    font-size: 150%;
    padding: 3; 
    margin: 0; 
}

blockquote p {
    font-size: 100%;
    /* display: inline;  */
    padding: 0.25em calc(1.5em + 5vw); 
    margin: 0; 
}

 
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}

/*

   * * * * * * * *  
   *             *  
   *             *  
   *             *  
   *             *  
   * * * * * * * *  

   * * * * * * * *  
   *             *  
   *             *  
   *             *  
   *             *  
   * * * * * * * *    
*/


@media (max-width: 750px) {

    h2 {  /* GDT4FEM <br>Online & Inside Ansys */ 
        margin: 3.4em 0 0.4em 0;
    }

    main {
        max-width: calc(var(--main-box-size) + 6vw);  
    } 
        
    h3 { /* article heading */ 
        transform: translate(0, calc(0.45em + 6vmin)); 
        /* border: 2px solid red; */
    }

    article {
        width: 100vw;
        max-width: calc(var(--main-box-size) + 6vw);   
        height: auto; /* calc(var(--main-box-size) * 2 + 1em), auto, calc(var(--main-box-size) + 5em); */
        min-height: 55vh;
        padding-top: 3em; 
    }

    section {
        display: block;
        flex: 0 0 calc(var(--main-box-size) + 1.5em); 
        /* flex: 0 0 calc(var(--main-box-size) + 6vw - 0.25em); */
        /* height: 60em; */
        max-width: 99vw; 
        min-height: calc(var(--main-box-size) + 7em);  
    }

    section div {   
        width: calc(var(--main-box-size) - 1.5em); 
        max-width: 90vw;
        /* height: calc(var(--main-box-size) - 5em);   */
        max-height: 55%; 
        min-height: 10em;  
        margin-top: calc(1em + 3vh);
        margin-left: 2.5vw; /* calc((90vw - var(--main-box-size)) * 0.5);   */
        margin-bottom: 2em;
    } 

    section h5 canvas {  /* head-container-canvas
                            #object-3D-bearing-head 
                            #object-3D-rod-head        
                            #object-3D-printer-head */ 
        transform: translate(0, -4.5em); 
    }

    nav a {  /* contact-button */
        display: none;
    }
 
    .images-div {
        margin-left: calc(1em + 1.5vw);
        max-width: calc(var(--main-box-size) - 3.0em);
        min-height: calc(var(--main-box-size) - 3.5em);
        /* transform: translate(calc(1em + 1.5vw), 0);    */
    } 

    .article-section-button {
        max-width: 15vw;
    }
}
  
 

/*

   * * * * * * * *  * * * * * * * *
   *             *  *             *
   *             *  *             *
   *             *  *             *
   *             *  *             *
   * * * * * * * *  * * * * * * * *
*/

@media (min-width: 750px) {
    
    h2 {  /* GDT4FEM <br>Online & Inside Ansys */ 
        margin: 1vh 0 0.4em 0;
    }

    main {
        max-width: calc(var(--main-box-size-2) + 4vw);
    }

    
    h3 { /* article heading */ 
        transform: translate(0, calc(0.5em + 5vh));
    } 

    article {
        width: 100vw;
        max-width: calc(var(--main-box-size-2) + 4vw); 
        min-height: 80vh; 
    }

    section {
        /* display: inline; */
        display: inline-flex;
        max-width: 99vw; 
        flex: 0 0 calc(var(--main-box-size-2) + 5em);  
        /* flex: 0 0 calc(var(--main-box-size-2) - 0.25em + 4vw);   */
        height: calc(var(--main-box-size) + 6em);
        min-height: 80vh;
        gap: calc(8vw - 4em);   
    }

    section div {   
        width: calc(var(--main-box-size) + 5em); 
        height: calc(var(--main-box-size) - 3em); 
        max-width: 45vw;
        /* height: 90%;  */
        min-height: 2em; 
        flex: 0 0 calc(var(--main-box-size) - 3em);
        /* border: 2px solid red; */
        margin-top: 2em; 
    }

    section h5 canvas {  /* head-container-canvas
                            #object-3D-bearing-head 
                            #object-3D-rod-head        
                            #object-3D-printer-head */
        transform: translate(0, -2em); 
    }

    
    .images-div {
        /* padding-left: calc(1.5vw); */
        max-width: calc(var(--main-box-size) - 3.0em);
        min-height: calc(var(--main-box-size) - 3.5em);
    } 
}




/********************************************************************************/
/*                                                                              */
/*     contact article                                                                     */
/*                                                                              */
/********************************************************************************/


.contact p {
    font-size: 75%;
    text-align: center;
    align-items: center;
    align-content: center;
}

.contact-img-svsfem {
    margin-top: 2em;
    width: 10em;
    height: auto;
}

.contact-img-zdenek {
    margin-top: 2em;
    width: 6em;
    height: auto; 
    border-radius: 2em;
}
 

 

/********************************************************************************/
/*                                                                              */
/*     footer                                                                      */
/*                                                                              */
/********************************************************************************/
footer p {
    margin: 0;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.1em 0 2.0em 0;
    /* height: 2em; */
    font-size: 60%;
    color: white;
}

/********************************************************************************/
/*                                                                              */
/*     progress                                                                      */
/*                                                                              */
/********************************************************************************/

.progress-bar-container {
    position: relative;
    overflow: visible;
    min-width: 1px;
    min-height: 1px;
    max-width: 1px;
    max-height: 1px;
    transform: translate(6em, 0);
}

.progress-bar {
    position: relative;
    overflow: visible;
    font-size: 50%;
    padding: 0;
    margin: 0;
    /* border-left: calc(50vw - 3em) solid black; */
    /* border: 2px solid #FECE12;   */
    border: none;
    background-color: #88888866;  
    min-width: 1px;
    min-height: 1px;
    height: 0.20em;
    left: 1.5em;
    bottom: 1em;
    width: 12em;
    min-width: 8em;
    z-index: 100;
    transform: skew(-20deg) translate(-2em, -5.5em);
    text-align: left; 
}

.progress-bar-progress {
    background-color: var(--color-fed100);  
    border: none;
    width: 50%;
    height: 0.20em;
    min-width: 1px;
    min-height: 1px;
    padding: 0;
    margin: 0;
}

.progress-bar-text { 
    font-size: 110%;
    transform: skew(+10deg)  translate(4.2em, -1.5em);
    color: color;
    height: 0;
    width: 0;
    padding: 0;
    overflow: visible;
    margin: 0;
}

/********************************************************************************/
/*                                                                              */
/*     footer                                                                      */
/*                                                                              */
/********************************************************************************/
/* .outline-black { 
    image:
    text-shadow:
      -2px -2px 0 #000,
      2px -2px 0 #000,
      -2px 2px 0 #000,
      2px 2px 0 #000,
      0px -2px 0 #000,
      0px 2px 0 #000,
      -2px 0px 0 #000,
      2px 0px 0 #000;
  } */