/* official online bought font */
@font-face {
  font-family: "HelveticaNeueLTPro-Roman";
  src: url('../font/HelveticaNeueLTProRoman.woff2') format('woff2'), 
  url('../font/HelveticaNeueLTProRoman.woff') format('woff');
  font-display: swap;
  descent-override: 10%;
}

/* Local version */
@font-face {
  font-family: "font-primary-local";
  font-style: normal;
  font-weight: 700;
  src: local("Helvetica Neue");
  font-display: swap;
}

body:not(.wp-admin), /* frontend */
.edit-post-visual-editor .editor-styles-wrapper /* backend - admin */
{
  font-family: "font-primary-local", "HelveticaNeueLTPro-Roman";
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  font-weight: 400;
  font-size: 16px; 
  line-height: 1.6;
  margin: 0; 
  padding: 0; 
}

/* body set, lists, paragraphs, img's */
header ul, header li{ list-style: none; margin: 0 }
p { margin: 0 0 .8em; padding: 0 }
/* empty paragraphs height fix */
p:empty:before { content: "\200b" }
/* all images responsive - fill container */
img{  max-width: 100%; height: auto }

/* 0.0) fix some BLOCK classes */
.wp-block-columns{ margin-bottom: 12px }
.blocks-gallery-item figcaption{ padding: 0 }
.wp-block-columns.has-background{ padding: inherit }
.wp-block-gallery .blocks-gallery-item, .wp-block-image{ margin: 0 }
.is-style-outline .wp-block-button__link{ border-width: 1px }

figure{  margin: 0 }
/* full width class that builder spit out - TODO - backend is messy -not! :) */
.alignwide, 
.width100vw{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.width80vw{
  width: 80vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -40vw;
  margin-right: -40vw;
}
.dashicons, dashicons:before{ font-family: dashicons; display: inline-block;}


/* header fixed */
header.fixed{ position: sticky; top: 0; z-index: 99  }
/* this is native GB image that can have like featured image caption in the middle of it - big copy 
   Just add .bigimage class on image that needs this in editor
*/
.bigimage figure figcaption{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%) 
}

#collapse-button{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;  
}


/* -----------------------------------------------------------------
  2) general classes for `nice` layout resets :)
 ----------------------------------------------------------------- */

/* z-index for page. note -> hamburger overlay has z-index 20 - toggler - 30 */
header { width: 100% }
header.overlay{  position: fixed; z-index: 12 }
header.alpha{  background-color: rgb(0,0,0,0) }
main, footer{ z-index: 10;  } 

/*general default layout stuff*/

.flex { display: flex; flex-wrap: wrap; margin: 0 -10px }
.flex >* { flex-basis: 280px; flex-grow: 1; margin: 10px }
.flexspace { display: flex; justify-content: space-between }


/* -----------------------------------------------------------------
  4) hamburger panel (modal overlay with mobile menu etc..)
 ----------------------------------------------------------------- */
.hamburger{display: block;position: fixed;z-index: 20;width: 100vw;height: 100vh;top: -100vh; left: 0; overflow-y: auto;font-weight: 300;font-size: 32px;line-height: normal; transition: all .3s ease-out }
/** ( font white - background color - black.. :) )
  wob - white on black
  bow - black on white 
*/
.hamburger.wob{ background-color: black }
.hamburger.bow{ background-color: white }

/* TOGGLER BUTTON */
.ham{  } /*position: absolute; right: 0; top: 0 */
/* menu icon */
.ham .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 25px 20px; position: relative; user-select: none; z-index: 30 }
.ham .menu-icon .navicon {display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px }
.ham .menu-icon .navicon:before,
.ham .menu-icon .navicon:after { content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100% }
/* HELPER CLASSES 
 -----------------------------------------------------------------
 white / black theme navigation 
 ----------------------------------------------------------------- */
.ham.wob .menu-icon .navicon { background-color: white }
.ham.bow .menu-icon .navicon { background-color: black }

.ham.wob .menu-icon .navicon:before,
.ham.wob .menu-icon .navicon:after { background-color: white }
.ham.bow .menu-icon .navicon:before,
.ham.bow .menu-icon .navicon:after { background-color: black }

.ham .menu-icon .navicon:before { top: 5px }
.ham .menu-icon .navicon:after { top: -5px }
/* mobile menu btn (right with 3 bars) */
.ham .menu-btn {  display: none }
.ham .menu-btn:checked ~ .hamburger { top: 0 }
.ham .menu-btn:checked ~ .menu-icon .navicon { background: transparent }
.ham .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg) }
.ham .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg) }
.ham .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.ham .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0 }


/* -----------------------------------------------------------------
  PINS (lists as menus, or on page some horizontal menus)
 ----------------------------------------------------------------- */
.pins{ }
.pins >* {
  position: relative;
  white-space: nowrap;
  float: left }
.pins a{  padding: .45em .75em ; display: inline-block; cursor: pointer }
.pins >*:last-child a{ padding-right: 0  }

/* -----------------------------------------------------------------
  DOWN ARROW css class
 ----------------------------------------------------------------- */
.downArrow{
  position: absolute;
  top: 50%;
  right: 100px;
}
.bounce { animation: bounce 3s infinite }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
  40% { transform: translateY(-30px) }
  60% { transform: translateY(-15px) }
}



body{ margin: 0; padding: 0; font-size: 20px; overflow-x: hidden; line-height: 1.6 }




/*  >>>>>>>>>>>>>>  */
/*  >>>>>>>>>>>>>>  */
/*  >>>>>>>>>>>>>>  */

/*     3LET CSS     */

/*  >>>>>>>>>>>>>>  */
/*  >>>>>>>>>>>>>>  */
/*  >>>>>>>>>>>>>>  */


/*
  3 letter rules:
    - prop | value has max 3 letters: 
        color => `col`
        white => `whi`
    - value is two dashes separated from prop name: 
        color: white => `col--whi`
        color: black => `col--bla`
    - if prop | value has less then 3 letters, use what we got:
        `background-repeat: no-repeat` > `bac-rep--no-rep`
    - multi word for either for prop | value is single dash separated: 
        `font-size` > `fon-siz--05`
        `list-item` > `lis-ite--non`
    - color & background color we only got 3: 
        - white 
        - black
        - inherit (to be able to revert to parent)
        - (plus transparent maybe?)
    - if value has unit: px, em etc, we ditch it
        column: 200px 2  > `col--200-2`
        font-size: 2em   > `fon-siz--20`
        font-weight: 400 > `fon-wei--400`

    Layout defs
    We deffined most common weight / heights and they can be used for fast layout prototypes:

    - main layout (padding, margins etc..) units are in em (root font size) - use fnt siz to ch it
    - only most used props are layed out here, and not all!
    - if val has some range like 1-100 we devide it to 10 peaces
        - .opa--one { opacity: .10 } ==== 10, 20, 30,... --one, --two, --thr, --fou ...
        - .z-ind--thr{ z-index: 30 } ==== 10, 20, 30,... --one, --two, --thr, --fou ...
    - when decimales are use like 0.6em use VAL as 2 dig rep 
        - fon-wei--400   /    font-weight: 400;
        - fon-siz--06    /    font-size: 0.6em;
        - fon-siz--15    /    font-size: 1.5em;
        - col--350-3     /    columns: 350px 3;

 */


/* bckg color */
.bac-col--whi{ background-color: white } 
.bac-col--bla{ background-color: black } 
.bac-col--tra{ background-color: transparent }
/* color: white | black */
.col--whi{ color: white } 
.col--bla{ color: black }
.col--inh{ color: inherit }
/* columns */
.col--200-2{ columns: 200px 2 } .col--350-2{ columns: 350px 2 }
.col--200-3{ columns: 200px 3 } .col--350-3{ columns: 350px 3 }
.col--200-4{ columns: 200px 4 } .col--350-4{ columns: 350px 4 }
.col--200-5{ columns: 200px 5 } .col--350-5{ columns: 350px 5 }
.col--200-6{ columns: 200px 6 } .col--350-6{ columns: 350px 6 }
.col-gap--0{ column-gap: 0 }
.col-gap--1{ column-gap: 1em }
.col-gap--2{ column-gap: 2em }
[class*="col--2"]>*,
[class*="col--3"]>*{ break-inside: avoid; page-break-inside: avoid; margin-bottom: 1em }
/* cursors */
.cur--poi{ cursor: pointer } 
/* displays */
.dis--non{ display: none }
.dis--blo{ display: block}
.dis--gri{ display: grid }
.dis--fle{ display: flex }
.dis--tab{ display: table}
.dis--inl-blo{ display: inline-block }
.dis--lis-ite{ display: list-item }
/* floats */
.flo--rig{ float: right } 
.flo--lef{ float: left } 
.flo--non{ float: none }
/* font sizes 0.6rem - 2rem */
.fon-siz--05{ font-size: 0.5em } .fon-siz--06{ font-size: 0.6em }
.fon-siz--07{ font-size: 0.7em } .fon-siz--08{ font-size: 0.8em }
.fon-siz--09{ font-size: 0.9em } .fon-siz--10{ font-size: 1.0em } 
.fon-siz--11{ font-size: 1.1em } .fon-siz--12{ font-size: 1.2em } 
.fon-siz--13{ font-size: 1.3em } .fon-siz--14{ font-size: 1.4em } 
.fon-siz--15{ font-size: 1.5em } .fon-siz--16{ font-size: 1.6em } 
.fon-siz--17{ font-size: 1.7em } .fon-siz--18{ font-size: 1.8em } 
.fon-siz--19{ font-size: 1.9em } .fon-siz--20{ font-size: 2.0em }
/* font weight */
.fon-wei--100{ font-weight: 100 } .fon-wei--200{ font-weight: 200 }
.fon-wei--300{ font-weight: 300 } .fon-wei--400{ font-weight: 400 }
.fon-wei--500{ font-weight: 500 } .fon-wei--600{ font-weight: 600 }
.fon-wei--700{ font-weight: 700 } .fon-wei--800{ font-weight: 800 }
.fon-wei--900{ font-weight: 900 }

/* responsive fluid font by screen width => with brake! */
.fon-fam--mono{ font-family: monospace }
.res-txt, p.res-txt, .res-txt>*{ font-size: calc(1.05rem + 3.4vw) !important }
@media (min-width: 1300px){ .res-txt, p.res-txt, .res-txt>*{ font-size: 70px !important }  }
/* font style */
.fon-sty--ita{ font-style: italic }
.fon-sty--nor{ font-style: normal }


/* simple grid classes */
[class*=gri--]{ display: grid; grid-gap: 10px }
.gri--100{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) }
.gri--200{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.gri--300{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.gri--400{ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) }
.gri--500{ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) }
/* grid gap */
.gri-gap--0{ grid-gap: 0 }
.gri-gap--1{ grid-gap: 1em }
.gri-gap--2{ grid-gap: 2em }
.gri-gap--3{ grid-gap: 3em }
.gri-gap--4{ grid-gap: 4em }
.gri-gap--5{ grid-gap: 5em }
/* line heights */
.lin-hei--10{ line-height: 1em }
.lin-hei--11{ line-height: 1.1em }
.lin-hei--12{ line-height: 1.2em }
.lin-hei--13{ line-height: 1.3em }
.lin-hei--14{ line-height: 1.4em }
.lin-hei--15{ line-height: 1.5em }
.lin-hei--20{ line-height: 2em }
/* some weights - heights */
.max-wid--50 { max-width: 50vw }
.max-wid--100{ max-width:100vw }
.max-wid--500{ max-width:500px }
.max-hei--50 { max-height: 50vh }
.max-hei--100{ max-height:100vh }
.min-hei--50 { min-height: 50vh }
.min-hei--100{ min-height: 100vh }
.min-hei--500{ min-height: 500px }
.max-48em{ max-width: 48em; margin: auto }
.max-58em{ max-width: 58em; margin: auto }
.max-68em{ max-width: 68em; margin: auto }
/* opacity */
.opa--1{ opacity: 0.1 } .opa--2{ opacity: 0.2 }
.opa--3{ opacity: 0.3 } .opa--4{ opacity: 0.4 }
.opa--5{ opacity: 0.5 } .opa--6{ opacity: 0.6 }
.opa--7{ opacity: 0.7 } .opa--8{ opacity: 0.8 }
.opa--9{ opacity: 0.9 } .opa--10{ opacity: 1 }
/* overflows */
.ove--hid{ overflow: hidden }
.ove--scr{ overflow: scroll }
/* positions */
.pos--fix{ position: fixed } 
.pos--rel{ position: relative } 
.pos--abs{ position: absolute } 
.pos--sti{ position: sticky } 
.pos--inh{ position: inherit }
/* text aligns */
.tex-ali--rig{ text-align: right } 
.tex-ali--lef{ text-align: left } 
.tex-ali--cen{ text-align: center }
/* text deco */
.tex-dec--und{ text-decoration: underline }
.tex-dec--non, .tex-dec--non a{ text-decoration: none }
/* animate all properties */
.tra--all > *{ transition: all 0.2s ease-out }

/* visibility */
.vis--hid{ visibility: hidden }
.vis--vis{ visibility: visible }
.vis--des{ display: none } /* visible on desktop */
.vis--pho{ display: inline-block  } /* visible on phone */
@media (min-width: 786px){
  .vis--des{ display: inline-block }
  .vis--pho{ display: none }
  .flo--rig-des{ float: right }
  .flo--lef-des{ float: left }
  .flo--rig, .flo--lef{ float: none }
}
/* z-index */
.z-ind--10{ z-index: 10 }
.z-ind--20{ z-index: 20 }
.z-ind--30{ z-index: 30 }
.z-ind--40{ z-index: 40 }
.z-ind--50{ z-index: 50 }


/* % % % % % % % %  paddings   % % % % % % % % %  */
.pad-top--0{padding-top:0em}.pad-rig--0{padding-right:0em}.pad-bot--0{padding-bottom: 0em}.pad-lef--0{padding-left:0em}
.pad-top--1{padding-top:1em}.pad-rig--1{padding-right:1em}.pad-bot--1{padding-bottom: 1em}.pad-lef--1{padding-left:1em}
.pad-top--2{padding-top:2em}.pad-rig--2{padding-right:2em}.pad-bot--2{padding-bottom: 2em}.pad-lef--2{padding-left:2em}
.pad-top--3{padding-top:3em}.pad-rig--3{padding-right:3em}.pad-bot--3{padding-bottom: 3em}.pad-lef--3{padding-left:3em}
.pad-top--4{padding-top:4em}.pad-rig--4{padding-right:4em}.pad-bot--4{padding-bottom: 4em}.pad-lef--4{padding-left:4em}
.pad-top--5{padding-top:5em}.pad-rig--5{padding-right:5em}.pad-bot--5{padding-bottom: 5em}.pad-lef--5{padding-left:5em}
.pad--0{padding: 0}.pad--1{padding: 1em}.pad--2{padding: 2em}.pad--3{padding: 3em}.pad--4{padding: 4em}.pad--5{padding: 5em}
/* margins */
.mar-top--0{margin-top:0em}.mar-rig--0{margin-right:0em}.mar-bot--0{margin-bottom: 0em}.mar-lef--0{margin-left:0em}
.mar-top--1{margin-top:1em}.mar-rig--1{margin-right:1em}.mar-bot--1{margin-bottom: 1em}.mar-lef--1{margin-left:1em}
.mar-top--2{margin-top:2em}.mar-rig--2{margin-right:2em}.mar-bot--2{margin-bottom: 2em}.mar-lef--2{margin-left:2em}
.mar-top--3{margin-top:3em}.mar-rig--3{margin-right:3em}.mar-bot--3{margin-bottom: 3em}.mar-lef--3{margin-left:3em}
.mar-top--4{margin-top:4em}.mar-rig--4{margin-right:4em}.mar-bot--4{margin-bottom: 4em}.mar-lef--4{margin-left:4em}
.mar-top--5{margin-top:5em}.mar-rig--5{margin-right:5em}.mar-bot--5{margin-bottom: 5em}.mar-lef--5{margin-left:5em}
/* neg margins */
.mar-top---1{margin-top:-1em}.mar-rig---1{margin-right:-1em}.mar-bot---1{margin-bottom: -1em}.mar-lef---1{margin-left:-1em}
.mar-top---2{margin-top:-2em}.mar-rig---2{margin-right:-2em}.mar-bot---2{margin-bottom: -2em}.mar-lef---2{margin-left:-2em}
.mar-top---3{margin-top:-3em}.mar-rig---3{margin-right:-3em}.mar-bot---3{margin-bottom: -3em}.mar-lef---3{margin-left:-3em}
.mar-top---4{margin-top:-4em}.mar-rig---4{margin-right:-4em}.mar-bot---4{margin-bottom: -4em}.mar-lef---4{margin-left:-4em}
.mar-top---5{margin-top:-5em}.mar-rig---5{margin-right:-5em}.mar-bot---5{margin-bottom: -5em}.mar-lef---5{margin-left:-5em}

.mar--0{margin: 0}.mar--1{margin: 1em}.mar--2{margin: 2em}.mar--3{margin: 3em}.mar--4{margin: 4em}.mar--5{margin: 5em}
.mar---1{margin: -1em}.mar---2{margin: -2em}.mar---3{margin: -3em}.mar---4{margin: -4em}.mar---5{margin: -5em}
.mar--aut{margin: 0 auto}

/* short position with absolute positioning  */
.abs--tr{ top:0; right:0 } .abs--tl{ top:0; left:0 }
.abs--br{ bottom:0; right:0 } .abs--bl{ bottom:0; left:0 }


/* clearfix */
.cf::after, .cle--bot { content: ""; clear: both; display: table }

/* advance mover --> parent moves nth child - right | left */
.nr1-rig >*:nth-child(1){ float:right }
.nr2-rig >*:nth-child(2){ float:right }
.nr3-rig >*:nth-child(3){ float:right }
.nr1-lef >*:nth-child(1){ float: left }
.nr2-lef >*:nth-child(2){ float: left }
.nr3-lef >*:nth-child(3){ float: left }

/* advance txt mover --> parent moves nth child - right | left | center */
.nr1-txt-rig >*:nth-child(1){ text-align:right }
.nr2-txt-rig >*:nth-child(2){ text-align:right }
.nr3-txt-rig >*:nth-child(3){ text-align:right }
.nr1-txt-lef >*:nth-child(1){ text-align: left }
.nr2-txt-lef >*:nth-child(2){ text-align: left }
.nr3-txt-lef >*:nth-child(3){ text-align: left }
.nr1-txt-cen >*:nth-child(1){ text-align:center}
.nr2-txt-cen >*:nth-child(2){ text-align:center}
.nr3-txt-cen >*:nth-child(3){ text-align:center}