:root{--clrBW00p:hsl(0,0%,0%);--clrBW05p:hsl(0,0%,5%);--clrBW06p:hsl(0,0%,6%);--clrBW10p:hsl(0,0%,10%);--clrBW13p:hsl(0,0%,13%);--clrBW15p:hsl(0,0%,15%);--clrBW20p:hsl(0,0%,20%);--clrBW25p:hsl(0,0%,25%);--clrBW30p:hsl(0,0%,30%);--clrBW35p:hsl(0,0%,35%);--clrBW40p:hsl(0,0%,40%);--clrBW45p:hsl(0,0%,45%);--clrBW50p:hsl(0,0%,50%);--clrBW55p:hsl(0,0%,55%);--clrBW60p:hsl(0,0%,60%);--clrBW65p:hsl(0,0%,65%);--clrBW70p:hsl(0,0%,70%);--clrBW75p:hsl(0,0%,75%);--clrBW80p:hsl(0,0%,80%);--clrBW85p:hsl(0,0%,85%);--clrBW90p:hsl(0,0%,90%);--clrBW95p:hsl(0,0%,95%);--clrBW96p:hsl(0,0%,96%);--clrBW97p:hsl(0,0%,97%);--clrBW98p:hsl(0,0%,98%);--clrBW99p:hsl(0,0%,99%);--clrBW100p:hsl(0,0%,100%);

    --clrBW85pa1:hsl(0,0%,85%,.1);
    --clrBW95pa9:hsla(0,0%,95%,.9);
    --clrBW95pa8:hsla(0,0%,95%,.8);
    --clrBW95pa7:hsla(0,0%,95%,.7);
    --clrBW99pa9:hsla(0,0%,99%,.9);

    --clrUX:hsl(146, 40%, 55%);
    --clrUI:hsl(29, 50%, 50%); 
    --clrDV:hsl(335, 35%, 59%);
    --clrWD:hsl(182, 45%, 45%); 
    --clrDV:hsl(206, 50%, 30%);  
    --clrID:hsl(60, 45%, 45%);

    --clrUIlt:hsl(29, 85%, 85%); 

    --clraIDShrTxt:hsl(156, 60%, 29%);

    --clraLBL: hsla(183, 162%, 83%, 0.95);
    --clrBLBdark:hsl(222, 33%, 45%);
    --clraShrTxt: hsla(33, 153%, 93%, 0.95);
    --clraShrTxtCmp: hsla(195,60%,29%,1); 

    --clrUXcnt:hsl(100,10%,75%);
    --clrUIcnt:hsl(30,10%,75%);
    --clrDVcnt:hsl(353,10%,75%);
    --clrDCcnt:hsl(58,10%,75%);
    --clrLUXcnt:hsl(182,10%,75%);
    --clrWDcnt:hsl(226,10%,75%);
    --clrIDcnt:hsl(60,10%,75%); 

    /* from pages */
    --clraUX:hsla(99, 45%, 45%, 0.95);
    --clraUI:hsla(29, 70%, 50%, 0.95);
    --clraDV:hsla(60, 45%, 45%, 0.5); 
    --clraDC:hsla(58, 40%, 40%, 0.5);
    --clraLUX:hsla(182, 40%, 40%, 0.5);
    --clraLB:hsla(213, 40%, 40%, 0.5);
    --clraWD:hsla(206, 40%, 40%, 0.5);
    --clraID:hsla(60, 45%, 45%, 0.5); 
    --clraYL:hsla(41, 100%, 38%, 0.654); 
    --clraAMB:hsla(15, 31%, 47%, 1); 

    /*portfolio*/
    --clraBL:hsla(243,55%,35%,1);
    --clraMD:hsla(272,45%,45%,1);  
    --clraORG:hsla(2,45%,45%,1);  
    --clraENT:hsl(92,45%,45%,1);
}
    .clraBW{fill:hsla(0, 0%, 90%, 0.85); stroke:rgba(60, 60, 60, 0.85);stroke-width:1;}
    .clraUX{fill:hsla(99, 40%, 40%, 0.65); stroke:hsla(99, 75%, 30%,0.35);stroke-width:1;}
    .clraUI{fill:hsla(29, 65%, 50%, 0.65);stroke:hsla(29, 75%, 30%,0.35);stroke-width:1;}
    .clraDV{fill:hsla(335, 60%, 50%, 0.65);stroke:hsla(335, 75%, 30%,0.35);stroke-width:1;}
    .clraDC{fill:hsla(58, 50%, 50%, 0.65);stroke:hsla(58, 75%, 30%,0.45);stroke-width:1;}
    .clraLUX{fill:hsla(182, 50%, 75%, 0.65);stroke:hsla(182, 75%, 30%,0.65);stroke-width:1;}
    .clraWD{fill:hsla(206, 50%, 75%, 0.65);stroke:hsla(206, 75%, 30%,0.65);stroke-width:1;}
    .clraID{fill:hsla(60, 50%, 75%, 0.65);stroke:hsla(60, 75%, 25%,0.45);stroke-width:1; }
         
    html,body{width:100%;height:100vh;color:var(--clrBW00p);background:var(--clrBW99p);font-smooth:auto;-webkit-font-smoothing:antialiased;font-family:Nunito Sans,Helvetica Neue,Arial,Noto Sans,sans-serif;font-weight:300;} 

    main{min-height:100%;margin-left:auto;margin-right:auto;background-image:url(./../../../img/bgd/treska-mono-bgd_01.webp);background-repeat:repeat-y;} 

    /*font*/ 
    /* .font-sans{font-family:Nunito Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol} */
    .fontGothic{font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif}
    .fontMono{font-family: 'Courier New', Courier, monospace}
    .smoothMe{font-smooth:auto;-webkit-font-smoothing: antialiased}
    @import url('./../../css/nunito-sans.css');
    .courier{font-family: 'Courier New', sans-serif;}
    .nunito{font-family: 'Nunito Sans', sans-serif;}
    .murecho{font-family: 'Murecho', sans-serif;}
    .helvetica{font-family: 'Helvetica Neue', sans-serif;}
    .arial{font-family:Arial,sans-serif;}
    .arial-black{font-family:"Arial Black",Gadget,sans-serif;}
    .verdana{font-family:Verdana,Geneva,sans-serif;}
    .tahoma{font-family:Tahoma,Geneva,sans-serif;}
    .geneva{font-family:Geneva,Tahoma,sans-serif;}
    .trebuchet{font-family:"Trebuchet MS",Helvetica,sans-serif;}
    .comic-sans{font-family:"Comic Sans MS",cursive,sans-serif;}
    .courier-new{font-family:"Courier New",Courier,monospace;}
    .times-new-roman{font-family:"Times New Roman",Times,serif;}
    .georgia{font-family:"Georgia", Georgia, serif; font-size: 3em !important;}
    .garamond{font-family:"Garamond", Garamond, serif;}
    .impact{font-family:Impact,Charcoal,sans-serif;}
    .condensed {font-stretch: 50%;}

    /*text-shadow*/
    .textShadowBlack{text-shadow:1px 1px 1px black}
    .textShadowWhite{text-shadow:1px 1px 0px white}
    .textContrast-black{text-shadow: 1px 1px 0 black}
    .textContrast-white{text-shadow: 1px 1px 0 white}
    .textContrast-white_05{text-shadow: 0 1px 2px rgba(250,250,250,0.55)}
    .boxShadowWhite{box-shadow:1px 1px 0px white}
    .boxShadowBlack{box-shadow:1px 1px 1px black}
    .expThick{padding-left:1px;background-repeat: no-repeat;background-image: linear-gradient(transparent calc(100% - 10px), hsla(31, 97%, 70%, 095) 0px);background-position: 0 100%, 100% 100%;}

    /*--override--*/
    dd{margin-left: 1.25em !important;}

    .green-underlined{position:relative;display:inline-block;}
    .green-underlined::before{content:"";position:absolute;top:21px;bottom:0;left:10px;right:0px;width:114%;height:0;background-color:rgba(0,0,0,0);transform:rotate(-10deg);border-bottom:8px solid #65a30090;border-radius:0 0 74% 47%;}

    /*--gallery--*/
    .collageNolink > img{height:100%;width:100%;object-fit:cover;object-position:center;}

    .outline{outline:1px solid #555;}
    .hrTrans{border:transparent}

    /*shadow*/
    .dSh01{box-shadow: 4px 4px #333}
    .dSh02{border:2px solid #777;border-radius: 0.125rem;box-shadow: 4px 4px #444} 
    .dSh03{border:1px solid black;box-shadow: 4px 4px 0 0 #ccc,8px 8px 0 0 #333,3px 3px 3px 3px transparent}
    .tSh01{text-shadow: 3px 3px orange}
    .neubrut{margin-top:3px;margin-bottom:3px;padding:1px;border:1px solid black;border-radius: 0.125rem;box-shadow: 2px 2px black}


    .bgd01{background:radial-gradient(#4f46e4 15%,transparent 16%),linear-gradient(45deg,transparent 49%,#4f46e4 49% 51%,transparent 51%),linear-gradient(-45deg,transparent 49%,#4f46e4 49% 51%,transparent 51%);background-size:20% 20%}
    .bgd02{background:linear-gradient(135deg,#4f46e480 50%,transparent 0),linear-gradient(-135deg,#4f46e480 50%,transparent 0);background-size:20% 20%}
    .bgd03{background:linear-gradient(45deg,transparent 49%,#4f46e4 49% 51%,transparent 51%),linear-gradient(-45deg,transparent 49%,#4f46e4 49% 51%,transparent 51%);background-size:20% 20%}
    
    .trans100{transition-property:all;transition-duration:100ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans200{transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans300{transition-property:all;transition-duration:300ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans400{transition-property:all;transition-duration:400ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans500{transition-property:all;transition-duration:500ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans1000{transition-property:all;transition-duration:1000ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    .trans1500{transition-property:all;transition-duration:1500ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
    
    /*layout*/ 
    header{border-top:1px solid var(--clrBW60p)}
    .headerDeco{background-repeat: no-repeat;background-size: 14%; background-position: right bottom}
    .headerDecoSml{background-image: url(./../img/color-splash_03_10-right.png)}
    .headerDecoSml08{background-image: url(./../img/color-splash_03_08.png)}
    .headerDecoSml09{background-image: url(./../img/color-splash_03_09.png)}
    .headerDecoSml14{background-image: url(./../img/color-splash_03_14.png)}
    .headerDecoBgd{background-repeat: no-repeat;background-position: right bottom}
        @media (max-width:768px)
            {.headerDecoBgd{background-size: 20%;}}
   
    /*navig*/
    nav>ul>li{margin:0 0.5rem}
    nav a:link{padding:1px 5px}
    nav a:hover{color:#fff;background:#333}   
    nav a::after,a.linkslash::after{content_:'\00B7';padding-left:3px;color:#333;font-weight:500;} 
    nav>ul>li.current{position:relative;display:inline-block;}
    nav>ul>li.current::before{content:"";position:absolute;top:21px;bottom:0;left:0;right:0px;width:114%;height:0;transform:rotate(-10deg);border-bottom:8px solid #65a30047;border-radius:10% 10% 74% 47%;}

    /*details*/
    details > summary{border:none;cursor: pointer}
    details[open] > summary{border: none !important}
    details[open] summary ~ *{animation: sweep .5s ease-in-out}
    @keyframes sweep{0%{opacity: 0; margin-top: -10px} 100%{opacity: 1; margin-top: 0px}}
    details[open], summary[open]{border:black}
    summary::marker{background:white}

    /*breaks*/
    .hrTrans{border:0 solid transparent}

    /*reveal*/
    .gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity;} 

    /*elements*/    
    .landing>a>.logo{width:65%}

/*bgd grad*/

.gradDusk{background:url(../../../img/bgd/treska-hills-hero_01.webp), 
radial-gradient( 64% 70% at 100% 0%,rgba(247,214,98,0.8) 0%,rgba(247,214,98,0.2) 52%,rgba(247,214,98,0) 100% ),linear-gradient( 208deg,rgba(240,66,42,1) 7%,rgba(240,88,42,0.2) 43%,rgba(240,101,42,0) 64% ),radial-gradient( 115% 123% at 0% -15%,rgba(231,79,106,1) 1%,rgba(231,79,106,0.2) 67%,rgba(231,79,106,0) 100% ),linear-gradient( 334deg,rgba(83,208,236,0.8) 0%,rgba(83,208,236,0.2) 20%,rgba(138,137,190,0) 35% ),radial-gradient( 109% 149% at 4% 98%,rgba(27,49,128,1) 0%,rgba(27,49,128,0) 100% ),linear-gradient( 142deg,rgba(78,173,235,1) 19%,rgba(78,173,235,0) 99% );}

.gradNight01{background:url(../../../img/bgd/treska-hills-hero_01.webp),
radial-gradient( 110% 146% at 86% -17%,rgba(22,14,113,1) 0%,rgba(19,13,92,0.26) 55%,rgba(90,35,248,0) 90% ),
linear-gradient( 44deg,rgba(37,169,249,1) 2%,rgba(106,103,227,0) 87% ),
radial-gradient( 102% 103% at 21% 24%,rgba(121,54,174,1) 0%,rgba(121,54,174,0) 100% ),
radial-gradient( 94.51% 124.88% at 96% 94.43%,rgba(65,244,255,0.78) 0%,rgba(131,218,255,0.66) 32%,rgba(99,175,240,0.4) 64%,rgba(43,90,211,0) 100% ),
linear-gradient( 313.04deg,rgba(52,29,101,1) 1%,rgba(96,74,234,1) 100% );
background-size:contain;background-repeat: no-repeat;background-position: bottom right; }

.gradMorning01{background:url(../../../img/bgd/treska-hills-hero_01.webp),
radial-gradient(110.35% 80.79% at 6% 103.92%,rgb(37 169 239 / 21%) 0%,rgb(37 169 239 / 0%) 100%),linear-gradient(169.3deg,rgb(205 249 232 / 0%) 15%,rgb(205 249 232 / 0%) 46%),
radial-gradient(123% 73% at 107% 96%,rgb(255 253 177 / 10%) 20%,rgb(254 228 191 / 31%) 60%,rgb(240 189 208 / 21%) 75%,rgb(255 129 38 / 0%) 100%),
linear-gradient(0deg,rgb(0 204 131 / 10%) 0%,rgb(0 204 131 / 0%) 100%);
background-size:contain;background-repeat: no-repeat;background-position: bottom right;
background-blend-mode:color-burn,hard-light; }

.gradTest02 {
 background:url(../../../img/bgd/treska-hills-hero_01.webp),
 radial-gradient( 110.35% 80.79% at 6% 103.92%,rgba(37,169,239,0.1) 0%,rgba(37,169,239,0.1) 100% ),
 linear-gradient( 169.3deg,rgba(205,249,232,0.1) 15%,rgba(205,249,232,0.1) 46% ),
 radial-gradient( 123% 73% at 107% 96%,rgba(255,253,177,0.1) 20%,rgba(254,228,191,0.1) 60%,rgba(240,189,208,0.1) 75%,rgba(255,129,38,0.1) 100% ),
 linear-gradient( 0deg,rgba(0,204,131,0.1) 0%,rgba(0,204,131,0.1) 100% );
 background-size:cover;background-repeat: no-repeat;background-position: bottom right;
 background-blend-mode:inherit; }

.gradTest01{
background:url(../../../img/bgd/treska-hills-hero_01.webp),
linear-gradient( 143deg,rgba(171, 209, 244, 0.52) 0%,rgba(234, 100, 196, 0) 30%,rgba(246,62,106,0) 56% ),
linear-gradient( 288deg,rgba(217,155,255,0) 33%,rgba(217,170,221,0) 97% )  ; 
background-size:cover;background-repeat: no-repeat;background-position: bottom right; }

.gradContact{background: url(../../../img/bgd/treska-hills-hero_01.webp),
    linear-gradient(-27deg, rgba(146, 118, 83, 0.204) 20%, rgba(224, 244, 234, 0.15) 40%), 
    radial-gradient(at 59% 57%, rgba(85, 117, 98, 0.09) 34%, transparent 50%);    
    background-size:cover;background-repeat: no-repeat;background-position: bottom right;} 
    
.gradWork{background: url(../../../img/bgd/treska-hills-hero_01.webp),
    linear-gradient(334deg, rgba(80, 155, 121, 0.204) 20%, rgba(218, 231, 225, 0.15) 40%);
    background-size:cover;background-repeat: no-repeat;background-position: bottom right;}   

.gradServices{background: url(../../../img/bgd/treska-hills-hero_01.webp),
    linear-gradient(-12deg, rgba(143, 187, 238, 0.27)34%, rgba(217, 241, 239, 0.15) 61%);
    background-size:cover;background-repeat: no-repeat;background-position: bottom right;}

.gradAbout{background: url(../../../img/bgd/treska-hills-hero_01.webp),
    linear-gradient(-20deg, rgba(244, 203, 249, 0.27)34%, rgba(246, 227, 190, 0.15) 61%);
    background-size:cover;background-repeat: no-repeat;background-position: bottom right;}

.gradPrj2{background: url(../../../img/bgd/treska-hills-hero_01.webp),
linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
linear-gradient(-25deg, rgba(194, 194, 194, 1%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%),
radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 84% 65%, hsla(0deg, 0%, 0%, 9%)0, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%);background-size:cover;background-repeat: no-repeat;background-position: bottom right;}

.gradFooter{background: url(../../../img/bgd/treska-hills-hero_01.webp),
linear-gradient(25deg, hsla(0deg, 0%, 88%, -27%) 34%, rgba(75, 62, 120, 0.278) 61%), 
linear-gradient(100deg, rgba(24, 58, 51, 0.428) 9%, rgba(46, 84, 98, 0.455) 34%), 
radial-gradient(at 5% 5%, rgba(47, 49, 95, 0.494) 0, rgba(40, 89, 82, 0.121) 50%),
radial-gradient(at 69% 69%, rgba(96, 62, 127, 0.09) 0, hsla(0deg, 0%, 51%, 0%) 50%), 
radial-gradient(at 65% 25%, rgba(36, 52, 77, 0.09) 0, transparent 55%), radial-gradient(at 84% 65%, rgba(47, 28, 58, 0.42)0, transparent 50%), radial-gradient(at 76% 53%, rgba(5, 8, 11, 0.29)0, transparent 44%);background-size:cover;background-repeat: no-repeat;background-position: bottom right;
background-blend-mode:color-dodge, difference, exclusion;  }

.aniBgd{
    color:var(--clrBW90p);
    background-color:var(--clrBW15p);
    background-image: 
    radial-gradient(at 65% 75%, var(--clrBW10p) 0, transparent 100%),
    radial-gradient(at 65% 42%, var(--clrBW40p) 0, transparent 50%), 
    radial-gradient(at 30% 35%, var(--clrBW05p) 0, transparent 35%), 
    radial-gradient(at 34% 57%, var(--clrBW10p) 0, transparent 50%), 
    radial-gradient(at 76% 53%, var(--clrBW00p) 0, transparent 64%); } 

.aniBgdLite{
    color:var(--clrBW80p);
    background-color:var(--clrBW20p);
    background-image: 
    radial-gradient(at 65% 75%, var(--clrBW30p) 0, transparent 100%),
    radial-gradient(at 65% 42%, var(--clrBW40p) 0, transparent 50%), 
    radial-gradient(at 30% 35%, var(--clrBW25p) 0, transparent 35%), 
    radial-gradient(at 34% 57%, var(--clrBW20p) 0, transparent 50%), 
    radial-gradient(at 76% 53%, var(--clrBW10p) 0, transparent 64%); } 

.xsHidden{display:block}
    @media (max-width: 475px)
        {.xsHidden {display:none} }