/* ------------------------------------------------------------------------- *
 *  Base Structure
/* ------------------------------------------------------------------------- */

/*  base : layout
/* ------------------------------------ */
#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main {
  background-color: #fff!important;
  position: relative;
  width: 100%;/* <= fixes post content problem in https://github.com/presscustomizr/hueman/issues/839 */
}
.sidebar-expanding .main, .sidebar-collapsing .main { overflow: hidden;}

.main-inner { z-index: 1; position: relative; min-height: 600px; /* instead of sticky footer */ }
.content {
  width: 100%;
  position: relative;
  -moz-transition: -moz-transform, .35s ease;
  -webkit-transition: -webkit-transform, .35s ease;
  -o-transition: -o-transform, .35s ease;
  transition: transform, .35s ease;
}
.hu-pad { padding: 30px 30px 20px; }

/* boxed */
.boxed #wrapper { max-width: 1380px; margin: 0 auto;
-webkit-box-shadow: 6px 0 0 rgba(0,0,0,0.04), -6px 0 0 rgba(0,0,0,0.04);
box-shadow: 6px 0 0 rgba(0,0,0,0.04), -6px 0 0 rgba(0,0,0,0.04);
position: relative;}
.boxed .container { padding: 0; }
.boxed #page { background: #eaeaea; padding-bottom: 1px; }

/*  base : layout columns
/* ------------------------------------ */
.container-inner > .main::before,
.container-inner > .main::after { background-color: #f0f0f0;  position: absolute; top: 0; bottom: 0; content: ''; display: block; z-index: 0;}

/* 2 column, content left */
.col-2cl .main-inner { padding-right: 340px; }
.col-2cl .container-inner > .main::after { right: 0; padding-right: 340px; }
.col-2cl .sidebar.s1 { float: right; margin-right: -340px; }
.col-2cl .content { float: left; }

/* 2 column, content right */
.col-2cr .main-inner { padding-left: 340px; }
.col-2cr .container-inner > .main::before { left: 0; padding-left: 340px; }
.col-2cr .sidebar.s1 { float: left; margin-left: -340px; }
.col-2cr .content { float: right; }

/* 3 column, content middle */
.col-3cm .container-inner > .main::before { left: 0; padding-left: 340px; }
.col-3cm .container-inner > .main::after { right: 0; padding-right: 260px; }
.col-3cm .main-inner { padding-left: 340px; padding-right: 260px; }

.col-3cm .sidebar.s1 { float: left; margin-left: -340px; }
.col-3cm .sidebar.s2 { float: right; margin-right: -260px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }

/* fix chrome bug in nov 2019 for https://github.com/presscustomizr/hueman/issues/834 */
.col-3cm { overflow-x: hidden }


/* 3 column, content left */
.col-3cl .main { background-image: none; }
.col-3cl .main-inner { padding-right: 600px; }
.col-3cl .container-inner > .main::after { right: 0px; padding-right: 600px; }

.col-3cl .sidebar.s1 { float: right; margin-right: -600px; }
.col-3cl .sidebar.s2 { float: right; margin-right: -260px; }
.col-3cl .content { float: left; }

/* 3 column, content right */
.col-3cr .main { background-image: none; }
.col-3cr .main-inner { padding-left: 600px; }
.col-3cr .container-inner > .main::before { left: 0px; padding-left: 600px; }


.col-3cr .sidebar.s1 { float: left; margin-left: -600px; }
.col-3cr .sidebar.s2 { float: left; margin-left: -260px; }
.col-3cr .content { float: right; }

/*  base : sidebar
/* ------------------------------------ */
.sidebar {
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
  -moz-transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -o-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
}
.sidebar .sidebar-content, .sidebar .sidebar-toggle {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
  background: #f0f0f0;
}
.sidebar .hu-pad { padding-left: 20px; padding-right: 20px; }
.sidebar-top { padding: 15px 30px; }
.sidebar-top p { float: left; color: #fff; color: rgba(255,255,255,0.8); font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1.5rem; padding: 3px 0; }
.sidebar-toggle { display: none; text-align: center; cursor: pointer; width: 100%; height: 60px;
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
border: none;
padding: 0;
}
.sidebar-toggle i { font-size: 30px; color: #fff; padding: 15px 0; }

.sidebar.expanding, .sidebar.collapsing {
    background: #f0f0f0;
    -moz-transition: width, -moz-transform, .35s ease;
    -webkit-transition: width, -webkit-transform, .35s ease;
    -o-transition: width, -o-transform, .35s ease;
    transition: width, transform, .35s ease;
    z-index: 10;
}
.sidebar.expanded .sidebar-content, .sidebar.collapsed .sidebar-content, .sidebar.collapsing .sidebar-content {
    -moz-transition: opacity, -moz-transform, .35s ease;
    -webkit-transition: opacity, -webkit-transform, .35s ease;
    -o-transition: opacity, -o-transform, .35s ease;
    transition: opacity, transform, .35s ease;
}

.sidebar.expanded {
  overflow: hidden;
}

.sidebar-expanded .sidebar {
  -webkit-box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
  -moz-box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
  box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
}
.sidebar-expanded .content {
      background: #fff;
}
.sidebar.expanded .sidebar-content {
    overflow: auto;
}

.sidebar.expanding .sidebar-content {
  /*opacity:1!important;*/
  display:block!important;
}
.sidebar.collapsing .sidebar-content {
  opacity:0!important;
}
/* toggle icon */
.sidebar-toggle-arrows {  opacity: 0;/* <= revealed with js */ }
.collapsed .sidebar-toggle-arrows {  opacity: 1; }
.sidebar-toggle-arrows {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-transition: -webkit-transform, opacity, .25s ease;
  -moz-transition: -moz-transform, opacity, .25s ease;
  -o-transition: -o-transform, opacity, .25s ease;
  transition: transform, opacity, .25s ease;
  position: relative;
}


/* the position is set server side depending on the choosen layout */
.sidebar[data-position="right"] .sidebar-toggle-arrows:before,
.sidebar[data-position="middle-right"] .sidebar-toggle-arrows:before {content: "\f100";}
.sidebar[data-position="left"] .sidebar-toggle-arrows:before,
.sidebar[data-position="middle-left"] .sidebar-toggle-arrows:before {content: "\f101";}

/* June 2020 for https://github.com/presscustomizr/hueman/issues/905 */
.hu-fa-not-loaded .sidebar[data-position] .sidebar-toggle-arrows:before { content: "\00a0";}

.sidebar[data-position="right"].collapsed .hovering .sidebar-toggle-arrows,
.sidebar[data-position="middle-right"].collapsed .hovering .sidebar-toggle-arrows,
.sidebar[data-position="left"].expanded .hovering .sidebar-toggle-arrows,
.sidebar[data-position="middle-left"].expanded .hovering .sidebar-toggle-arrows {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}
.sidebar[data-position="left"].collapsed .hovering .sidebar-toggle-arrows,
.sidebar[data-position="middle-left"].collapsed .hovering .sidebar-toggle-arrows,
.sidebar[data-position="right"].expanded .hovering .sidebar-toggle-arrows,
.sidebar[data-position="middle-right"].expanded .hovering .sidebar-toggle-arrows {
  -webkit-transform: translateX(3px);
  -moz-transform: translateX(3px);
  -o-transform: translateX(3px);
  transform: translateX(3px);
}


/*stickify */
.main .sidebar.sticky {
  position: fixed;
  top: 0;
/*  margin-right: 0!important;
  margin-left:0!important;*/
  padding-bottom: 0;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
}
.sidebar .sidebar-content, .sidebar .sidebar-toggle {
  -webkit-transition: -webkit-transform 0.30s ease-in-out;
  -moz-transition: -moz-transform 0.30s ease-in-out;
  -o-transition: -o-transform 0.30s ease-in-out;
  transition: transform 0.30s ease-in-out;
}

/*.col-2cr .s1.sticky-sidebar,
.col-3cm .s1.sticky-sidebar,
.col-3cr .s1.sticky-sidebar,
.col-3cr .s2.sticky-sidebar {
  position: fixed;
}
.col-2cl .s1.sticky-sidebar,
.col-3cl .s1.sticky-sidebar,
.col-3cm .s2.sticky-sidebar,
.col-3cl .s2.sticky-sidebar {
  position: fixed;
  right: 0px;
  margin-right: 0;
}
*/

/* sidebar primary */
.sidebar.s1 { width: 340px; z-index: 2; }
.sidebar.s1:hover { z-index: 98; /* social icons tooltip above header nav */ }
.sidebar.s1 .sidebar-top,
.sidebar.s1 .sidebar-toggle { background: #16cfc1; }
@media only screen and (min-width: 479px) and (max-width: 960px) {
  .sidebar.s1 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
  .sidebar.s1 .sidebar-top p { color: #666; }
  .sidebar.s1 .sidebar-top .social-links .social-tooltip { color: #666!important; }
}

/* sidebar secondary */
.sidebar.s2 { width: 260px; z-index: 1; }
.sidebar.s2 .sidebar-top,
.sidebar.s2 .sidebar-toggle { background: #efb93f; }
@media only screen and (min-width: 479px) and (max-width: 1200px) {
  .sidebar.s2 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
  .sidebar.s2 .sidebar-top p { color: #666; }
}

/*  base : grid
/* ------------------------------------ */
.grid { margin-right: 3.2%; float: left; display: inline; position: relative; }
.last { clear: right; margin-right: 0!important; }

.one-full { margin-right: 0; width: 100%; overflow: hidden; }
.one-half { width: 48.4%; }
.one-third { width: 31.2%; }
.two-third { width: 65.6%; }
.one-fourth { width: 22.6%; }
.three-fourth { width: 74.2%; }
.one-fifth { width: 17.4%; }
.two-fifth { width: 38.1%; }
.three-fifth { width: 58.7%; }
.four-fifth { width: 79.4%; }