/**
 * 1) mini reset + css position helper inline
 * 2) general default layout 
 * 3) wp block columns layout
 * 4) hamburger - mobile menu 
 * 5) tiny slider inline css
 * 6) helper classes
 */


/* -----------------------------------------------------------------
  0) example code for building blocks (admin & frontend incluced!)
 ----------------------------------------------------------------- */

/* header page > HEADER

  [menushortcode menu="main" menuclass="pins pt10" containerclass="visible-desktop fr"]

    - menu="main" => name of the menu in admin > Menus
    - menuclass="pins pt10" => pins class displays links inline with padding and pt10 holds vertical align
    - containerclass="visible-desktop fr" => only visible on desktops, fr => floats right

  HAMBURGER ( 3 lines + overlay div )

  <div class="ham bow visible-phones">
    <input class="menu-btn" type="checkbox" id="menu-btn">
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    [menushortcode menu="main" menuclass="wrapper p50 txtblack dlist" containerclass="hamburger bow p50"]
  </div>
    
    - class="ham bow visible-phones" => 
        - ham => class that displays 3 bars!
        - bow => 'black on white' > letters black, background white -- there is also wob :)
        - visible-phones => on smaller devices is shown

  Build Masonry on back with

  [getitems cpt="portfolio" wrapper="masonry" gap="10" mingap="10"  maxitems="20" width="320" order="title"]


*/




/* -----------------------------------------------------------------
  1) mini reset
 ----------------------------------------------------------------- */

html { overflow-x: hidden } /* fuck that horiz scrollbar */
*{ margin: 0; padding: 0; box-sizing: content-box; position: relative }
img{ max-width: 100%; height: auto; display: block; border: none }
ul, ol, li{ list-style: none; display: inline-block }
a{ text-decoration: none; border: 0 }
*{ color: black; font-size: 100% } /* to be able to use inherit in nested elems if color is diff */
button{  border-width: 0 }

/* ALL HEADERS */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{ margin: 0 0 .7em }
h1 { font-size: 1.5em } h2 { font-size: 1.313em }
h3 { font-size: 1.125em } h4 { font-size: 1em }
h5 { font-size: .875em } h6 { font-size: .75em }


/* 
  This is little css helper for frontend layout corrections,, 
  use it fast and for inline on elements, like this:

  <div class="pt20">I'm divider</div> 

  it will add 20px top padding. that's it :)  */

/* % % % % % % % %  paddings   % % % % % % % % %  */


.pt5{padding-top: 5px}.pr5{padding-right: 5px}
.pb5{padding-bottom: 5px}.pl5{padding-left: 5px}

.pt10{padding-top: 10px}.pr10{padding-right: 10px}
.pb10{padding-bottom: 10px}.pl10{padding-left: 10px}

.pt15{padding-top: 15px}.pr15{padding-right: 15px}
.pb15{padding-bottom: 15px}.pl15{padding-left: 15px}

.pt20{padding-top: 20px}.pr20{padding-right: 20px}
.pb20{padding-bottom: 20px}.pl20{padding-left: 20px}

.pt30{padding-top: 30px}.pr30{padding-right: 30px}
.pb30{padding-bottom: 30px}.pl30{padding-left: 30px}

.pt40{padding-top: 40px}.pr40{padding-right: 40px}
.pb40{padding-bottom: 40px}.pl40{padding-left: 40px}

.pt50{padding-top: 50px}.pr50{padding-right: 50px}
.pb50{padding-bottom: 50px}.pl50{padding-left: 50px}

.pnone{padding: 0px}
.p5{padding: 5px}
.p10{padding: 10px}
.p15{padding: 15px}
.p20{padding: 20px}
.p30{padding: 30px}
.p40{padding: 40px}
.p50{padding: 50px}

/* % % % % % % % %  margins   % % % % % % % % %  */

.mt5{margin-top: 5px}.mr5{margin-right: 5px}
.mb5{margin-bottom: 5px}.ml5{margin-left: 5px}

.mt10{margin-top: 10px}.mr10{margin-right: 10px}
.mb10{margin-bottom: 10px}.ml10{margin-left: 10px}

.mt15{margin-top: 15px}.mr15{margin-right: 15px}
.mb15{margin-bottom: 15px}.ml15{margin-left: 15px}

.mt20{margin-top: 20px}.mr20{margin-right: 20px}
.mb20{margin-bottom: 20px}.ml20{margin-left: 20px}

.mt30{margin-top: 30px}.mr30{margin-right: 30px}
.mb30{margin-bottom: 30px}.ml30{margin-left: 30px}

.mt40{margin-top: 40px}.mr40{margin-right: 40px}
.mb40{margin-bottom: 40px}.ml40{margin-left: 40px}

.mt50{margin-top: 50px}.mr50{margin-right: 50px}
.mb50{margin-bottom: 50px}.ml50{margin-left: 50px}

.mnone{ margin: 0px} 
.m5{ margin: 5px} 
.m10{ margin: 10px} .m15{ margin: 15px} .m20{ margin: 20px}
.m30{ margin: 30px} .m40{ margin: 40px} .m50{ margin: 50px}

/* % % % % % % % %  negative margins and paddings  % % % % % % % % %  */

.mt-5{margin-top: -5px}.mr-5{margin-right: -5px}
.mb-5{margin-bottom: -5px}.ml-5{margin-left: -5px}

.mt-10{margin-top: -10px}.mr-10{margin-right: -10px}
.mb-10{margin-bottom: -10px}.ml-10{margin-left: -10px}

.mt-15{margin-top: -15px}.mr-15{margin-right: -15px}
.mb-15{margin-bottom: -15px}.ml-15{margin-left: -15px}

.mt-20{margin-top: -20px}.mr-20{margin-right: -20px}
.mb-20{margin-bottom: -20px}.ml-20{margin-left: -20px}

.mt-30{margin-top: -30px}.mr-30{margin-right: -30px}
.mb-30{margin-bottom: -30px}.ml-30{margin-left: -30px}

.mt-40{margin-top: -40px}.mr-40{margin-right: -40px}
.mb-40{margin-bottom: -40px}.ml-40{margin-left: -40px}

.mt-50{margin-top: -50px}.mr-50{margin-right: -50px}
.mb-50{margin-bottom: -50px}.ml-50{margin-left: -50px}

.m-5{ margin: -5px} 
.m-10{ margin: -10px} .m-15{ margin: -15px} .m-20{ margin: -20px}
.m-30{ margin: -30px} .m-40{ margin: -40px} .m-50{ margin: -50px}

/* % % % % % % % %  percentage layout  % % % % % % % % %  */

.pt5p{padding-top: 5%}.pr5p{padding-right: 5%}
.pb5p{padding-bottom: 5%}.pl5p{padding-left: 5%}

.pt10p{padding-top: 10%}.pr10p{padding-right: 10%}
.pb10p{padding-bottom: 10%}.pl10p{padding-left: 10%}

.pt15p{padding-top: 15%}.pr15p{padding-right: 15%}
.pb15p{padding-bottom: 15%}.pl15p{padding-left: 15%}

.pt20p{padding-top: 20%}.pr20p{padding-right: 20%}
.pb20p{padding-bottom: 20%}.pl20p{padding-left: 20%}

.pt30p{padding-top: 30%}.pr30p{padding-right: 30%}
.pb30p{padding-bottom: 30%}.pl30p{padding-left: 30%}

.pt40p{padding-top: 40%}.pr40p{padding-right: 40%}
.pb40p{padding-bottom: 40%}.pl40p{padding-left: 40%}

.pt50p{padding-top: 50%}.pr50p{padding-right: 50%}
.pb50p{padding-bottom: 50%}.pl50p{padding-left: 50%}
/* % % % % % % % %  percentage layout  % % % % % % % % %  */

/* % % % % % % % %  position   % % % % % % % % %  */

.rel{ position: relative }
.ab{ position: absolute }
.abtr{ top:0; right:0 }
.abtl{ top:0; left:0 }
.abbr{ bottom:0; right:0 }
.abbl{ bottom:0; left:0 }
.dlist, .dlist li{  display: list-item }

/* % % % % % % % %  position   % % % % % % % % %  */



/* -----------------------------------------------------------------
  2) general classes for layout
 ----------------------------------------------------------------- */
body{
	font-size: 16px;
  line-height: 1.6
}
/* 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*/
.wrapper{
	max-width: 960px;
	margin: 0 auto; 
  padding: 0 1% }
.wrapper-fluid {
  margin: 0 auto;
  width: 95%;
  padding: 0 1%;
  overflow-y: hidden }
.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;  
}

/* simple grid classes */
[class^=grid]{ display: grid; grid-gap: 10px }
.grid100{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) }
.grid150{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.grid200{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.grid250{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.grid300{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.grid350{ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) }
.grid400{ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) }
.grid450{ grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)) }
.grid500{ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) }

.gridhalf{  grid-column: span 2 }
.gridhalfrow{ grid-row: span 2 }

/* predefined columns layout widths */
.col2{ columns: 350px 2 } .col3{ columns: 350px 3 }
.col4{ columns: 350px 4 } .col5{ columns: 350px 5 }
.col6{ columns: 350px 6 } .col7{ columns: 350px 7 }
.col8{ columns: 350px 8 } .col9{ columns: 350px 9 }
.colspan{ column-span: all } /* brake span col layout ==>> full container! */
/* columns gaps */
.colgap2{ column-gap: 2em }
.colgap4{ column-gap: 4em }
.colgap6{ column-gap: 6em }
.colgap8{ column-gap: 8em }
.colgap10{ column-gap: 10em }

[class^="col"]>*{ break-inside: avoid; page-break-inside: avoid }

/* isotope - masonry -simple one fits ok! */
[class^=masonry]{ position: relative;  }
[class^=masonry] > *{ position: absolute }


/* -----------------------------------------------------------------
  3) wp block columns layout
 ----------------------------------------------------------------- */
.wp-block-columns { display: flex; flex-wrap: wrap }
@media (min-width:782px) {
  .wp-block-columns { flex-wrap: nowrap }
}
.wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word }
@media (max-width:599px) {
  .wp-block-column { flex-basis: 100% !important }
}
@media (min-width:782px) {
  .wp-block-column { flex-basis: 0; flex-grow: 1 }
  .wp-block-column[style] { flex-grow: 0 }
  .wp-block-column:not(:first-child) { margin-left: 32px }
}
.wp-block-columns.are-vertically-aligned-top { align-items: flex-start }
.wp-block-columns.are-vertically-aligned-center { align-items: center }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end }
.wp-block-column.is-vertically-aligned-top { align-self: flex-start }
.wp-block-column.is-vertically-aligned-center { -ms-grid-row-align: center; align-self: center }
.wp-block-column.is-vertically-aligned-bottom { align-self: flex-end }
.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top { width: 100% }




/* -----------------------------------------------------------------
  4) hamburger panel (modal overlay with mobile menu etc..)
 ----------------------------------------------------------------- */
.hamburger{
  display: block;
  position: fixed;
  z-index: 20;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow-y: auto;
  font-weight: 300;
  font-size: 32px;
  line-height: normal;
  opacity: 0;
  transition: all .4s }

/** ( font white - background color - black.. :) )
  wob - white on black
  bow - black on white 
*/

.hamburger.wob{   background-color: black;  }
.hamburger.bow{   background-color: white;  }

/* main nav CLASS - that breaks columns to not collapse on mobile! */
.mainnav .wp-block-column{ flex-basis: inherit !important }

/* 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% }


/* -----------------------------------------------------------------
  5) tiny slider css - inline
 ----------------------------------------------------------------- */
.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}

/* slider - fixed */
.tns-inner{ overflow: hidden }
.tns-ovh{ z-index: 2 } /* this is slider node */
/*  slider < > arrows */
.tns-controls{ position: absolute; top: 50%; width: 100%; z-index: 3 }
.tns-controls button{  text-indent: -10000em; border: 0; background-color: transparent  }
.tns-controls [data-controls="prev"]::before{ content: '<'; text-indent: inherit }
.tns-controls [data-controls="next"]{ position: absolute; right: 0 }
.tns-controls [data-controls="next"]::before{ content: '>'; text-indent: inherit }
/* auto start STOP / START button */
.tns-controls + button{ display: none }
/*  slider - pins - bellow  */
.tns-nav{ position: absolute; bottom: 15px; z-index: 20; left: 50%; transform: translateX(-50%);  }
.tns-nav button{  width: 8px; height: 8px; background-color: transparent; border-radius: 100%; border: 1px solid white; margin: 0 4px;  }
.tns-nav button[class="tns-nav-active"]{ background-color: white  }

/* slider captions */
.slider figure figcaption{
  position: absolute;
  left: 50px; bottom: 50px;
  width: calc(100% - 100px) }



/* 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 {
  visibility: visible;
  opacity: 1 }
.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 }



/* -----------------------------------------------------------------
  RESPONSIVE HELPER CLASSES
 ----------------------------------------------------------------- */
.visible-desktop{ display: none }
.visible-phones{ display: inline-block  }
.fr,.fright{ float: right }
.fl,.fleft{ float: left }
/* advanced mover --> parent moves nth child */
.nr1r >*:nth-child(1){ float:right }
.nr2r >*:nth-child(2){ float:right }
.nr3r >*:nth-child(3){ float:right }
.nr1l >*:nth-child(1){ float: left }
.nr2l >*:nth-child(2){ float: left }
.nr3l >*:nth-child(3){ float: left }

.nr1tr >*:nth-child(1){ text-align:right }
.nr2tr >*:nth-child(2){ text-align:right }
.nr3tr >*:nth-child(3){ text-align:right }
.nr1tl >*:nth-child(1){ text-align: left }
.nr2tl >*:nth-child(2){ text-align: left }
.nr3tl >*:nth-child(3){ text-align: left }


@media (min-width: 782px){
  .visible-desktop{ display: inline-block }  
  .visible-phones{ display: none }
  .fr-desktop{ float: right }
  .fl-desktop{ float: left }
}

/* -----------------------------------------------------------------
  HELPER CLASSES - misc
 ----------------------------------------------------------------- */
/* minimal clearfix */
.group::after, .cf::after { 
  content: "";
  clear: both;
  display: table }
/* white | black text (with child links in it) */
.txtwhite, .txtwhite a{ color: white }
.txtblack, .txtblack a{ color: black }
.txtinherit, .txtinherit a{ color: inherit }

/* full width class that builder spit out */
.alignfull{
  transform: translateX(calc(50vw - 50%));
  margin: 0px calc(50% - 50vw) }

/* hidden */
.hidden{ display: none }
.vhidden{ position:absolute; left:-10000em  }


/* -----------------------------------------------------------------
  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 }
.pins >*:last-child a{ padding-right: 0  }
.pins a:hover{ background-color: #e3e3e3 }