:root {
            --gap: 2rem;
        }
        html {scroll-behavior: smooth;}
        * {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; }
        h1, h2, h3, h4 {font-family: 'Libre Baskerville', serif; font-weight: 700; color: #333232;}
        h1 {font-size: 1.5rem; font-weight: 700; padding: 0 2rem; text-align: center; text-shadow: 2px 2px 3px black; color: white; line-height: 1.5em;}
        h2 {font-size: 3rem; margin: 0 0 var(--gap) 0; padding-top: var(--gap); font-family: 'Nunito Sans', sans-serif;}
        h3 {font-size: 2.5em; padding-top: var(--gap);  font-family: 'Nunito Sans', sans-serif;}
        p, table {font-weight: 200; font-size: 1.25em; text-indent: 2em; margin: 1em 0; line-height: 1.6; color: #646464; color: black; text-align: justify; letter-spacing: .05em;}
        p strong {font-weight: 500;}
        p a {color: #c97a00; text-decoration: none;}
        p a:hover {text-decoration: underline;}

        table {margin: 2em auto 0px auto; text-indent: 0; border-collapse: collapse;}
        table td {padding: .2em .5em;}
        table tr td + td {padding-left: 2em;}
        table tr:nth-of-type(even) {background: #efefef;}
        table tr {background: #f7f7f7;}
        
        .layout {width: 100%; max-width: 1150px; margin: 0 auto; padding: 0 30px; overflow: hidden;}
        .justify {text-align: justify;}


        .noSelect {-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
        .noSelect:focus {outline: none !important;}
        
        .copyright::after {content:"\00A9\00A0VINTAGE TRAIN s.r.o. 2024";}
        .uzenac::after {content:"\0040";}

        a.fb_share {width: 12rem; display: block; margin: 0px auto var(--gap) auto;}
        a.fb_share:hover img {opacity: .8;}
        
        div#template {display: grid; grid-template-columns: 1fr max-content; overflow:hidden; position: absolute; right: 0; top: 0; min-height: 100%;}
        div#menu {background: #121110; width:0; max-width: 100vw; transition: width 0.4s ease;}
        div#menu div#menu_container {width: 55rem; max-width: 100vw; position: fixed; top: 0; height: 100vh; display: grid; grid-template-rows: 5rem minmax(max-content, 1fr) 5rem;}
        div#menu div#menu_container > div {grid-row: 2/3; margin: 0 2rem; display: grid; grid-template-columns: max-content; justify-content: center; text-align: center; align-self: center; gap: 2rem;}
        div#menu div#menu_container a {text-decoration: none; color: white; padding: .5rem 1rem; position: relative; text-transform: uppercase; letter-spacing: .2em;}
        div#menu div#menu_container a::after {content: "";display: block; position: absolute; bottom: 0; left: 50%; width: 0px; height: 1px; background: white; transition: width 0.2s ease; transform: translateX(-50%);}
        div#menu div#menu_container a:hover::after {width: calc(100% - 2rem);}
        div#menu div#menu_container img {height: 2.5rem; margin: 0 auto 4vh auto; opacity: .3;}
        div#menu_label_text {grid-row: 1/4; margin-right: 2rem; transition: margin-right 0.4s ease;}
        div#burger_container {height: 100%; position: relative; overflow: hidden;}
        div#burger_container > div, div#burger_container::before, div#burger_container::after {content: ""; display: block; height: 1px; width: 100%; background: white; opacity: 1; transition: all 0.2s ease;}
        div#burger_container > div {margin: 1rem 0;}
        div#menu .copyright {grid-row: 3/4; color: #9d9d9d; text-align: center; font-size: .8em; letter-spacing: .2em; align-self: center;}
        
        div#page {width:100vw; display: grid; grid-template-rows: auto min-content;}
        input#menu_scroll {display: none;}
        input#menu_scroll:checked + label + div#template > div#menu {width: 55rem;}
        label#label_menu_srcoll {position: fixed; top: 1rem; right: 1rem; padding: 1rem 1.5rem; color: white; background-color: #121110; z-index:999; cursor: pointer; display: grid; grid-template-rows: calc(2rem + 3px); grid-template-columns: min-content 3rem; align-items: center;}
        input#menu_scroll:checked + label#label_menu_srcoll {background-color: #121110;}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container > div {opacity: 0;}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container::before {transform: translateY(17px) rotate(135deg);}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container::after {transform: translateY(-17px) rotate(-135deg);}
        
        div#canvas {aspect-ratio: 7/7; background: url("https://live.staticflickr.com/65535/53120256749_9e7fee1e57_h.jpg") black; background: url("https://live.staticflickr.com/65535/53120587231_1f8b8bb350_h.jpg") black; background: url("https://live.staticflickr.com/65535/53120794619_0106776475_h.jpg") black; background: url("https://www.vintagetrain.cz/images/malleta.jpg") black; background-position: center; background-position: center bottom; background-size: cover; color: white; display: grid; grid-template-rows: max-content minmax(min-content, 1fr) min-content; position: relative;}
        div#canvas::after {content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; /*background-image: linear-gradient(rgba(0,0,0,.7) 2rem, rgba(0,0,0,.4) 40%); background-image: linear-gradient(rgba(56,45,26,.7) 2rem, rgba(88,76,42,.4) 40%); background-image: linear-gradient(rgba(0,0,0,.5) 4rem, rgba(0,0,0,.25) 30%);*/ background: rgba(0,0,0,.4); z-index:2;}
        div#canvas_menu {z-index:3; min-height: 5rem;}
        div#canvas_menu > img {height: 1.2rem; margin-top: 2.5rem; margin-left: 2rem;}
        div#canvas_menu > a {text-decoration: none; color: white; padding: .5rem 1rem; margin-top: 2rem; /*border-bottom: solid 1px white; */font-weight: 800; position: relative;}
        div#canvas_menu > a::after {content: "";display: block; position: absolute; bottom: 0; left: 50%; width: 0px; height: 1px; background: white; transition: width 0.2s ease; transform: translateX(-50%);}
        div#canvas_menu > a:hover::after {width: calc(100% - 2rem);}
        div#canvas_textplace {gap: 3rem; display: grid; place-items: center; align-content: center; padding-top: 1rem; padding-bottom: 1rem; z-index:3;}
        div#canvas_textplace > a {border: solid 1px white; text-align: center; padding: .5em 1em .4em 1em; letter-spacing: .05em; color: white; text-decoration: none; text-transform: uppercase; font-size: 1.7rem; font-weight: 800; background: rgba(0,0,0,.35); transition: background 0.2s ease;}
        div#canvas_textplace > a:hover {background: rgba(223,149,10,0.4);}
        div#mouse_scroll {text-align: center; display: none;}
        div#mouse_scroll span {font-size: 5rem; z-index: 10; position: relative; color: white; animation: mouse 1s infinite;}

        
        div.product_grid {margin-top: -1.5rem; padding: 1.5rem 0 0 0; border-bottom: dotted 5px #d7d7d7;}
        div#pripravovane-akce > div:last-of-type {border: 0;}
        div.product_grid .product_main_image_container {grid-row: 1/2 ; grid-column: 1/2; font-size:0; display: grid; grid-template-columns: 1fr; gap: var(--gap);}
        div.product_grid .product_thumb_image_container {font-size: 0;  margin: var(--gap) 0; display: grid; grid-template-rows: 1fr; gap: var(--gap); }
        div.product_grid img {width:100%; height: auto; }
        div.product_grid .product_image_container img {aspect-ratio: 3 / 2; object-fit: cover;}
        div.product_grid div.product_form_container {grid-row: 3/4 ; grid-column: 1/3 ;}
        
        
        div.product_grid label.product_form_label, div.product_grid a.product_form_label, div.product_grid span.product_form_label {display: block; margin: 0 auto; padding: 1em 2em; border-radius: .3em; border-radius: 0; width: max-content; color: white; text-transform: uppercase; letter-spacing: .1em; background: #bf071f; position: relative; text-decoration: none; cursor: context-menu;}
        div.product_grid label.product_form_label[for^="form_"], div.product_grid a.product_form_label[href] {background: #0b789b; cursor: pointer;}
        div.product_grid label.product_form_label[for^="form_"]::after, div.product_grid a.product_form_label[href]::after {content: ""; display: block; height: 1rem; width: 1rem; background: inherit; position: absolute; bottom: 50%; left: 100%; transform: translate(-50%, 50%) rotate(45deg);}
        div.product_grid label.product_form_label[for^="form_"]:hover, div.product_grid a.product_form_label[href]:hover {background: #036483;}
        div.product_grid div.product_tag {text-align: right; text-transform: uppercase; font-size: .7em; letter-spacing: .07em; margin: 1em 0;}
        div.product_grid div.product_tag span {margin-left: .5em; background: #cd4907; padding: .3em .6em; display: inline-block; color: white;}
        div.product_grid div.product_tag span:nth-of-type(3n+2) {background: #549af5;}
        div.product_grid div.product_tag span:nth-of-type(3n+3) {background: #7c9b07;}
        
        input.visibility_checkbox {display: none;}
        input.visibility_checkbox + div {max-height: 0px; overflow: hidden; transition: max-height 0.7s ease;}
        input.visibility_checkbox:checked + div {max-height: none;}
        
        div.product_subgrid {display: grid; grid-template-columns: min-content 1fr; gap: 1em; margin: 0 0 2em 0;}
        div.product_subgrid > div {font-size: 1.1em; padding-top: .3em; color: #333232;}
        div.product_subgrid > .material-symbols-outlined {font-size: 2.3em; color: #7a99a3;}
        div.product_subgrid ul {list-style-type: none; margin-left: 2em;}
        div.product_subgrid ul li::before {content: "\2BA9"; content: "\00BB"; color: #b6c9cf; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;}
        div.product_subgrid a {color: #b7431f;}

        div#reference {display: grid; grid-template-columns: 1fr; gap: var(--gap); font-size: 0; padding-bottom: var(--gap); border-bottom: dotted 5px #d7d7d7;}
        div#reference > div {padding: 1rem; border: solid 1px #e3dede;}
        div#reference img {width: 100%; aspect-ratio: 3/2; object-fit: cover; box-shadow: 1px 1px 4px #666;}
        
        div#kontakty {background: #d7910d; background: #f7a518; margin-top: var(--gap); padding: 1rem 0; color: #033149;}
        div#kontakty > div {display: grid; gap: 1rem; line-height: 1.55em;}
        div#kontakty > div a {display: block; color: inherit; text-decoration: none;}
        div#kontakty > div a:hover {text-decoration: underline;} 
        div#kontakty h4 {color: inherit; font-family: inherit; text-transform: uppercase; letter-spacing: .05em; }
        div#mailer_container form {display: grid; grid-template-columns: 1fr; grid-template-rows: min-content minmax(6em, 1fr) min-content min-content min-content; gap: .5rem; height: 100vh; background: white; /*background:#fbe3ba;*/ padding: 1rem;}
        div#mailer_container form input[type=text], div#mailer_container form textarea {padding: .5em; background: transparent; border: 0; border-bottom: solid 1px #bbb; outline: none;}
        div#mailer_container form input[type=submit] {background: #7a99a3; color: white; border:0; cursor: pointer; text-transform: uppercase; letter-spacing: .15em; border-radius: 2px; outline: none; display: block; margin: 1rem auto 0 auto; padding: 0.5em 1em;}
        div#mailer_container form textarea {resize: none;}
        iframe#mailer {width: 100%; height: 100%; border: 0; min-height: 16rem;}

	   input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus {-webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0px 40rem #ffff inset;}
    
    /* PRO STAROU VERZI WEBU */
        form#form_pays {max-width: 800px; margin: 1rem auto;}
    form#form_pays input[type=radio] {display: none;}
    form#form_pays input[type=radio] + label {display: grid; grid-template-columns: min-content auto max-content; grid-template-rows: min-content min-content; outline:solid 1px silver; padding: 1rem; z-index:1; position: relative; margin-bottom: 1px;}
    form#form_pays input[type=radio]:not([disabled]) + label {cursor: pointer;}
    form#form_pays div#variant_container {margin: 1rem 1px;}
    form#form_pays div#variant_container label:first-of-type {border-top-left-radius: 5px; border-top-right-radius: 5px;}
    form#form_pays div#variant_container label:last-of-type {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
    form#form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover {outline-color: #757575; z-index:3;}
    form#form_pays input[type=radio]:checked + label {outline-color: green !important; z-index:2; background: #f3ffe6;}
    form#form_pays input[type=radio] + label .radio_button {grid-column: 1/2; grid-row: 1/3; margin-right: 1rem; align-self: center; color: silver;}
    form#form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover .radio_button {color: #757575;}
    form#form_pays input[type=radio]:checked + label .radio_button {color: #499719 !important;}
    form#form_pays input[type=radio] + label .varianta_nazev {grid-column: 2/3; grid-row: 1/2; font-weight: 700; color: #3d3d3d; align-self: end;}
    form#form_pays input[type=radio] + label .varianta_popis {grid-column: 2/3; grid-row: 2/3; font-size: .9em; color: #757575; align-self: start;}
    form#form_pays input[type=radio] + label .varianta_cena {grid-column: 3/4; grid-row: 1/2; font-weight:700; color: #3d3d3d; align-self: end; margin-left: 3rem; text-align: right;}
    form#form_pays input[type=radio] + label .varianta_cena_off {grid-column: 3/4; grid-row: 2/3; text-decoration: line-through; color: red; font-size: .9em; align-self: start; margin-left: 3rem; text-align: right;}
    
    form#form_pays div.pays_nadpis {text-align: center; text-transform: uppercase; margin: 1rem 0; font-size: 1.3em; letter-spacing: .05em; color: #757575;}
    
    form#form_pays div#pays_container {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
    form#form_pays div#pays_container input[type=text], form#form_pays div#pays_container input[type=email], form#form_pays div#pays_container > span{grid-column: 1/3;}
    form#form_pays div#pays_container input[type=text], form#form_pays div#pays_container input[type=email] {outline: none; padding: 1rem; font-size: 1em; color:#5d5d5d; border: solid 1px silver; border-radius: 5px;}
    form#form_pays div#pays_container input[type=text]:focus, form#form_pays div#pays_container input[type=email]:focus {border: solid 1px #757575;}
    form#form_pays div#pays_container input[type=submit] {margin: 1rem auto 0 auto; display: block; padding: 1rem 2rem; text-transform: uppercase; background: #449719; border: 0; color: white; cursor: pointer; font-size: 1em; letter-spacing: .1em;}
    form#form_pays div#pays_container input[type=submit]:hover, form#form_pays div#pays_container input[type=submit]:focus {background-color: #488309;}
    form#form_pays div#pays_container a {color: black; text-decoration: none; font-weight: 700;}
    form#form_pays div#pays_container a:hover, form#form_pays div#pays_container a:focus {text-decoration: underline;}

    /* PRO NOVOU VERZI WEBU */
    form.form_pays {max-width: 800px; margin: 1rem auto;}
    form.form_pays input[type=radio] {display: none;}
    form.form_pays input[type=radio] + label {display: grid; grid-template-columns: min-content auto max-content; grid-template-rows: min-content min-content; outline:solid 1px silver; padding: 1rem; z-index:1; position: relative; margin-bottom: 1px;}
    form.form_pays input[type=radio]:not([disabled]) + label {cursor: pointer;}
    form.form_pays div#variant_container {margin: 1rem 1px;}
    form.form_pays div#variant_container label:first-of-type {border-top-left-radius: 5px; border-top-right-radius: 5px;}
    form.form_pays div#variant_container label:last-of-type {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
    form.form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover {outline-color: #757575; z-index:3;}
    form.form_pays input[type=radio]:checked + label {outline-color: green !important; z-index:2; background: #f3ffe6;}
    form.form_pays input[type=radio] + label .radio_button {grid-column: 1/2; grid-row: 1/3; margin-right: 1rem; align-self: center; color: silver;}
    form.form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover .radio_button {color: #757575;}
    form.form_pays input[type=radio]:checked + label .radio_button {color: #499719 !important;}
    form.form_pays input[type=radio] + label .varianta_nazev {grid-column: 2/3; grid-row: 1/2; font-weight: 700; color: #3d3d3d; align-self: end;}
    form.form_pays input[type=radio] + label .varianta_popis {grid-column: 2/3; grid-row: 2/3; font-size: .9em; color: #757575; align-self: start;}
    form.form_pays input[type=radio] + label .varianta_cena {grid-column: 3/4; grid-row: 1/2; font-weight:700; color: #3d3d3d; align-self: end; margin-left: 3rem; text-align: right;}
    form.form_pays input[type=radio] + label .varianta_cena_off {grid-column: 3/4; grid-row: 2/3; text-decoration: line-through; color: red; font-size: .9em; align-self: start; margin-left: 3rem; text-align: right;}
    
    form.form_pays div.pays_nadpis {text-align: center; text-transform: uppercase; margin: 1rem 0; font-size: 1.3em; letter-spacing: .05em; color: #757575;}
    
    form.form_pays div#pays_container {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
    form.form_pays div#pays_container input[type=text], form.form_pays div#pays_container input[type=email], form.form_pays div#pays_container > span{grid-column: 1/3;}
    form.form_pays div#pays_container input[type=text], form.form_pays div#pays_container input[type=email] {outline: none; padding: 1rem; font-size: 1em; color:#5d5d5d; border: solid 1px silver; border-radius: 5px;}
    form.form_pays div#pays_container input[type=text]:focus, form.form_pays div#pays_container input[type=email]:focus {border: solid 1px #757575;}
    form.form_pays div#pays_container input[type=submit] {margin: 1rem auto 0 auto; display: block; padding: 1rem 2rem; text-transform: uppercase; background: #449719; border: 0; color: white; cursor: pointer; font-size: 1em; letter-spacing: .1em;}
    form.form_pays div#pays_container input[type=submit]:hover, form.form_pays div#pays_container input[type=submit]:focus {background-color: #488309;}
    form.form_pays div#pays_container a {color: black; text-decoration: none; font-weight: 700;}
    form.form_pays div#pays_container a:hover, form.form_pays div#pays_container a:focus {text-decoration: underline;}

    div.product_subgrid > span.material-symbols-outlined + div > span {margin-right: 2rem;}
    a[href="?zmena_meny=true"] {text-decoration: none; background: #ffa700; color: white; padding: .2em .5em; white-space:nowrap;}
    a[href="?zmena_meny=true"]:hover {background: #e99a03;}

   
    div.pays_checkbox_container {display: grid; grid-template-columns: 4rem auto; position: relative; grid-column: 1/3; gap: 1.5rem;}
    div.pays_checkbox_container > label {position: absolute; top: 0; left: 0; height: 4rem; width: 4rem; cursor: pointer; z-index:555;}
    div.pays_checkbox_container > input {display: none;}
    div.pays_checkbox_container > input + span {display: none;}
    div.pays_checkbox_container > input + span, div.pays_checkbox_container > input + span + span {font-size: 4rem; color: #8b8b8b;}
    div.pays_checkbox_container > span.material-symbols-outlined.checked {font-size: 4rem; color: green;}
    div.pays_checkbox_container > input:checked + span + span {display: none;}
    div.pays_checkbox_container > input:checked + span {display: inline-block;}
    div.pays_checkbox_container > input:checked + span {color: green;}
    div.pays_checkbox_container > span {align-self: center;}
        
        @media only screen and (min-width: 40rem) {
            div#canvas {/*aspect-ratio: 2 / 1; */ aspect-ratio: auto; min-height: 100vh;}
	    div#canvas_textplace {gap: 4rem;}
            div#canvas_menu > img {height: 2.8rem; margin-top: 1.75rem; margin-left: 2.6rem;}
            div.product_grid .product_thumb_image_container {grid-row: 2/3 ; grid-column: 1/2 ; grid-template-rows: none; grid-template-columns: 1fr 1fr;}
            h1 {font-size: 3rem;}
            div#mouse_scroll {display: block;}
            div#canvas_textplace {gap: 20vh;}
            div#reference {grid-template-columns: 1fr 1fr;}
            form#form_pays div#pays_container input[type=text] {grid-column: auto/auto;} 
            form.form_pays div#pays_container input[type=text] {grid-column: auto/auto;}      
        }
        
        @media only screen and (min-width: 55rem) {
            h3 {padding-top: 0;}
            div.product_grid {display: grid; grid-template-rows: min-content 1fr auto; grid-template-columns: 1fr 50%; gap: var(--gap);}  
            div.product_grid .product_thumb_image_container {margin: 0;}
            div.product_text_container{ grid-row: 1/3 ; grid-column: 2/3 ;} 
            /*div#reference {grid-template-columns: 1fr 1fr 1fr;}*/ 
            div#kontakty > div {grid-template-columns: 1fr 1fr;} 
            div#kontakty > div > *:nth-child(1) {grid-row: 1/2; grid-column: 2/3;} 
            div#kontakty > div > *:nth-child(2) {grid-row: 2/4; grid-column: 2/3;}
            div#kontakty > div > *:nth-child(3) {grid-row: 1/2; grid-column: 1/2;}
            div#kontakty > div > *:nth-child(4) {grid-row: 2/3; grid-column: 1/2;}
            div#kontakty > div > *:nth-child(5) {grid-row: 3/4; grid-column: 1/2;} 
	    iframe#mailer {min-height:0;}
            label#label_menu_srcoll:hover div#menu_label_text {margin-right: 4rem; }  
        }
        
        @keyframes mouse {
        0%   {top: 0;}
        50%  {top: -1rem;}
        100% {top: 0;}
        }

        @media (hover: hover) and (pointer: fine) {
             div.pays_checkbox_container > label:hover + input + span + span {display: none;}
             div.pays_checkbox_container > label:hover + input + span {display: inline-block;}
        }