body {height: 99.9%;    overflow-x: hidden;   font-size: 18px;      line-height: 1.5;    font-family: 'Raleway', arial;margin: 0;background-color: #ffecd7;color:#5a2e0e;}
* {        box-sizing: border-box;}
a {color:rgb(90 46 14);cursor: pointer }
.ui-content { min-height: 90vh;    border-width: 0;    overflow: hidden;}
html {
    scroll-behavior: smooth;
}
.mmenu {
    position: absolute;
    height: 70%; right: 2%;
    width: 35%;
    z-index: 2;
}
nav a {text-decoration: none}
.topmenu:after {
    content: "";
    display: table;
    clear: both;
}
.topmenu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-flow: column ;
                  flex-flow: column ;
          height: 100%; margin: 0}
.topmenu > li { line-height: 1.5em;
                position: relative; width: 100%;
                margin: .5vw 1vw;   padding: .5em;
                display: block;
                -ms-flex-item-align: center;
                    -ms-grid-row-align: center;
                    align-self: center;
                border: #792a05f0; border-width: 1px;
                border-style: solid;
                -webkit-backdrop-filter: blur(12px);
                        backdrop-filter: blur(12px);
}
.bold, .blubold, .redbold {
    font-weight : 600;
}
.topmenu > li > * {
    font-size: 2em;
    color: #542d04;
    font-family:'Cormorant Infant', serif; 
    text-shadow: -1px -1px 0px #f6a055;
}
.topmenu li a:hover {text-decoration: underline }
.bold, .blubold, .redbold {
    font-weight : 600;
}

.prlx {
 
}
 .prlx {
    position: relative;
    z-index: 4;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    width: 100%;
    background-image: url(/img/dj.jpg);
    height: 43.75vw;
    
}
.prlx.webp {
    background-image: url(/img/dj.webp); 
}

h1, h2 {   text-align: center; margin-top: 3em}
 

.opacblock {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 1em;
}

p , .divtext {
    text-indent : 10px; padding: 10px
}

.ramkafoto {width: 400px;height: 300px; position: relative ; }
.ramkafoto picture {   } 
.colflex {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; margin: 1em} 
.italic {font-style: italic}



.separator-white {
    font: 0/0 a;  width: 100%; 
}
.separator-white.b
{ height: 10%;
    bottom: 0;transform: rotate(180deg);margin-bottom: -3px;  position: absolute;
}
.separator-white.t
{
    top: 0; margin-top: -3px;  position: absolute; height: 15%;
}

.forma-z {
    margin: 0 auto;
    border: 2px solid #805805;
    padding: 10px;
}
.forma-z textarea {

    max-width: 100%; min-width: 90%;
}

.forma-z input, .forma-z select, .forma-z textarea , .forma-z button{
    display: block;
    padding: .5em;
    outline: none;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    -webkit-box-shadow:  1px 1px 2px 2px rgb(178 138 89 / 38%);
            box-shadow:  1px 1px 2px 2px rgb(178 138 89 / 38%); font-size: 1em
}
.forma-z input, .forma-z button {
    max-width: 280px; padding: auto 2em;
}
#send-zwork:hover {cursor: pointer }
#send-zwork:active {  
    -webkit-box-shadow:  inset 1px 1px 2px 2px rgb(178 138 89 / 38%);  
            box-shadow:  inset 1px 1px 2px 2px rgb(178 138 89 / 38%)
}
footer a {color: #ffecd7} 
footer div {-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center;
}
.btntop {
    position: fixed;
    background-repeat: no-repeat;
    opacity: .4;
    background-size: contain;
    right: 1em;
    width: 3em;
    height: 3em;
    background-image:  url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzMzcuMDg0OTkxNDU1MDc4MSIgaGVpZ2h0PSIzMzcuMDg1OTk4NTM1MTU2MjUiIHN0eWxlPSIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGlkPSJiYWNrZ3JvdW5kcmVjdCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeD0iMCIgeT0iMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIi8+CgoKCgoKCgoKCgoKCgoKCgo8ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PGcgaWQ9InN2Z18xIiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbD0iIzY4MzUxMSI+Cgk8cGF0aCBkPSJNMTY4LjU0LDBDNzUuNjE5LDAsMC4wMTIsNzUuNjA5LDAuMDEyLDE2OC41NDNjMCw5Mi45Myw3NS42MDYsMTY4LjU0MywxNjguNTI4LDE2OC41NDMgICBjOTIuOTMzLDAsMTY4LjUzNC03NS42MTMsMTY4LjUzNC0xNjguNTQzQzMzNy4wNzQsNzUuNjA5LDI2MS40NzMsMCwxNjguNTQsMHogTTI3MS40MDUsMjI0LjMyNyAgIGMtMi40MDcsMi40MDItNS41NjEsMy42MTUtOC43MTMsMy42MTVjLTMuMTU4LDAtNi4zMTEtMS4yMTMtOC43MTktMy42MTVMMTY4LjU0LDEzOC45bC04NS40MjQsODUuNDI3ICAgYy00LjgxNiw0LjgxNS0xMi42MzEsNC44MTUtMTcuNDQ3LDBjLTQuODE5LTQuODE1LTQuODE5LTEyLjYyMiwwLTE3LjQzOGw5NC4xNTItOTQuMTQxYzQuODIyLTQuODE1LDEyLjYxMy00LjgxNSwxNy40MjYsMCAgIGw5NC4xNTIsOTQuMTQxQzI3Ni4yMjEsMjExLjcwNSwyNzYuMjIxLDIxOS41MTIsMjcxLjQwNSwyMjQuMzI3eiIgaWQ9InN2Z18yIiBmaWxsPSIjNjgzNTExIi8+CjwvZz48ZyBpZD0ic3ZnXzMiPgo8L2c+PGcgaWQ9InN2Z180Ij4KPC9nPjxnIGlkPSJzdmdfNSI+CjwvZz48ZyBpZD0ic3ZnXzYiPgo8L2c+PGcgaWQ9InN2Z183Ij4KPC9nPjxnIGlkPSJzdmdfOCI+CjwvZz48ZyBpZD0ic3ZnXzkiPgo8L2c+PGcgaWQ9InN2Z18xMCI+CjwvZz48ZyBpZD0ic3ZnXzExIj4KPC9nPjxnIGlkPSJzdmdfMTIiPgo8L2c+PGcgaWQ9InN2Z18xMyI+CjwvZz48ZyBpZD0ic3ZnXzE0Ij4KPC9nPjxnIGlkPSJzdmdfMTUiPgo8L2c+PGcgaWQ9InN2Z18xNiI+CjwvZz48ZyBpZD0ic3ZnXzE3Ij4KPC9nPjwvZz48L3N2Zz4=);
}
.divflex {display: -webkit-box;display: -ms-flexbox;display: flex;
    margin-top: 2em;}
#mainfon { 
    height: 37.5vw; position: relative; line-height: 0; 
}
#mainfon:before {
    content: '';
    background-image:url(/img/fonmain2000.webp);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;            height: 37.5vw;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
#mainfon.webp:before {background-image: url(/img/fonmain2000.webp)}
#maincat { position: absolute; left: 0; right: 0; z-index: 1;bottom: 0;margin-bottom: -2px;}
@media(min-width:1024px and (orientation: landscape) ){
#maincat { position: absolute;top:50px; left: 0; right: 0; top:auto;height: 100%; width: 100%;}
#maincat {top:100px}
}
@media(min-width:1523px){
    #mainfon:before {background-image: url(/img/fonmain2000.jpg);}
    #mainfon.webp:before {background-image: url(/img/fonmain2000.webp)          }

}
@media(max-width:1523px){
    #mainfon:before {background-image: url(/img/fonmain1523.jpg);}
    #mainfon.webp:before {background-image: url(/img/fonmain1523.webp)          }
.divflex {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap}

}
@media only screen 
and (max-device-width : 768px) 
and (orientation : landscape){
    #mainfon:before {background-image: url(/img/fonmain1024.jpg); background-size: cover;height: 100vh  ;background-position:center}
    #mainfon.webp:before {background-image: url(/img/fonmain1024.webp)          }
#maincat { position: absolute;bottom:0 ; left: 0; right: 0; top:auto}
}
@media only screen 
and (max-device-width : 768px) 
and (orientation : portrait) {
    #mainfon:before {background-image: url(/img/fonmain768p.jpg);}
    #mainfon.webp:before {background-image: url(/img/fonmain768p.webp)    ; height: 100vh          }
#maincat { position: absolute;bottom:0 ; left: 0; right: 0; top:auto}
.opacblock {padding: 1em 1px}
.divtext {
    padding: 3px;
}
}
@media only screen 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    #mainfon{height: 100vh }
    #mainfon:before {background-image: url(/img/fonmain1024p.jpg); background-size: cover; ;background-position:center;height: 100vh;}
    #mainfon.webp:before {background-image: url(/img/fonmain1024p.webp)  ;       }
#maincat { position: absolute;bottom:0 ; left: 0; right: 0; top:auto}
nav.mmenu {
    position: absolute;
    height: 70%;
    right: 2%;
    width: 90%;
        z-index: 2;
}
.topmenu > li {
    margin: 1em ;} 
}
@media only screen 
and (max-device-width : 1024px) 
and (orientation : landscape) {

    #mainfon:before {background-image: url(/img/fonmain1024.jpg); background-size: cover;height: 100vh  ;background-position:center}
    #mainfon.webp:before {background-image: url(/img/fonmain1024.webp)  ;       }
#maincat { position: absolute;bottom:0 ; left: 0; right: 0; top:auto}
 
}

@media(max-width:424px  ){
    #mainfon{height: 100vh }
    #mainfon:after {background-image: url(/img/fonmain414p.jpg);}
    #mainfon.webp:after {background-image: url(/img/fonmain414p.webp)    ; height: 100vh          }
picture.minpic400 {width: 100vw; height: 75vw; display: block}
picture img {max-width: 100%; height: auto;margin: auto;
    display: block;}
}
@supports (not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px)))) {  .topmenu > li{  background-color:#096402c4; }}