#media-fullscreen{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transition: 1s;
    transform: translate(-100vw , 0);
    background: #ffffff;
    pointer-events: none;
}
#media-fullscreen.active{
    transform: translate(0 , 0);
    pointer-events: all;
}
#media-fullscreen > button{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
}
#media-fullscreen > button > img,
#media-fullscreen > button > svg{
    width: 100%;
}
#media-fullscreen > img{
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}

nav.action-fill{margin-top: 12px;}
.action-fill > a{background: #f0f0f0;color: #000000;padding-left: 16px;padding-right: 4px;border-radius: 16px;}
.action-fill.accent > a:first-of-type{background: #000000;color: #ffffff;}
.action-fill.accent > a:first-of-type > img{filter: invert(1);}

section#about > ul{margin-left: 1rem;list-style: decimal;}

section.grid {display: grid;grid-template-columns: repeat(auto-fill , minmax(220px , 1fr));gap: 12px 8px;}
section.grid > .item-card > img{aspect-ratio: 1 / 1;}

ol.tag{margin-left: 8px;margin-top: 8px;}
ol.tag { display: flex;flex-wrap: wrap;gap: 12px;}
ol.tag > li {display: flex;align-items: center;padding-left: 16px;padding-right: 4px;border-radius: 16px;}
ol.tag > li > img , ol.tag > li > svg{width: 34px;height: 34px;}
ol.tag > li.ban {background: #fe0022;}
ol.tag > li.ban > span , ol.tag > li.ban > svg > path , ol.tag > li.ban > svg > ellipse{fill: #ffffff;color: #ffffff;}
ol.tag > li.warn{background: #ffcc00;}
ol.tag > li.warn > span , ol.tag > li.warn > svg > path , ol.tag > li.warn > svg > ellipse{fill: #000000;color: #000000;}
ol.tag > li.note{background: #efefef;}
ol.tag > li.note > span , ol.tag > li.note > svg > path , ol.tag > li.note > svg > ellipse {fill: #000000;color: #000000;}
ol.tag > li.safe{background: #118822;}
ol.tag > li.safe > span , ol.tag > li.safe > svg > path , ol.tag > li.safe > svg > ellipse {fill: #ffffff;color: #ffffff;}
ol.tag > li.digital{background: #2277ff;}
ol.tag > li.digital > span , ol.tag > li.digital > svg > path , ol.tag > li.digital > svg > ellipse {fill: #ffffff;color: #ffffff;}
ol.tag > li > span {font-family: SanFranciscoBold , system-ui , sans-serif;font-size: 14px;}

ul.advantage > li {display: flex;align-items: center;}
ul.advantage > li > span{font-weight: 600;}
ul.advantage > li > img {width: 24px;height: 24px;}

span.decor-gold{background: #ffcc00;color: #331100;letter-spacing: -2px;font-weight: 400;padding-left: 10px;padding-right: 11px;font-size: 0.72em;border-radius: 15px;}
span.decor-note{color: #777788;padding-top: 12px;display: block;}

.scroll {display: flex;align-items: center;overflow-x: auto;scroll-snap-type: x mandatory;gap: 12px;}
.scroll > a , .scroll > button , .scroll > img , .scroll > video , .scroll > svg , .scroll > div {scroll-snap-align: start;}
.scroll > a , .scroll > button , .scroll > img , .scroll > video , .scroll > svg{min-width: max-content  ;}

.gallery-card > img {object-fit: cover;aspect-ratio: 4 / 3;border-radius: 16px;}

.gallery-fullscreen > img , .gallery-fullscreen > video , .gallery-fullscreen > svg {width: 100vw;height: 100vh;}

.gallery-topscreen{
    width: 100%;
}
.gallery-topscreen > img{
    width: 100%;
    object-fit: contain;
    max-height: 600px;
}

a > span ~ img,a > span ~ svg{width: 34px;height: 34px;}

a > svg , a > img , button > svg , button > img , a ~ img , a ~ svg{width: 34px;height: 34px;}

section.grid > h2 {grid-column: 1 / -1;}

div.grid-postcard{display: grid;grid-template-columns: repeat(auto-fill , minmax(350px , 1fr));gap: 24px 12px ;}
div.grid-postcard > div {display: grid;grid-template-columns: 60px 1fr;grid-template-rows: min-content max-content;background: #f0f0f0;gap: 8px 12px;border-radius: 12px;padding-right: 12px;}
div.grid-postcard > div > img{grid-column: 1 / 2;grid-row: 1 / -1;object-fit: contain;height: 100%;}
div.grid-postcard > div > h3{grid-column: 2 / 3;grid-row: 1 / 2;font-size: 1rem;padding: 12px 0 0 0;margin: unset;}
div.grid-postcard > div > p {grid-column: 2 / 3;grid-row: 2 / 3;padding: 0 0 12px 0;margin: unset;}

.tile {display: grid;grid-template-columns: repeat(auto-fill , minmax(200px , 1fr));margin-top: 12px;}
.tile > img{width: 100%;min-height: 200px;object-fit: cover;aspect-ratio: 1 / 1;}

.grid > .block > img {background: linear-gradient(140deg, #f0f0f0 , #e0e0e0);border: 1px solid #e0e0e0;border-radius: 12px;}
.grid > .block > span {display: block;width: calc(100% - 16px);margin-left: 8px;margin-bottom: 8px;text-align: center;line-height: 1.2;font-size: 21px;}

header.absolute > address{margin-left: 12px;scroll-margin-left: 12px;}

nav.breadcrumb{padding-left: 8px;padding-right: 8px;margin-bottom: 6px;}nav.breadcrumb, nav.breadcrumb>a{display: flex;align-items: center;}nav.breadcrumb>a{font-weight: 600;opacity: 0.5;}nav.breadcrumb>a>img,nav.breadcrumb>a>svg{width: 24px;height: 24px;}nav.breadcrumb>a:any-link{color: #000000;opacity: 1;}nav.breadcrumb>a:any-link:hover{opacity: 0.5;}nav.breadcrumb>a:any-link::after{content: ">";margin-right: 7px;margin-left: 5px;transform: translate(0,-1px);} 

address > a , nav > a , nav > button , div.action > a , div.action > button {display: flex;align-items: center;min-height: 40px;gap: 6px;background: initial;}
address > a > span {font-size: 17.5px;}
address > a > span , address > a > svg path {color: #000000;fill: #000000;}
address > a:visited > span , address > a:visited ~ svg path{color:#8800aa;fill: #8800aa;}

nav.bottom-bar{display: flex;position: fixed;bottom: 0;left: 0;background: #ffffff44;backdrop-filter: blur(4px);border-top: 1px solid #f0f0f041;height: 60px;padding-bottom: 4px;padding-top: 4px;z-index: 91;width: 100%;max-width: 100vw;margin-left: unset;margin-right: unset;}
nav.bottom-bar > a > span , nav.bottom-bar > a > svg > path{color: #000000;fill: #000000;}
nav.bottom-bar > a > span {font-size: 14px;font-family: SanFranciscoBold;font-weight: 500;}

header.absolute {position: absolute;left: 0;top: 0;width: 100%;}
header.absolute > address > a > span,header.absolute > address > a > svg path,header.absolute > svg > path ,header.absolute > svg > text {/* and .gallery-fullscreen */color: #ffffff;fill: #ffffff;}

body > .fullscreen-menu {position: absolute;opacity: 0;pointer-events: none;padding-left: 12px;padding-top: 20px;list-style: none;transition: 0.6s;transform: translateX(-100vw);}
body > .fullscreen-menu.active {display: block;position: fixed;transform: translateX(0);top: 0;left: 0;opacity: 1;transition: 0.6s;background: #ffffff;z-index: 9;overflow-y: auto;height: 100%;pointer-events: all;padding-bottom: 122px;}
body > .fullscreen-menu.active > li > a ~ img{width: 24px;height: 24px;}
body > .fullscreen-menu.active > li > a, body > .fullscreen-menu.active > li > ul > li > a{display: inline-flex;align-items: center;min-height: 34px;}
body > .fullscreen-menu.active > li > a > img , body > .fullscreen-menu.active > li > a ~ img{transition: 0.7s;transform: rotate(180deg) translate(-8px, -4px);}
body > .fullscreen-menu.active > li > ul{display: none;}
body > .fullscreen-menu.active > li.active > a > img , body > .fullscreen-menu.active > li.active > a ~ img {transform: rotate(0deg) translate(8px, 4px);}
body > .fullscreen-menu.active > li.active > a ~ ul{display: block;list-style: none;margin-left: 12px;}
body > .fullscreen-menu.active > li.active > ul{display: block;}

#contact > address {display: flex;flex-wrap: wrap;gap: 12px 8px;margin-left: 8px;width: calc(100% - 16px);}
section#contact > address > a{background: #f0f0f0;border-radius: 16px;padding-left: 16px;padding-top: 8px;padding-bottom: 8px;}

#map,section#contact > #map{margin-top: 24px;}
section#contact > #map > div > iframe ,
#map > div > iframe,
section#contact > #map > iframe{border: none;width:100%;border-radius: 24px;} 

section#other > a{display: flex;align-items: center;border-radius: 16px;margin-bottom: 12px;width: 350px;min-height: 40px;padding-left: 12px;padding-right: 12px;background: #f0f0f0;}

nav.bottom-bar > button > svg > path{transition: 0.6s;}nav.bottom-bar > button.active > svg:nth-child(1) > path:nth-child(1){transform: rotate(45deg) translate(10%, -44%);}nav.bottom-bar > button.active > svg:nth-child(1) > path:nth-child(2){transform: rotate(-45deg) translate(-45%, 5%);}nav.bottom-bar > button.active > svg:nth-child(1) > path:nth-child(3){opacity: 0;}
nav.bottom-bar > a > img , nav.bottom-bar > a > span{opacity: 0.5;}
nav.bottom-bar > a:any-link > img , nav.bottom-bar > a:any-link > span{opacity: 1;}

form.canonical > h3{
   margin-left: 8px;
}
form.canonical > div.group{
   margin-bottom: 8px;
   position: relative;
   display: flex;
   justify-content: space-between;
   width: max-content;
}
form.canonical > div.group > textarea,
form.canonical > div.group > input{
   font-size: 17px;
   width: 100%;
   background: #f0f0f0;
   color: #000000;
   min-height: 40px;
   border-radius: 12px;
   border: unset;
   padding-left: 10px;
   padding-top: 12px;
}
form.canonical > div.group > textarea{
    min-height: 250px;
    padding-top: 21px;
    resize:vertical;
}
form.canonical > div.group > label{
   position: absolute;
   top: 2px;
   left: 24px;
   font-size: 13px;
   color: #ffffff;
   opacity: 0;
   z-index: 9;
}
form.canonical > div.group > input::placeholder,
form.canonical > div.group > textarea::placeholder{
  color: #000000;
}
form.canonical > div.group > input:focus::placeholder,
form.canonical > div.group > textarea:focus::placeholder{
  color: #000000;
}
form.canonical > div.group > textarea:focus~label,
form.canonical > div.group > input:focus~label{
   transition: 1s;
   color: #000000;
   opacity: 1;
}
form.canonical > div.group > input:focus{
   outline: 1px solid #ffaa00;
}

body > a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-left: 16px;
    padding-right: 15px;
    border-radius: 16px;
    background: #f0f0f0;
    margin-bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 600;
}

footer{
    margin-top: 12px;
}

main.description > p.message {
    width: max-content;
    min-width: 350px;
    margin-left:auto;
    margin-right: auto;
}
   
@media screen and (min-width : 601px){

    body > a{
        min-width: 40ch;
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
    }

    body > section#product > .grid{
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(250px , 1fr));
    }

    body > .gallery-topscreen > img{
        border-radius: 16px;
        width: max-content;

    }

    body > ol.tag,body > h1,body > h2, body > h3 ,body > p,body > ul.advantage , body > nav.action-fill,section#about,section#product,section#object, section#partner , section#contact , section#other > a , section#products , section#other > h2 , section#price , body > .tile {max-width: 1024px;margin-left: calc((100vw - 1024px) / 2);}

    .tile{
        grid-template-columns: repeat(3 , 1fr);
        gap: 8px ;
    }
    .tile > img {
        border-radius: 4px;
    }

    nav.bottom-bar {left: 50%;transform: translateX(-50%);background: #efefef;bottom: 12px;border-radius: 16px;padding-right: 8px;width: max-content;height: max-content;}
    nav.bottom-bar > button {aspect-ratio: 1/1;display: flex;align-items: center;justify-content: space-between;border-radius: 16px;background: transparent;}
    nav.bottom-bar > button:hover {transition: 0.6s;transform: scale(1.2);}

    body > .fullscreen-menu.active {border-right: 1px solid #11111144;}
    
    .gallery-card > img {width: 1024px;height: calc(1024px / 4 * 3);}

    .grid-scroll,div.grid.scroll {display: grid;grid-template-columns: repeat(auto-fill,minmax(300px , 1fr));}

    form.canonical > div.group > textarea,
    form.canonical > div.group > input{
        width: 45ch;
    }
}
@media screen and (min-width : 601px) and (max-width : 1200px){
    body > .fullscreen-menu.active {min-width: 250px;}
}
@media screen and (min-width : 1201px){
    header , header > address , header > nav{display: flex;justify-content: space-between;gap: 12px;}

    body > .fullscreen-menu.active {min-width: 350px;}
}
@media screen and (max-width:600px){
    body > a{
    width: calc(100vw - 16px - 32px);
    margin-left: 8px;
    word-break: break-all;
    }

    .tile{
        grid-template-columns: repeat(3 , 1fr);
    }
    .tile > img {
        min-height: unset;
        width: calc(100vw / 3);
        max-height: calc(100vw / 3);
    }

    body > ol.tag,body > h1,body > h2,body>h3,body > p,body > ul.advantage , body > nav.action-fill,section#about,section#product,section#object, section#partner , section#contact , section#contact > #map , section#price , body > h2 , section#other > a , section#other > h2 {max-width: calc(100vw - 24px);margin-left: 12px;}

    header > svg {display: flex;margin: 12px auto 8px auto;}

    nav.bottom-bar > a {min-width: max-content;display: flex;flex-direction: column-reverse;}
    nav.bottom-bar > a > img , nav.bottom-bar > a > span{display: block;}

    body > .fullscreen-menu.active {height: 100vh;width: 100vw;max-height: calc(100vh - 122px);}

    .gallery-card > img {min-width: 90vw;height: calc(90vw / 4 * 3);}
    .gallery-card > div {min-width: 90vw;height: calc((90vw / 4 * 3) + 1rem);}

    .gallery-card > div > img {width: auto;display: flex;height: calc(100% - 2rem);border-radius: 12px;margin: 0 auto;}
    .gallery-card > div > span{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;padding-left: 12px;padding-right: 12px;padding-bottom: 8px;margin-top: 8px;color: #787878;}

    .grid-scroll,
    .grid.scroll{display: flex;max-width: calc(100vw - 24px);}
    .grid-scroll > img,.grid-scroll > svg,.grid.scroll > .block{min-width: 84vw;}

    section > .grid-scroll{display: flex;overflow-x: auto;max-width: 100vw;scroll-snap-type: x mandatory;}
    section > .grid-scroll > img,section > .grid-scroll > svg{scroll-snap-align: start;}

    section#contact > #map > div > iframe ,#map > div > iframe,section#contact > #map > iframe{border: none;width: calc(100% - 16px);border-radius: 24px;} 

    section#other > a{max-width: calc(100vw - 16px);min-height: 40px;margin-left: 8px;padding-left: 12px;padding-right: 12px;background: #f0f0f0;}

    form.canonical > div.group > textarea,
    form.canonical > div.group > input{
        width: calc(100vw - 34px);
        margin-left: 8px;
    }
    form.canonical > div.group > textarea, form.canonical > div.group > input{
        margin-left: unset;
    }
}