/*
Theme Name: Ixpan
Text Domain: ixpan
Version: 0.19.2
Requires at least: 4.7
Requires PHP: 8.0
Description: Blog theme.
Tags: 
Author: Ixi Studio
Author URI: https://ixi.studio/

*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

    
    0.  Document Setup
            a.  fonts
            b.  theme styles
            c.  icons
            d.  body
    1.  Base
    2.  Element Base
    3.  Helper Classes
            a.  lazyload
            b.  animations
            c.  drop down
                [utilities classes got moved down due to cascading issues]
    4.  Container layout
    5.  Header / Nav / Footer
    6.  Page Templates
            a.  Homepage
            a.  Search results
            b.  Blog homepage
            c.  Single post
    7.  Layouts
            a. Page sections
            b. Hero
    7.  Blocks
            - search  
            - backdrop
            - gravatar
            - buttons: primary, secondary, link, icon
            - alerts: error, success, warning, info
            - posts cover list
            - Gallery
            - Modal Gallery
            - Modal
            - Slider
            - Gallery slider
            - comments
            - comment form
            - pagination
            - toolbar
            - Subscribe
            - 2 and 3 column grid
            - 2 columns using float
            - picture cover
            - image
            - gallery
            - floating picture
            - lists
            - separators
            - tables: regular, stripes, minimalistic
            - Table
            - media text
            - control panel dashboard widget
            - flexbox
            - card promo
            - quotes
            - code
            - audio
    8.  Entry Content
    9.  Widgets and plugins
            - utility
    10. Media Queries
            - small screen size only
            - medium sizes like tablets
            - medium screen size only
            - medium desktop
            - large desktop



THEME STYLES

The theme colors in this file are meant to be the safest: 
One color, with multiple tints
One system typeface
 
-!!! REPONSIVE classes: The correct way to hide blocks for different screen sizes is by using this classes:
-u--hide-laptop, u--hide-tablet, u--hide-mobile, u--hide-desktop"; 
-By hiding blocks using those classes above, we ensure that the original display property (block, inline-block, inline, etc...) stays the same after re appearing.
-
-The rest of the classes, like the ones below are DEPRECATED and shouldn't be used.
- * u--hide-xlg, u--hide-lg, u--hide-md and u--hide-sm, u--show... etc. 


----------------------------------------------------------------------------- */





/*--------------------------------------------------------------
0. Document Setup:
---------------------------------------------------------------- 

Used in front end tempalte




@import url("assets/css/theme-options--a.css");

*/


/*--------------------------------------------------------------
1. Base:
----------------------------------------------------------------



g- grid (could be css grids, flexbox, etc)
m- mobile specific
c- component specified
t- theme
u- utility


*/


/* Apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

html, body {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */

}

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}




/*--------------------------------------------------------------
2. Element Base: 
---------------------------------------------------------------- */



html {scroll-behavior: smooth;}
body {
    margin: 0;
    padding: 0;
    border: none;  
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* TYPOGRAPHY STYLES */


body,
.p {
    font-family: var(--ixn-type-primary);
    font-size: var(--ixn-font-size-body);
    line-height: var(--ixn-line-height-body);
    letter-spacing: var(--ixn-letter-spacing-body);
    color: var(--ixn-color-primary--tint-60);
}


p { 
    margin: var(--ixn-space-sm) 0; 
}


.a, 
a {
    text-decoration: none; 
    color: var(--ixn-color-primary);
    cursor: pointer;
}    

a:not(.a--hover-no, .btn, .btn-secondary) {
    border-bottom: 1px solid var(--ixn-color-primary--tint-30);
}

    .a:focus, 
    a:not(.a--hover-no):focus {
      outline: 1px dashed var(--ixn-color-primary--tint-60);
    }

    .a:hover, 
    a:not(.a--hover-no):not(.nav__item):not(.subnav__item):hover {
        background-color: var(--ixn-color-primary--tint-10); /* */
        color: var(--ixn-color-primary);
    }


    /* Add button effect
    a {
        display: inline-block;
        will-change: tranform;
        transition: transform .2s ease-out;
        -moz-transition: transform .2s ease-out;
        -webkit-transition: transform .2s ease-out;
        -o-transition: transform .2s ease-out;
    }

    a:hover {
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }
     */

    /* Button tag to a */
    button.a {
        border:  none;
        background:  transparent;
        font-family: var(--ixn-type-primary);
        font-size: var(--ixn-font-size-body);
        line-height: var(--ixn-line-height-body);
        letter-spacing: var(--ixn-letter-spacing-body);
    }


.hr,
hr {
    border: none;
    background: none;
    height: 0;
    border-top: var(--ixn-border-primary);

    margin: var(--ixn-space-md) 0;
}

/* 
 * Keyboard Input element
 * Styles here are kinda unique since this is such a unique use. 
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd 
 */
kbd {
    background-color: var(--ixn-color-primary--tint-10);
    border-radius: 3px;
    border: var(--ixn-border-primary);
    box-shadow:
    0 0px 0px rgba(33, 27, 22, 0.1),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: var(--ixn-color-primary);
    display: inline-block;
    line-height: 1;
    letter-spacing: 0;
    font-size: .9em;
    padding: var(--ixn-space-xxxsm) var(--ixn-space-xxsm);
    white-space: nowrap;
}



/* Typography */

.has-ixn-h-1-font-size,
.h1,
h1 {
    
    font-size: var(--ixn-font-size-h1);
    line-height: var(--ixn-line-height-h1);
    letter-spacing: var(--ixn-letter-spacing-h1);
    color:  var(--ixn-color-primary);
    margin: var(--ixn-space-sm) 0;
    word-break: break-word;
    word-spacing: -2px;
    font-weight: bold;
}

.has-ixn-h-2-font-size,
.h2,
h2 {
    font-size: var(--ixn-font-size-h2);
    line-height: var(--ixn-line-height-h2);
    letter-spacing: var(--ixn-letter-spacing-h2);
    color:  var(--ixn-color-primary);
    margin: var(--ixn-space-sm) 0;
    word-break: break-word;
    font-weight: bold;
}

.has-ixn-h-3-font-size,
.h3,
h3 {
    font-size: var(--ixn-font-size-h3);
    line-height: var(--ixn-line-height-h3);
    letter-spacing: var(--ixn-letter-spacing-h3);
    color:  var(--ixn-color-primary);
    margin: var(--ixn-space-sm) 0;
    word-break: break-word;
    font-weight: bold;
}


.color--error {
    color:  var(--ixn-color-red--tint-140);
}

.color--success {
    color:  var(--ixn-color-green--tint-140);
}

.color--warning {
    color:  var(--ixn-color-orange--tint-140);
}

.color--info {
    color:  var(--ixn-color-blue--tint-140);
}


/* Text selection */


::-moz-selection { 
    background: var(--ixn-color-primary--tint-10); 
    color: var(--ixn-color-primary); 
}

::selection { 
    background: var(--ixn-color-primary--tint-10); 
    color: var(--ixn-color-primary); 
}



/* Form field focus */

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 3px solid var(--ixn-color-primary--tint-20);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--ixn-color-primary--tint-20);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--ixn-color-primary--tint-20);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--ixn-color-primary--tint-20);
}




/*--------------------------------------------------------------
3. Helper classes
---------------------------------------------------------------- */



/* Lazyload -------------------------------------
*  https://github.com/aFarkas/lazysizes
*/

.no-js img.lazyload {
   display: none;
 }

.lazyload,
.lazyloading {
   opacity: 0;
}

.lazyloaded {
   opacity: 1;
   transition: opacity 300ms;
}

   /* Dealing with Microsoft Edge problems */
   img[data-src],
   img[data-srcset] {
     display: block;
     min-height: 1px;
   }


/* Animations ------------------------------------- */

/* Used by lazysizes */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
} 



/* Sliding Panel Class ------------------------------------- 
    The sliding panel class is a mixin,
    works with dropdown
*/



/* Drop Down Class ------------------------------------- */

.dropdown,
.sliding-panel {

    background-color: var(--ixn-color-primary--tint-10);
    width: 100%;
    

}

.dropdown--has-animation,
.sliding-panel--has-animation {
    will-change: transform;
    transition: transform 0.5s;
}


    /* Add handler on top of box*/

    .dropdown:after,
    .sliding-panel:after {
        content: "";
        display: block;
        height: 80px;
        width: 111px;
        /* A way to load js values in this variable */
        width: var(--ixn-js-main-dropdown-menu-lg-width, 111px); 
        position: absolute;
        background-color: transparent;
        top: -80px;
        right: 0;
    }

    .dropdown--display-yes,
    .sliding-panel--display-yes {
        visibility: visible;  
        display:  block;       
        -webkit-transform: translateX(0);
        transform: translateX(0);   
               
    }

    .dropdown--display-no,
    .sliding-panel--display-no {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);    
    }

.dropdown__close,
.sliding-panel__close {
    position: absolute;
    top: var(--ixn-space-xsm);
    right: var(--ixn-space-xsm);
    z-index: 6;
}


.dropdown--theme-generic {
    padding:  var(--ixn-space-sm);
}



/*--------------------------------------------------------------
4. Container layout
---------------------------------------------------------------- */

.container {
   width: 100%;
   background-color: var(--ixn-color-white);
}

.container__in {
   padding: 15px var(--ixn-space-sm);
   max-width: 550px;
   margin: 0px auto;
}


    .container--theme-light {
      background-color: var(--ixn-color-primary--tint-10);
    }

    .container--theme-light .container__in {
      background-color: transparent;
    }

/* Move up first .container of the webpage */
.overflowing-container > main.container > .container__in {
    padding-top: 0;
}


/* Contain floating menus */

.overflowing-container {
   position: relative;
   max-width: 100%;
   overflow-x: hidden; /* */
}

   .overflowing-container__item {
      z-index: 10;
      pointer-events: initial;
   }


/* Container with sidebar */

.container--sidebar .container__main {
    margin-bottom:  var(--ixn-space-md);
}





/*--------------------------------------------------------------
5. Header
---------------------------------------------------------------- */


/* Default header uses logo image */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding-top:  var(--ixn-space-xsm);
    padding-bottom: 85px; /* Match space after header */
}


.header__logo { 
   width: 200px; 
   flex-shrink: 0;
   margin-top: 2px;
}

.header__title { 
   font:  var(--ixn-font-h3);
}


.header__img { 
    margin-top: 0px;
    max-width:  100%;
    height:  auto;
}

.m-header__nav {
   height:  auto;
}


/* Header with text title instead of logo */

.header--theme-title {
    align-items: start;
}

    .header--theme-title .header__title {
        padding-top:  var(--ixn-space-xsm);
    }


/* Nav ------------------------------------- */

/* Select all ids with the value starting with sliding-panel-menu */
[id*="sliding-panel-menu"] {

   position: absolute;
   top: 0;
   right: 0;
   z-index: 5;

   max-width: 300px;
   padding: var(--ixn-space-md) var(--ixn-space-sm) var(--ixn-space-sm) var(--ixn-space-sm);

}


.nav__item {

    /* Required */
    display: block; 
    padding: var(--ixn-space-xsm) var(--ixn-space-xsm); 
    background-color: var(--ixn-color-white);

}

    .nav__item:hover:not(.a--hover-no) {
        background-color: var(--ixn-color-primary--tint-20);
    }

    .nav__item--active,
    .nav__item--active:hover {
        background-color: var(--ixn-color-primary--tint-20);
    }

body .nav .nav__item--align-right {
    /* Required */
    padding-right: 0;
}

    /* Add a small border to the right. It grows size of div  */
    .nav .nav__item--align-right:hover::after,
    .nav .nav__item--align-right.current-menu-item::after {
        content: "";
        display: block;
        width: var(--ixn-space-sm);
        height: 100%;
        background: var(--ixn-color-primary--tint-20);
        position: absolute;
        top: 0;
        right: -24px;
    }



/* Nav toggle */

/* if nav-horizontal is ul remove padding */
ul.nav-toggle { 
    /* Required */
    padding: 0; 
}

.nav-toggle {
    /* Required */
    position: relative;
}

    .nav-toggle__item { 
        /* Required */
        display: block; 
        position: relative;
    }

.nav-toggle__sub {
    position: relative;
    visibility: hidden;
    padding:  0 0;
    margin:  0;   
    max-height: 0;
}


/* Nav toggle sub nav active*/

.nav-toggle__sub--is-shown {
    max-height: 1000px;
    visibility: visible;
    opacity: 1;
    z-index: 5;
    transition-delay: 0s, 0s, 0s;
}

    /* Icon animation */
    .nav-toggle__icon {
        display: inline-block;
        position: absolute;
        right: var(--ixn-space-xsm);
        top: 17px;
        will-change: rotate;
        transition:.3s;
    }

    .nav__item--is-active .nav-toggle__icon{
        top:19px;
        transform:rotate(90deg);
    }


/* Dropdown theme ixn - used for custom boxes like main menu */

.nav-toggle--has-animation {
    will-change: height, opacity;
    opacity: 1;
    z-index: -1;
    transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.nav-toggle--has-animation.nav-toggle__sub--is-shown {
    visibility: visible;
    opacity: 1;
    z-index: 5;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0s;
}



/* Navigation with dropdown subnav */

/* if nav-horizontal is ul remove padding */
ul.nav-horizontal { 
    /* Required */
    padding: 0; 
}

.nav-horizontal {
    /* Required */
    position: relative;
}

    .nav-horizontal__item { 
        /* Required */
        display: inline-block; 
        vertical-align: top;
        position: relative;
    }

/* Postition sub */
.nav-horizontal__sub {
    position: absolute;
    width: 250px;
    z-index: 5 !important;
    visibility: hidden;
    padding:  0 0;
    margin:  0;   
}


/* This are hidden subnavigation menus */
.nav-sub {
   display: block;
}

    .nav-sub:hover {
        background-color: var(--ixn-color-primary--tint-10);
        background-color: var(--ixn-color-white);
        color: var(--ixn-color-primary--tint-80);
    }

    .nav-sub--indented {
        padding-left:  var(--ixn-space-sm);
    }



/* Navigation submenu */

/* Hides nav-sub on load */ 
.nav-sub--collapsed {
    display:  none;
}

.nav-sub--right-align  {
    left: auto;
    right: 0px;
}


    /* Display nav-sub  */ 
    /* if current nav-sub__item is selected  */ 
    .nav__item--menu-parent + .nav-sub,
    /* if parent menu is active and nav-sub is collapsed */ 
    .nav__item--active + .nav-sub--collapsed {
        display: block;
    }

    .nav-sub--active {
        background-color: var(--ixn-color-white);
    }

.nav-sub__item {
    display: block;
    border-top: 0;
}

    .nav-sub__item:hover {
        background-color: var(--ixn-color-white);
        color: var(--ixn-color-primary--tint-80);
    }
    
/* Dropdown theme ixn - used for custom boxes like main menu */

.nav-sub--has-animation {
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(1.5em);
    z-index: -1;
    transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.nav-sub--has-animation.nav-sub--is-shown {
    visibility: visible;
    opacity: 1;
    z-index: 5;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0s;
}


/* Nav theme */

.nav--theme-ixn {
   color: var(--ixn-color-primary);
   background-color: var(--ixn-color-primary--tint-10);
}

.nav--theme-ixn .nav-sub {
   color: var(--ixn-color-primary);
   background-color: var(--ixn-color-primary--tint-10);
}

    .nav--theme-ixn .dropdown__close {
        color: var(--ixn-color-primary);
    }

.nav--theme-ixn .nav__item {
    border-bottom:  none;
    color: var(--ixn-color-primary);
    text-decoration: none;
    background-color: transparent; 
}

    .nav--theme-ixn .nav-horizontal__item > .nav__item {
        background-color: var(--ixn-color-white);
    } 

    .nav--theme-ixn .nav__item--active,
    .nav--theme-ixn .nav__item--active:hover {
        background-color: transparent;
    }
    


/* Nav with small text */

.nav--size-sm {
    /* Required */
    font-size: var(--ixn-font-size-mini);
    letter-spacing: var(--ixn-letter-spacing-mini);
    line-height: var(--ixn-line-height-mini);
}

    .nav--size-sm .nav__item {
        /* Required */
        padding: var(--ixn-space-xsm) var(--ixn-space-xsm);
    }


    .nav--size-sm .nav-sub {
        width: 175px; /* This width is based on eye calculations only */
    }


/* Nav links */

.nav-links {
    margin:  0;
    padding:  0;
}

    .nav-links > li {
        list-style: none;
        display:  inline;
    }

    .nav-links > li:before {
        content: " / ";
    }

    .nav-links > li:first-child:before {
        content: "";
    }


/* Nav item with avatar and icon  
 * Have the option of showing smaller icon
*/

.nav-item--avatar-icon {
    /* Required */
    display: flex;
    align-items: center;
}

    .nav__avatar img { 
        display: block; 
        border-radius: 48px;
        overflow: hidden;
    }

    .nav__avatar,
    .nav-item__label {
        padding-right:  var(--ixn-space-xsm);
        border-radius: 30px;
    }

    .nav-item__icon {
        padding-right:  var(--ixn-space-xxsm);
    }

        .nav-item__icon i:not(.icon--small):before {
            top:  3px;
        }


/* Submenus displayed always */

.sub-menu { margin: 0; }

/* Search box */
/* Tool box */

.searchbox,
.toolbox  {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 5;
   
   width: 100%;
   max-width: 400px;
   padding: var(--ixn-space-md) var(--ixn-space-sm) var(--ixn-space-sm);
}

.searchbox__form {
    margin: var(--ixn-space-sm) 0;
}



/* Search field */

.search {
   position: relative;
   display: flex;
   align-items: stretch;
   background-color: white;
   border: var(--ixn-border-primary);
}

.search__input {
   padding: var(--ixn-space-xxsm) 8px;
   border: none;

   flex-shrink: 1;
   flex-grow: 1;
}

.search__btn {
   align-self: right;
   flex-shrink: 0;
   background:  transparent;
   height: 40px;
   padding-left:  var(--ixn-space-xxsm);
}

.search__icon {
   position: relative;
   top: -5px;
   left: -2px;
}





/* Footer */

.footer {
   padding-top: 85px;
   padding-bottom: var(--ixn-space-lg);
   display: block;
}

    .footer-basic__body {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin-bottom: var(--ixn-space-md);
    }

    .footer-basic__logo {
        
        flex-shrink: 0;
        padding-right: var(--ixn-space-sm);
    }    

    .footer-basic__text {
        align-self:  center;
    }

    .footer-basic__aside {
        margin-bottom: var(--ixn-space-md);
    }

    .footer-basic__toolbar {
       margin-left: -5px;
}


.icon-ixn:before {
  font-size: 50px; 
  left: -5px;
}



/*--------------------------------------------------------------
6. Page Templates
---------------------------------------------------------------- */



/* Home page ------------------------------------- 
 * Front cover
*/

.home .header { padding-bottom: 40px; }

.front-cover { 
  text-align: center; 
}
.front-cover__text { margin-top: var(--ixn-space-md); }
.front-cover__img { 
  margin: 0 0 0 0; 
  text-align: center;
}
  .front-cover__img > picture { display: inline-block; }



/* Price cards */


.cards-3__item { 
    
    padding-bottom:  10px;
    margin: var(--ixn-space-xmd) 0; 
}


/* List Minimal 
These 2 do exactly the same right now. .list was added later while list-minimal is for backwards compatibility
*/

.list,
.list-minimal {
    padding: 0;
    list-style: none;
    list-style-image: none;
}

    .list__item,
    .list-minimal__item {
        padding: var(--ixn-space-xsm) 0;
    }

    .list-minimal__item:last-child, 
    .list__item:last-child { border-bottom: 0; }


/* List border */

.list--border .list__item {
    border-bottom: var(--ixn-border-primary);
}

/* List stripes */ 


.list--stripes .list__item {
    padding-left: var(--ixn-space-xsm);
    padding-right: var(--ixn-space-xsm);
}

.list--stripes .list__item:nth-child(2n+1) {
    background-color: var(--ixn-color-primary--tint-10);
}



/* Search results ------------------------------------- 
 * 
*/

.ixn-search-results {
    padding-left:  18px;
}

.ixn-search-results__item {
  display: list-item;
  list-style-type: decimal;
  border-left: var(--ixn-space-xsm) solid transparent;
}


/* Blog homepage------------------------------------- 
 *
*/


.ixn-blog__post { margin: var(--ixn-space-md) 0; }
   .ixn-blog--cover-img { margin-top: -25px; min-height: 25px; }

.ixn-blog__post {
    cursor:  pointer;
}

.ixn-blog--cover-img { margin-bottom: 0; }




/*--------------------------------------------------------------
7. Layout blocks
---------------------------------------------------------------- */


/* Headline and 2 columns */

/* Hero */

.ixn-hero {
    width: calc(100% +  var(--ixn-space-md) ); 
    background-color: var(--ixn-color-primary--tint-10);
    margin-left: -24px;
}

    .ixn-hero__img {
        background-color: var(--ixn-color-primary--tint-20);
        background-position: center center;
        background-size: cover;
        height: 250px;
    }

    .ixn-hero__body {
        padding: var(--ixn-space-md);
        background-color: var(--ixn-color-primary);
    }

        .ixn-hero__body h1, .ixn-hero__body h2 {
            color: var(--ixn-color-white);
        }



/* Enable background options for section */
.section-bg {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw !important;
}

/* Should mostly mimic .container__in, with a few variations */
.section-bg__container { 
    padding: 15px var(--ixn-space-sm);
    max-width: 550px;
    margin: 0px auto; 
}


/*--------------------------------------------------------------
7. Blocks
---------------------------------------------------------------- */



/* Search field ------------------------------------- 
 * Used on the header
*/

.ixn-search {
   position: relative;
   display: flex;
   align-items: stretch;
   background-color: var(--ixn-color-white);
   border: var(--ixn-border-primary);
}

.ixn-search__input {
   padding: var(--ixn-space-xxsm) 8px;
   border: none;
   background-color: var(--ixn-color-white);
   flex-shrink: 1;
   flex-grow: 1;
}

.ixn-search__btn {
   background-color: var(--ixn-color-white);
   align-self: right;
   flex-shrink: 0;
   width: 50px;
   height: 50px;
   border: none;
}

.ixn-search__icon {
   position: relative;
   top: -5px;
   left: -3px;
}


/* Backdrop ------------------------------------- 
 * Used on dropDown menus for hit areas
*/

.backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   background-color: transparent;
   opacity: .6;
   display: none;
}

.backdrop--display-yes {
    display: block;
}



/* Gravatar ------------------------------------- 
 * 
*/

.gravatar--rounded {
    border-radius: 80px;
    overflow:  hidden;
}


/* Buttons ------------------------------------- 
 * 
*/

/*
 * Buttons default
*/

.btn, 
.btn-secondary,
#activateform #submit /* in wp-activate.php */ {

    /* Required */

    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    border: none;
    font: inherit;
    min-height: 40px;
    width: fit-content;
    width: -moz-fit-content;

}


.btn,
#activateform #submit {

    /* Theme */

    background: var(--ixn-color-primary);
    color: var(--ixn-color-white);
    padding: var(--ixn-space-xxsm) var(--ixn-space-xsm);
    text-align: left;
    transition: var(--ixn-transtion-hover); 
    border-radius: var(--ixn-border-radius);
    font-family:  var(--ixn-type-primary);
    font-weight: light;
    font-size: var(--ixn-font-size-primary-body);
    letter-spacing: var(--ixn-letter-spacing-primary-body);
    line-height: 26pt;

}


    /**
     * BTN States
     * Add to any btn style
     */

    .btn:hover,
    .btn:active,
    .btn--active {

        /* Theme */

        background: var(--ixn-color-primary--tint-80);
        color: var(--ixn-color-white);

    }

    .btn--active:hover {

        /* Theme */

        background: var(--ixn-color-primary--tint-70);
        color: var(--ixn-color-white);

    }


    .btn:disabled,
    .btn:disabled:hover,
    .btn[disabled],
    .btn[disabled]:hover,
    .btn--disabled,
    .btn--disabled:hover {

        /* Theme */
        cursor: not-allowed;        
        background: var(--ixn-color-primary--tint-80);
        color: var(--ixn-color-primary--tint-50);

    }


/**
 * Secondary style button
 * Use individually, do not mix with .btn
 */


.btn-secondary {

    /* Theme */

    background: var(--ixn-color-primary--tint-20);
    color: var(--ixn-color-primary);
    padding: var(--ixn-space-xxsm) var(--ixn-space-xsm);
    text-align: left;
    transition: var(--ixn-transtion-hover); 
    border-radius: var(--ixn-border-radius);
    font-family:  var(--ixn-type-primary);
    font-weight: light;
    font-size: var(--ixn-font-size-primary-body);
    letter-spacing: var(--ixn-letter-spacing-primary-body);
    line-height: 26pt;

}

    .btn-secondary:disabled,
    .btn-secondary[disabled],
    .btn-secondary--disabled,
    .btn-secondary--disabled:hover {

        /* Theme */
        cursor: not-allowed;
        color: var(--ixn-color-primary--tint-50);

    }



/**
 * Link BTN style
 * Use individually, do not mix with .btn
 */

.btn-link {

    /* Theme */

    background: none;
    color: var(--ixn-color-primary);
    text-decoration: underline;
    border-bottom:  0;

}

    .btn-link:hover {

        /* Theme */

        background: var(--ixn-color-primary--tint-80);
        color: var(--ixn-color-white);
        

    }

    .btn-link.disabled,
    .btn-link.disabled:hover {
        color: var(--ixn-color-primary--tint-40);
        cursor: not-allowed;
        background: none;
    }


/**
 * BTN icon
 * Add class after any btn style
 * Change HTML to change side of icon
 */

.btn-icon {
    
    /* Required */

    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    /* Theme */

}

    .btn-icon__icon {

        /* Theme */

    }

    .btn-icon .btn-icon__icon {

        /* Theme */
       padding-left:  var(--ixn-space-xxsm);

    }




    /* Add button effect 
    .btn__link {
        will-change: tranform;
        transition: transform .2s ease-out;
        -moz-transition: transform .2s ease-out;
        -webkit-transition: transform .2s ease-out;
        -o-transition: transform .2s ease-out;
    }

    .btn__link:hover {
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }


.btn__link.btn--theme-light { 
   border: var(--ixn-border-primary);
   background-color: var(--ixn-color-white); 
   color: var(--ixn-color-primary--tint-80);
}
   
*/

/*
.btn-icon {
   display: inline-block;
   border: 0;
   text-decoration: none;
   text-align: center;
   cursor: pointer;

   color: var(--ixn-color-primary); 

}
*/


.btntop {
   
   width: 40px;
   height: 40px;
   text-align: center;
   line-height: 37px;
   background-color: var(--ixn-color-primary);
   color: white;
   border: 1px solid white;

   position: fixed;
   left: auto;
   top: auto;
   bottom: var(--ixn-space-sm);
   right: var(--ixn-space-sm);
   z-index: 29;
}

   .btntop__icon { 
      position: relative;
      top: -3px;
      left: -2px;
   }


/* Alerts ------------------------------------- 
 * Bootstrap based
*/

.alert {
   position: relative;
   padding: var(--ixn-space-xxsm) var(--ixn-space-xsm);
   margin-bottom: var(--ixn-space-xsm);
   border: 1px solid transparent;
   border-top-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
}

    .alert--error {
        background-color: var(--ixn-color-red--tint-10);
        color: var(--ixn-color-red--tint-140);
        border-color: transparent;
    }


    .alert--success {
        border-color: transparent;
        background-color: var(--ixn-color-green--tint-10);
        color: var(--ixn-color-green--tint-140);
    }

    .alert--warning {
        background-color: var(--ixn-color-orange--tint-10);
        color: var(--ixn-color-orange--tint-140);
        border-color: transparent;
    }


    .alert--info {
        background-color: var(--ixn-color-blue--tint-10);
        color: var(--ixn-color-blue--tint-140);
        border-color: transparent;
    }



/* Posts cover list ------------------------------------- 
 * Post extract sm
*/

.post__info { margin: var(--ixn-space-xsm) 0 0 0; }
.post__title { margin: 0 0 0; }
.post__img { 
   line-height: 0;
   margin-bottom: var(--ixn-space-xsm);
}


.post__date a { display: inline-block; }

.post__cover-link {
    display: inline-block;
    position:  relative;
}

    .post__cover-link:hover {
        
    }
    .post__cover-link:hover:after {
        content:  "";
        display:  block;
        position: absolute;
        width:  100%;
        height:  100%;
        left:  0;
        top:  0;
        background-color:  white;
        opacity: 0.3;
    }

.ixn-blog-tag,
.ixn-blog-cat {
    background-color: white;
    display: inline-block;
    padding: 0 var(--ixn-space-xxsm);
}


/* Gallery ------------------------------------- 
 * 
*/

.ixn-gallery__item { 
    margin-bottom: var(--ixn-space-sm);   
    display: block;

    /* Fix inline-block space issue */
    line-height: 0; 

}
    /*
    .ixn-gallery .ixn-gallery__caption {
        margin-top: var(--ixn-space-xxsm);
    }
    */

/* Grid  */

.ixn-grid__item {
    margin-bottom: var(--ixn-space-sm);   
}


/* Picture ------------------------------------- 
 * 
*/



/* Modal ------------------------------------- 
 * Supports theme: toolbar;
*/


.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

  .modal__backdrop {
      background-color: #000;
  }

  .modal-dialog {
      position: relative;
      width: auto;
      max-width: 600px;
      margin: 1.75rem auto;
      pointer-events: none;
  }

  .modal__content {
      position: relative;
      width: 100%;
      pointer-events: auto;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid rgba(0,0,0,.2);
      outline: 0;
  }

  .modal__header {
    padding: var(--ixn-space-sm);
    position: relative;
  }

  .modal__title {
    margin: 0;
    text-align: left;
    padding-right:  85px; /* Avoid overlap with close button */
  }

  .modal__close {
    position: absolute;
    top: var(--ixn-space-sm);
    right: var(--ixn-space-sm);
  }

  .modal__footer {
    text-align: right;
    padding: var(--ixn-space-sm);
  }

  .modal__body {
    padding: 0 var(--ixn-space-sm) var(--ixn-space-sm) var(--ixn-space-sm);
  }

  .modal--is-open {
    overflow: hidden;
  }

    .modal--is-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
    }

  .modal--is-active {
    display: block;
  }



/* Modal with top toolbar */

.modal--theme-toolbar {}   

   .modal--theme-toolbar .modal__header {
      padding: var(--ixn-space-xxsm) var(--ixn-space-xsm);      
   }

   .modal--theme-toolbar .modal__close {
      position: static;
      top: 0;
      right: 0;
   }

   .modal__toolbar .slider__scroll-prev,
   .modal__toolbar .slider__scroll-next {
      position: static;
      margin-right: var(--ixn-space-xsm);

   }




/*  Modal Fit to screen 
 *  Modale will fill the viewport
*/

.modal--fit-screen-size {
    width: 100%;
    height:  calc(100vh - 50px);
}

    .modal--fit-screen-size .modal__header,
    .modal--fit-screen-size .modal-dialog,
    .modal--fit-screen-size .modal__content,
    .modal--fit-screen-size .modal__body,
    .modal--fit-screen-size .modal__slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;   
    }


    .modal--fit-screen-size .modal__header {
        z-index: 5;
    }

    .modal--fit-screen-size .modal__body {
        max-width:  none !important;
    }  

    .modal--fit-screen-size .modal-gallery.modal-dialog {
        width:  94vw;
        max-width: 1350px;
    }    



/*
gallery view

*/



/* Slider ------------------------------------- 
 * Mix in with Gallery and Modal Gallery
*/


.slider__wrapper { 
    position: relative; 
    width: 100%;
    margin: 0 auto;
}


.slider__inner {
    overflow: hidden;
}


.slider__box {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 5000px;
    overflow: hidden;
}

  .slider__box--has-animation {
    will-change: transform;
    transform: translateX(0);
    transition: all 0.6s ease-in-out 0s, z-index 0s linear 0.01s;
  }


.slider__scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height:  100%;
}


    .slider__scroll-prev, 
    .slider__scroll-next {
        position: absolute;
        left: 0px;
        top: 0;
        width: 50%;
        height: 100%;
        outline:none;
    }


        .slider__scroll-prev:hover .slider__scroll-icon, 
        .slider__scroll-next:hover .slider__scroll-icon {
            color: var(--ixn-color-primary--tint-60);
        }

        .slider__scroll-next:focus,
        .slider__scroll-prev:focus {
            outline:0;
        }

    .slider__scroll-next {
        left:  auto;
        right:  0;
    }

    .slider__scroll-prev .slider__scroll-icon, 
    .slider__scroll-next .slider__scroll-icon {
        position: absolute;
        left: var(--ixn-space-sm);
        top: 50%;
        width: 45px;
        height: 45px;
        font-size: 40px;
        text-decoration: none;
         margin-top: -22px;
    }

    .slider__scroll-next .slider__scroll-icon {
        left:  auto;
        right: var(--ixn-space-sm);
    }

        /* Adjust icon position inside button */
        .slider__scroll-icon:before {
            top: 5px;
        }

    .slider__scroll .slider__close {
        position:  absolute;
        left:  auto;
        right:  30px;
        top:  30px;
    }

        /* Adjust icon position inside button */
        .slider__close .icon-close:before {
            margin-left: 3px;
        }

    .icon-arrow-simpleright {
        position: relative;
        left: 0px;
    }


.slider__item {
    float: left;
    margin: 0;
    list-style: none;
    position:  relative;
}



.slider--theme-default {}

    .slider--theme-default .slider__scroll-prev, 
    .slider--theme-default .slider__scroll-next {
      background-color: var(--ixn-color-primary);
      color: white;
    }



/* Makes slider fit to the container size 
 * Works with modal--fit-screen-size 
*/

.slider--fit-container-size .c-gallery,
.slider--fit-container-size .slider__inner,
.slider--fit-container-size .slider__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}


    .slider--fit-container-size .c-gallery__item {
        align-items:  stretch;
    }

    .slider--fit-container-size .c-gallery__picture {
        align-items: center;
        display: inline-flex;
        margin:  0 !important;
        max-width:  100%;
        max-height:  100%;
    }


    .slider--fit-container-size .c-gallery__img {
        flex:  1;
        object-fit: contain;
    }  

    .slider--fit-container-size .c-gallery__caption,
    .c-gallery__caption--fixed {
        position: absolute;
        bottom:  0;
        left:  0;
        width:  100%;
        background-color:  rgba(255, 255, 255, 0.8);
        padding-top:  0;
        padding-left:  var(--ixn-space-xxsm);
        margin-top: 0;
    }


/* Gallery slider classes (mixed with slider)  */

.js-gallery {
   min-width: 325px; /* Art directed width */
   min-height: 0; /* Reset inline style */
   margin: 0 auto;
}

.c-gallery__item { 
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
   height: 100%;
   /* fwidth: 325px; Art directed width */
}

.c-gallery__nav {
   font-size: 0; /* Reset white space in inline-blocks */
   line-height: 0;
   margin-top: var(--ixn-space-xxsm);
}


.c-gallery__nav-item { 
  display: inline-block;
  vertical-align: top;
  margin: 0;
  margin-right: var(--ixn-space-xxsm);
  margin-bottom: var(--ixn-space-xxsm);
}


.c-gallery__img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
}

.c-gallery__picture {
   margin: 0 auto;
}

.c-gallery__thumb { 
    display: block;
}


/* Modal Gallery ------------------------------------- 
 * Fit to art directed image sizes
*/

.modal-gallery.modal-dialog {
   position: relative;
   width: 100%;
   max-width: 550px;
   margin: 0 auto;
   pointer-events: none;
} 


.modal-gallery .modal__body {   
   padding: 0;
   max-width: 325px;
   margin: 0 auto;
   padding: 0 0 var(--ixn-space-sm);
}



/* Adjust scroller sizes */

.modal--fit-screen-size .slider__scroll-icon {
    background-color:  rgba(255, 255, 255, 0.8);
    width:  30px;
    height:  30px;
    left:  0;
    font-size: 20px;   
    display:  block;
}   

    .modal--fit-screen-size .slider__scroll-next .slider__scroll-icon {
        left:  auto;
        right:  0;
    }

    .modal--fit-screen-size .slider__close {
        width:  40px;
        height:  40px;
        padding-top:  5px;
        padding-left:  5px;
        right:  0;
        top:  0;
    }

        .modal--fit-screen-size .slider__close .icon-close {
            padding-left:  2px;
        }



/* Comments - block ------------------------------------- 
 * 
*/

/* Wordpress fix spacing for reply movable form */
.comments > #respond {
   margin-top: var(--ixn-space-md);
}


.comment__content > #respond {
   margin-top: var(--ixn-space-sm);
   border: 1px dotted #666;
   padding: 0 var(--ixn-space-sm);
}

.comment { 
   margin-bottom: 20px; 
   padding-top: var(--ixn-space-sm);
}

    .comment:first-child,
    .comments__list .comment:first-child, 
    .commentlist .comment:first-child {
        border-top: 0;
        padding-top: 0;
    }


.comment__avatar {
   float: left;
   margin-right: var(--ixn-space-sm);
   margin-bottom: 0px;
}


.comment__text {
   overflow: auto;
   clear: left;
   margin-top: var(--ixn-space-sm);
   margin-bottom: var(--ixn-space-xxsm);
   padding-top: var(--ixn-space-xxsm);
}

.comment__credits {
   margin: 0 0 var(--ixn-space-xsm);
}

.sub-comment {
   margin-left: var(--ixn-space-sm);
   border-top: none;
}

.sub-sub-comment {
   margin-left: var(--ixn-space-md);

   border-top: none;
}


/* Comments form------------------------------------- 
 * Leave a comment form
*/

#cancel-comment-reply-link {
    /* Display "Cancel reply" link on new line */
    display:  table;
}

.form__item {
   margin: 0 0 var(--ixn-space-sm);
}

.form__checkbox {
    vertical-align: middle;
}


/* Form field */

.field,
#activateform #key /* For wp-activate.php */ {
    background-color: var(--ixn-color-white);
    border: var(--ixn-border-primary);
    border-radius: var(--ixn-border-radius);
    margin: 0;
    padding: var(--ixn-space-xsm);
    font-family: var(--ixn-type-primary);
    color: var(--ixn-color-primary--tint-60); /*<-- Gray */
    font-size: var(--ixn-font-size-body);
    letter-spacing: var(--ixn-letter-spacing-body);
    line-height: var(--ixn-line-height-body);
    width: 100%;
    max-width: 100%;
    display: block;
}

    /* Disabled form field */
    .field:disabled {
        background-color:  var(--ixn-color-primary--tint-10);
    }

.field__checkbox {
    background-color: var(--ixn-color-primary-tint-10);
    border: var(--ixn-border-primary);
    display:  inline-block;
    vertical-align: middle;
    width:  30px;
    height:  30px;
    margin-right: var(--ixn-space-xsm);
    box-shadow: none;
}

    .field__checkbox:checked {
        background-color:  var(--ixn-color-primary);
        color:  var(--ixn-color-primary);
    }

.field__textarea {
    max-height: var(--ixn-image-width-thumbnail-small);
    overflow-y: scroll;
}


/* Checkbox with text, for agreements.  */

.field-agree {
  display: flex;
  justify-content: left;
  /*align-items: baseline;*/
}

  .field-agree__checkbox {
    flex: 0 0 auto;
  }

  .field-agree__legend {
    flex: 1 1 auto;
    margin-left: var(--ixn-space-xsm);
  }


/* Field Select */

option {
    font-family: var(--ixn-type-primary);
    color: var(--ixn-color-primary--tint-60); /*<-- Gray */
    font-size: var(--ixn-font-size-body);
    letter-spacing: var(--ixn-letter-spacing-body);
    line-height: var(--ixn-line-height-body);
}




/* Field status */

.field__status {
    width:  auto;
    display: inline-block;
    padding: var(--ixn-space-xsm) var(--ixn-space-sm);

}


/* Field number */

.field__number {
    width: 75px;
    text-align: center;
    border: var(--ixn-border-primary);
    padding: var(--ixn-space-xsm) var(--ixn-space-xxsm);
    font-family: var(--ixn-type-primary);
    font-size: var(--ixn-font-size-body);
}


/* Field validation */

/* input:valid, */
.field--valid-true {
    background-color: var(--ixn-color-green--tint-10);
    color:  var(--ixn-color-green--tint-140);
    border: 1px solid  var(--ixn-color-green--tint-140);
}

/*
input:invalid,
input:invalid:required, */
.field--valid-false {
    background-color: var(--ixn-color-red--tint-10);
    color: var(--ixn-color-red--tint-140);
    border: 1px solid  var(--ixn-color-red--tint-140);
}



/* Blog pagination - block ------------------------------------- 
 * adapted for Wordpress
 * Used in post listing (archives) pages, search results, comments pagination
*/

.pagination {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
   width: auto;
   margin: var(--ixn-space-md) auto;
   background-color: var(--ixn-color-white);
}


.pagination__item {
    flex: 0 0 var(--ixn-space-md);
    padding:0;
    height: var(--ixn-space-md);
    line-height: var(--ixn-space-md);
    border-top:0;
    text-align: center;
    cursor: pointer;
    background-color:  var(--ixn-color-white);
}


    .pagination__item a,
    .pagination__item span {
        display:block;
        padding: 0 20px;
        text-decoration: none;
        border-bottom: none !important;
    }

    .pagination__item:hover {
        background-color: var(--ixn-color-primary--tint-50);
        color: var(--ixn-color-white);
    }

    .pagination__item--is-current {
      background-color: var(--ixn-color-primary);
      color: var(--ixn-color-white);
    } 

    .pagination__item--is-current:hover {
      background-color: var(--ixn-color-primary--tint-80);
      color: var(--ixn-color-white);
    } 


/* Toolbar 
 * Used in Modal Gallery and Social share 
 *
*/

.toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
}

.toolbar__icon {
   flex-basis: 35px;
   text-align: center;
   position: relative;
   top: -4px;
}


.toolbar__item {
   margin-right: var(--ixn-space-xxsm);
}

.toolbar__link {
   display: inline-block;
   padding: var(--ixn-space-xxsm);
}

    .toolbar--align-right {
        justify-content: flex-end;
    }

   .toolbar--align-right .toolbar__item {
      margin-right: 0;
      margin-left: var(--ixn-space-xsm);
   }




/* Subscription box
 * 
 *
*/


#ixn-login-panel {
    max-width:  450px;
    margin: 0 auto;
}

.sign-in {}
    
    .sign-in__confirmation,
    .sign-in__verify,
    .sign-in__msg,
    .sign-in__form--is-hidden {
        display: none;
    }

    .sign-in__confirmation--is-on,
    .sign-in__verify--is-on,
    .sign-in__msg--is-on {
        display: block;
    }


    /* Sign In Error */

    .sign-in__form--is-error .sign-in__msg {
        -webkit-animation: fadein 0.2s forwards; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 0.2s forwards; /* Firefox < 16 */
        -ms-animation: fadein 0.2s forwards; /* Internet Explorer */
         -o-animation: fadein 0.2s forwards; /* Opera < 12.1 */
            animation: fadein 0.2s forwards;
        visibility: visible;
    }


/* WP Block shared styles ------------------------------ */


/* Lazyload placeholder graphic */

.ixn-gallery__img-wrapper,
.ixn-picture__picture,
.ixn-picture-floating__picture,
.modal--fit-picture-size .c-gallery__picture, /* Other mode is not being calculated for image size */
.post__img {   
   background-color: var(--ixn-color-secondary--tint-30); 
   background-position: left top;
   background-repeat: no-repeat; 
   background-size: cover;
   display: inline-block; /* Was inline-block */
   line-height: 0;
}

    /* Remove lazyload placeholder graphic after load so images can have tranparency
     * Add the rest of the placeholder elements here later
     */
    .ixn-picture--loaded .ixn-picture__picture, 
    .ixn-gallery .ixn-picture--loaded,
    .modal--fit-picture-size .ixn-picture--loaded .c-gallery__picture {
       background: transparent; 
    }


/* Clearing  */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}



.wp-block-table figcaption,
.wp-block-ixnweb-image figcaption,
.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption,
.blocks-gallery-caption, 
.c-gallery__caption,
.ixn-picture__caption,
.ixn-gallery__caption {
   font-size: var(--ixn-font-size-mini);
   line-height: var(--ixn-line-height-mini);
   padding: 0 0;
   padding-bottom:  0;
   margin: 6px 0 0;
   font-style: italic;
}

/* :not([class~="u--"]) may exclude utility classes  
 * The classes in :not() use there own custom margin left/right, the blocks here are probably wider than the regular content area.
 * Use utility classes for margins left/right instead
 */
.entry-content > *:not([class*="u--margin-left"], [class*="ixn-box-float"], .u--maxwidth--600, .section, .container--narrow-bleed, .container--narrow-bleed-sm,  .container--wide-bleed,  .container--wide-bleed-sm, .quote) {
    margin-left: 0;
}

.entry-content > *:not([class*="u--margin-right"], [class*="ixn-box-float"], .u--maxwidth--600, .section, .container--narrow-bleed, .container--narrow-bleed-sm, .quote) {
    margin-right: 0;
}

/* If the block has a margin class, skip.
 * Blocks that use float don't use a margin-top, use u--margin-top utility classes instead
 */
.entry-content > *:not([class*="u--margin-top"], .ixn-box-float) {
    margin-top: var(--ixn-space-sm);
}

.entry-content > *:not([class*="u--margin-bottom"]) {
    margin-bottom: var(--ixn-space-sm);     
}

.has-large-font-size {
    line-height:  initial;
}

/* Post header  ------------------------------ */

.entry-content > .post__header {
    margin-top:  0;
    margin-bottom: var(--ixn-space-md);
}




/* Custom Block: Picture Cover  ------------------- */


/* Display picture wrapper in proper height */
.ixn-picture__default { 
    display: block; 
}
    


/* WP Block: Image  ------------------------------ */


/* Override WP defaults */
.wp-block-image img,
.wp-block-ixnweb-image img {
  max-width: none;
}



/* WP Block: Gallery ------------------------------ */


.entry-content > .wp-block-gallery {
   margin-top: var(--ixn-space-md);
   margin-bottom: var(--ixn-space-md);
}


.wp-block-gallery:not(.is-cropped) .blocks-gallery-grid {
   align-items: flex-start;
}
   
   .blocks-gallery-grid .blocks-gallery-item {
      margin-bottom: var(--ixn-space-sm);
      flex: 0 1 auto;
      width: auto !important;
      max-width: var(--ixn-image-width-sm);
   }


/* WP Block: Floating picture ------------------------------ */

.ixn-picture-floating {
}

/* The align center attributes needs the ixn-picture-floating to have a set width */

.ixn-picture-floating__picture {
   line-height: 0;
}


/* WP Block: Lists ------------------------------ */

.wp-block-list {
   padding-left: var(--ixn-space-sm);
}

.wp-block-list ul,
.wp-block-list ol {
   margin: 0px 0 var(--ixn-space-xsm) 0;
}

.wp-block-list img {
   display: inline-block;
}

.ixn-list--double-space li {
   margin: var(--ixn-space-xsm);   
}


/* WP Block: Separator ------------------------------ */


.entry-content hr {
   margin: var(--ixn-space-sm) auto;
}


/* WP Block: Table ------------------------------ */


.wp-block-table {
    margin: var(--ixn-space-sm) 0;
}

.wp-block-table table {
    border-collapse: collapse;
    width:  100%;
    max-width: 100%;
}


.wp-block-table thead {
    border-bottom: var(--ixn-border-primary);
}

.wp-block-table th {
    font-weight: normal;
}
    .wp-block-table th:not(.u--text-align--center) {
        text-align: left;
    }

.wp-block-table tfoot {
    border-top: var(--ixn-border-primary);
}

.wp-block-table td, 
.wp-block-table th {
    padding: var(--ixn-space-xsm);
    border: var(--ixn-border-primary);
}

.wp-block-table figcaption {
   font-size: var(--ixn-font-size-mini);
   letter-spacing: var(--ixn-letter-spacing-mini);
   line-height: var(--ixn-line-height-mini);
   padding: var(--ixn-space-xsm) 0;
}

.wp-block-table tr {
  border-bottom: var(--ixn-border-primary);
}


/* Table with stripes */

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
   background: var(--ixn-color-primary--tint-10);
}

.wp-block-table {
   border-bottom: none;
}


/* Table minimalistic */

.wp-block-table.ixn-table--minimal thead {
    border-bottom: var(--ixn-border-secondary);
}

.wp-block-table.ixn-table--minimal td, 
.wp-block-table.ixn-table--minimal th {
   border: none;
}

.wp-block-table.ixn-table--minimal td {}


/* Table:  border top 
 * Works well with ixn-table--minimal
*/

.ixn-table--border-top {
    border-top: var(--ixn-border-primary);
}


/* Table row indented */

.ixn-table--indented {
    /* width:  50%; */
    margin-left: 35%;
}


/* Table cell fixed width */

.ixn-table--fixed table {
    table-layout: fixed;
}

.ixn-td--oneline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Table cell: last child */

.ixn-td--last-child {
    text-align:  right;
}


/* Table cell: background color */
.ixn-td--success {
    background-color: var(--ixn-color-green--tint-10); 
}


/* WP Block: Columns ------------------------------ */


.wp-block-columns {

}


/* Cols */

.cols__item {
    margin-bottom: var(--ixn-space-md);
}

/* Cols 2 float ------------------------------ */



/* WP Block: Media Text ------------------------------ */

/* .wp-block-media-text__media video, Test if needs this */
.wp-block-media-text__media img {
    height: auto;
}


/* Dashboard Widgets ------------------------------ */

.cp-widget {
    border:  var(--ixn-border-primary);
    padding:  var(--ixn-space-sm);
}


/* Flexbox ------------------------------ */

.m-flexbox-spaced {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Card promo ------------------------------ */

.c-card-promo { 
  text-align: center; 
}

    .c-card-promo__body {

    }

    .c-card-promo__title {
        margin: var(--ixn-space-xsm) 0;
    }

    .c-card-promo__img {
        margin: 0 auto;
    }



/* Quotes ------------------------------ */

.quote { }
  
  .quote__body {
    position: relative;
    padding: 0 40px;
    margin-bottom: 40px;
  }

  .quote__left {
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 55px;
  }

  .quote__right {
    position: absolute;
    right: auto;
    top: auto;
    margin: 10px 0 0 20px;
    font-size: 55px;

  }

  .quote__button { margin: 5px 0; }


/* Center align quote */

.quote--centered {
    text-align: center; 
}

    .quote--centered .quote__left {
        position: relative;
        left: -22px;
    }




/* WP Block: Code ------------------------------ */

.wp-block-code {
    max-width: 100%;
    overflow: auto;
    padding: var(--ixn-space-sm);
    font-family: monospace;
    font-size: var(--ixn-font-size-body);
    line-height: var(--ixn-line-height-body);
    letter-spacing: var(--ixn-letter-spacing-body);
    border: var(--ixn-border-primary);
}

    /* text lines dont wrap */
    .wp-block-code > code {
        width: auto;
        white-space: pre;
    }

/* WP Block: Audio ------------------------------ */

    
.wp-block-audio > audio {
    width: 100%;
}


/*--------------------------------------------------------------
9. Entry content (main content styles)
---------------------------------------------------------------- */

#signup-content {
    max-width: 604px;
    margin: 0 auto;
}

    #signup-welcome .h3 {
        padding-left: 0 !important;
    }

    #activateform #submit {

        /* Required */

        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        border: none;
        font: inherit;
        min-height: 40px;
        width: fit-content;
        width: -moz-fit-content;

        /* Theme */

        background: var(--ixn-color-primary);
        color: var(--ixn-color-white);
        padding: var(--ixn-space-xxsm) var(--ixn-space-xsm);
        text-align: left;
        transition: var(--ixn-transtion-hover); 
        border-radius: var(--ixn-border-radius);
        font-family:  var(--ixn-type-primary);
        font-weight: light;
        font-size: var(--ixn-font-size-primary-body);
        letter-spacing: var(--ixn-letter-spacing-primary-body);
        line-height: 26pt;

    }

/*--------------------------------------------------------------
10. Widgets and plugins
---------------------------------------------------------------- */




/* Utility classes ------------------------------------- */


/* U: Margins */

/* space 0 smallest division */
.u--margin-xsm { margin: var(--ixn-space-xsm) 0; }

/* space 1 is to divide elements within same block */
.u--margin-sm { margin: var(--ixn-space-sm) 0; }

/* space 2 is to divide elements blocks within the same group of blocks */
.u--margin-md { margin: var(--ixn-space-md) 0; }

/* space 3 is to divide group of blocks */
.u--margin-lg { margin: var(--ixn-space-lg) 0; }


.u--margin-top-no, .entry-content .u--margin-top-no { margin-top: 0; }
.u--margin-top-xxxsm { margin-top: var(--ixn-space-xxxsm); }
.u--margin-top-xxsm { margin-top: var(--ixn-space-xxsm); }
.u--margin-top-xsm { margin-top: var(--ixn-space-xsm); }
.u--margin-top-sm { margin-top: var(--ixn-space-sm); }
.u--margin-top-md { margin-top: var(--ixn-space-md); }
.u--margin-top-lg { margin-top: var(--ixn-space-lg); }
.u--margin-top-xlg { margin-top: var(--ixn-space-xlg); }

.u--margin-bottom-no, .u--margin-bot-no { margin-bottom: 0; }
.u--margin-bottom-xxxsm { margin-bottom: var(--ixn-space-xxxsm); }
.u--margin-bottom-xxsm { margin-bottom: var(--ixn-space-xxsm); }
.u--margin-bottom-xsm { margin-bottom: var(--ixn-space-xsm); }
.u--margin-bottom-sm { margin-bottom: var(--ixn-space-sm); }
.u--margin-bottom-md, .entry-content .u--margin-bottom-md { margin-bottom: var(--ixn-space-md); }
.u--margin-bottom-lg { margin-bottom: var(--ixn-space-lg); }
.u--margin-bottom-xlg { margin-bottom: var(--ixn-space-xlg); }

.u--margin-left-no { margin-left: 0; }
.u--margin-left-xsm { margin-left: var(--ixn-space-xsm); }
.u--margin-left-xxsm { margin-left: var(--ixn-space-xxsm); }
.u--margin-left-xxxsm { margin-left: var(--ixn-space-xxxsm); }
.u--margin-left-sm { margin-left: var(--ixn-space-sm); }
.u--margin-left-md { margin-left: var(--ixn-space-md); }
.u--margin-left-lg { margin-left: var(--ixn-space-lg); }
.u--margin-left-xlg { margin-left: var(--ixn-space-xlg); }

.u--margin-right-no { margin-right: 0; }
.u--margin-right-xsm { margin-right: var(--ixn-space-xsm); }
.u--margin-right-xxsm { margin-right: var(--ixn-space-xxsm); }
.u--margin-right-xxxsm { margin-right: var(--ixn-space-xxxsm); }
.u--margin-right-sm { margin-right: var(--ixn-space-sm); }
.u--margin-right-md { margin-right: var(--ixn-space-md); }
.u--margin-right-lg { margin-right: var(--ixn-space-lg); }
.u--margin-right-xlg { margin-right: var(--ixn-space-xlg); }




.u--margin-no { margin: 0; }

.u--margin-top-bottom-no {
  margin-top: 0;
  margin-bottom: 0;
}



/* U: Paddings */

.u--padding-no { padding: 0; }

.u--padding-top-no { padding-top: 0; }

.u--padding-right-no { padding-right: 0 !important; }
.u--padding-left-xsm { padding-left: var(--ixn-space-xsm); }
.u--padding-left-sm { padding-left: var(--ixn-space-sm); }

.u--padding-xsm { padding: var(--ixn-space-xsm); }
.u--padding-sm { padding: var(--ixn-space-sm); }
.u--padding-md { padding: var(--ixn-space-md); }
.u--padding-lg { padding: var(--ixn-space-lg); }


/* U: Hide/Show */

.u--hide { display: none; }

.u--show-md { display: none; } /* These change after media queries*/
.u--show-lg { display: none; }
.u--show-xlg { display: none; }

.u--display-block { display: block; }
.u--overflow-hidden { overflow: hidden; }

.u--bring-forward,
.u--zindex--100 {
    position:  relative;
    z-index: 100;
}

.u--text-align--left {
    text-align: left;
}

.u--text-align--center {
    text-align: center;
}
 
.u--text-align--right {
    text-align: right;
}

.u--img-rounded {
    width: var(--ixn-image-width-thumbnail-small); /* The image width should be this */
    height: var(--ixn-image-width-thumbnail-small);
    -webkit-border-radius: var(--ixn-image-width-thumbnail-small);
    -moz-border-radius: var(--ixn-image-width-thumbnail-small);
    border-radius: var(--ixn-image-width-thumbnail-small);
    overflow: hidden;
}

.u--maxwidth--600 {
    max-width: 604px;
    margin-left: auto;
    margin-right: auto;
}


/* U: Text */

.has-ixn-body-font-size,
.p--font-body {
    font:  var(--ixn-font-body);
    font-weight: normal;
    font-style: normal;
    letter-spacing: var(--ixn-letter-spacing-body);
}

.has-ixn-mini-font-size,
.p--sm {
    font-size: var(--ixn-font-size-mini);
    letter-spacing: var(--ixn-letter-spacing-mini);
    line-height: var(--ixn-line-height-mini);
}

.has-ixn-large-font-size,
.p--lg {
    font: var(--ixn-font-h3);
}


/* U: Colors */

.u--color--red {
    color:  var(--ixn-color-red);
}

.u--color--green {
    color:  var(--ixn-color-green);
}

.u--color--green-strong {
    color:  var(--ixn-color-green--tint-140);
}

/* 
*  Images to full width for extra small screens
*  for custom ixn blocks
*/


@media only screen and (max-width: 375px) {
  .ixn-picture-floating__default, .ixn-picture__default { width: 100%; height: auto; }
}

@media only screen and (max-width: 375px) {
  .ixn-gallery__img { width: 100%; height: auto; }
}



/* 
*  Styles for small screen size exclusively
*  Does not cascade.
*/

@media only screen and (max-width: 700px) {

    /* This rule fixes the wp admin bar position on screens under 600px,
     * @see https://github.com/olefredrik/FoundationPress/issues/8
     */
    #wpadminbar {
       position: fixed;
    }

    .u--hide-sm,
    .u--hide-mobile { display: none; }

    /* Floating box aligns left on mobile always, do you see a case were this is not true? */
    .ixn-box-float--right {margin-left: 0;}

    /* Wp blocks table for mobile */

    .wp-block-table.ixn-table--minimal thead {
        border-bottom:  0;
    }

    /* Force table to not be like tables anymore */
    .wp-block-table table, 
    .wp-block-table thead, 
    .wp-block-table tbody,
    .wp-block-table tfoot, 
    .wp-block-table th, 
    .wp-block-table td, 
    .wp-block-table tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .wp-block-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .wp-block-table tr {
        border-top: var(--ixn-border-primary);
        padding: var(--ixn-space-sm) 0;
        border-bottom:  0;
    }

    .wp-block-table tr:last-child {
      border-bottom: var(--ixn-border-primary);
    }    

    .wp-block-table td { 
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding:  0;
        padding-left:  24px;
    }

    .wp-block-table.ixn-table--minimal table {
        position:  relative;
    }



    .wp-block-table.ixn-table--minimal td {
    }

    
    /* Table cell: last child */

    .ixn-td--last-child {
        text-align:  left;
    }

    /* Table row indented */

    .ixn-table--indented {
        /* width:  50%; */
        margin-left: 0%;
    }    

    
}


/* 
*  Images to full width for medium sizes like tablets
*/

@media only screen and (min-width: 700px) {



    /*--------------------------------
    3. Helper Classes
    */

    .u--show-md { display: initial; }
    .u--show-sm { display: none; }

    /*------------------------------------
    4. Container layout
    */

    .container__in {
        width: 700px;
        margin: 0 auto;
        padding: var(--ixn-space-sm) var(--ixn-space-md);
        max-width: none;
    }

    .container--simple-center .container__in {
        max-width:  800px;
        text-align: center;
    }


    /* Container with sidebar */


    /* Flexbox */

    .flexbox-spaced {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }



    /*------------------------------------
    5. Site Header / Nav / Footer
    */


    .header { 
        padding-bottom: 65px; /* Match space after header */
        height: auto;
    }


    /* Reset critical CSS */
    .nav__item .icon-menu {
        width: auto;
        height: auto;
        display: inline;
    }


    /* Footer */

    .footer-basic,
    .footer-columns {
        padding-top: 75px;
        padding-bottom: var(--ixn-space-lg);
    }




   /*------------------------------------
    6. Page templates
    */


    /* Home page ------------------------------------- 
     * Front cover
    */


    /* Mast */

    .ixn-mast {
        text-align: center;
    }

    /* Blog homepage */

    .ixn-blog {
        display: grid;
        max-width: 100%;      
        grid-template-columns: var(--ixn-image-width-sm) var(--ixn-image-width-sm);
        column-gap: var(--ixn-space-md);
        grid-row-gap: var(--ixn-space-md);
        justify-content: left;
    }


    .ixn-blog--cover-txt,
    .ixn-blog--cover-img,
    .ixn-blog--span-3 {
        grid-column: 1 / span 2;
    }

    .ixn-blog--cover-img { min-height: 10px; }


    .ixn-blog__post { 
        margin: 0;
    }

   .ixn-blog--cover-img .post__img { margin-bottom: 0; }



   /*------------------------------------
    7. Blocks
    */

   /* Hero */

    .ixn-hero {
        width: calc(100% + 96px ); 
        margin-left: -48px;
    }


    /* Cols */

    .cols {
        display: grid;
        max-width: 100%;      
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ixn-space-md);
        grid-row-gap: var(--ixn-space-md);
        justify-content: left;
    }

    .cols__item { 
        /*margin-bottom: 0px; */
    }

    .cols-fluid {
        display: grid;
        max-width: 100%;   
        width: 100%;   
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ixn-space-md);
        grid-row-gap: var(--ixn-space-md);
        justify-content: left;
    }



    /* Blocks Shared Style */

    .entry-content > *:not([class*="margin-bot"]) {
        margin-bottom: var(--ixn-space-sm);
    }


    /* Picture Cover */

    .ixn-picture {
        text-align: center;        
    }

    .container--narrow-bleed > .ixn-picture__caption {
        text-align: left;
    }


   /* Gallery */

   .ixn-gallery { clear: both; }

   .ixn-gallery__grid {
      
        display: grid;
        justify-content: center;
        align-content: center;
        gap: var(--ixn-space-md);
        grid-template-columns: repeat(auto-fit, var(--ixn-image-width-sm) );
   
   }

    .ixn-gallery__item { 
        margin-bottom: 0px; 
    }



    /* Grid with centered orphan item */

    .ixn-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--ixn-space-sm); 
    }

        .ixn-grid__item {
          grid-column: span 2;
          margin-bottom: 0;
        }
          /* Dealing with 2 orphan items */

        .ixn-grid__item:last-child:nth-child(3n - 1) {
          grid-column-end: -2;
        }


        /* Dealing with single orphan */

        .ixn-grid__item:last-child:nth-child(3n - 2) {
          grid-column-end: 5;
        }


    /* WP Block: Floating image ------------------------------ */


    .ixn-picture-floating__picture {
        display: inline-block;
    }

    .ixn-box-float--center,
    .ixn-box-float--left,
    .ixn-box-float--right {
        display: block;
        padding: 0;
    }

    .ixn-box-float--center {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .ixn-box-float--right {
        float: right;
    }

        /* Use default margin if not utility margin assigned */
        .ixn-box-float--right:not([class*="u--margin-top"]) {
            margin-top:  0;
        }

        .ixn-box-float--right:not([class*="u--margin-left"]) {
            margin-left: var(--ixn-space-md);
        } 

    .editor-styles-wrapper .ixn-box-float--left,
    .ixn-box-float--left {
        float: left;
    }

        /* Use default margin if no utility margin assigned */
        .ixn-box-float--left:not([class*="u--margin-top"]) {
            margin-top:  0;
        }

        .ixn-box-float--left:not([class*="u--margin-right"]) {
            margin-right: var(--ixn-space-md);
        } 


    /* WP Block: Floating box ------------------------------ 

    .ixn-box-float--center,
    .ixn-box-float--left,
    .ixn-box-float--right {
        display: block;
        padding: 0;
        max-width: 50%;
    }

    .ixn-box-float--center {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .ixn-box-float--right {
        float: right;
        margin-top:  0;
        margin-left: var(--ixn-space-md);
        margin-right: 0;
        
    }

    .ixn-box-float--left {
        float: left;
        margin-top:  0;
        margin-right: var(--ixn-space-md);
        margin-left: 0;
        
    }*/
    

    /* Slider classes */

    .modal--theme-toolbar.modal-dialog,
    .modal--theme-toolbar .modal__body {   
        max-width: 700px;
    }

    .modal--theme-toolbar .slider__wrapper { 
        width: 600px;
    }


   /* Comments */
   

   .comment {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
   }

   .comment__avatar {
        float: none;
        margin-bottom: 0;
        flex-basis: 105px;
        flex-shrink: 0;
        margin-right: 0;
   }

   .comment__credits {
        margin: 0 0 var(--ixn-space-xsm) 0;
   }

   .comment__text {
        overflow: auto;
        clear: left;
        border-top: none;
        margin: var(--ixn-space-xsm) 0;
        padding-top: 0;
   }

   .sub-comment {
        margin-left: var(--ixn-space-md);
   }

    .sub-sub-comment {
        margin-left: var(--ixn-space-lg);
    }


    /* Comments form */


    .form__label {
        display:  block;
    }

    .form__item {
      margin-bottom: 0;
    }

    .form__row {
        display: grid;
        column-gap: var(--ixn-space-sm);
        grid-template-columns: 1fr;
        margin-bottom: var(--ixn-space-sm);
    }      

        .form__row--halfs {
            grid-template-columns: 1fr 1fr;
        }

    .form__row--thirds { 
        grid-template-columns: 1fr 1fr 1fr; 
    }

    .form__row--fourths { 
        grid-template-columns: 1fr 1fr 1fr 1fr; 
    }


    /* Pagination */

    .pagination {
        margin-top: 0px;
        padding: 0 var(--ixn-space-md);
      flex-wrap: nowrap;
    }

   .comments__pagination {
      width: max-content;
      margin-top: var(--ixn-space-md);
      margin-bottom: var(--ixn-space-md);
   }


   /* WP Block: Gallery ------------------------------ */

 
   .blocks-gallery-grid .blocks-gallery-item:nth-child(odd) {
      margin-right: var(--ixn-space-sm) !important;
   }

    /* Should mostly mimic .container__in, with a few variations */
    .section-bg__container { 
        width: 700px; 
        margin: 0 auto; 
        max-width: none; 
        padding: var(--ixn-space-sm) var(--ixn-space-md);
    }


}


/* 
*  Styles for medium screen size exclusively
*  Does not cascade.
*/

@media screen and (min-width: 701px) and ( max-width:  1025px) {

    .u--hide-md, 
    .u--hide-tablet { display: none; }
    .menulg { display: none; }

}



/* 
*  Landscape tablets and small desktop
*/

@media only screen and (min-width: 1025px) {

   body {
      background-color: white;
   }

    /*--------------------------------
    3. Helper Classes
    */



    /* Dropdown Class */

    .dropdown,
    .sliding-panel,
    .dropdown--display-no,
    .sliding-panel--display-no {

        opacity: 0;
        transform: translateY(1.5em);
        z-index: 10;
        pointer-events: none;
        
        /* this transition is causing troubles 
        transition: all 0.2s ease-in-out 0s, opacity 0.1s linear 0.2s, z-index 0s linear 0.01s;
    */

    }

    .dropdown--display-yes,
    .sliding-panel--display-yes {

        pointer-events: all;
        opacity: 1;
        transform: translateY(0%);
        transition-delay: 0s, 0s, 0s;

    }


    /* Add handler on top of box*/
    .dropdown--handler:after {
        content: "";
        display: block;
        height: 70px;
        width: 70px;
        position: absolute;
        background-color: transparent;
        top: -70px;
        left: 0;
    }


   /* Utilities */

   .u--hide-md,
   .u--show-lg { display: block; }

   .u--hide-lg { display: none; }


   /*
   * valign 
   * Vertically align a box via flexbox
   */

   .u-lg--valign {
        display: flex;
        justify-content: center;
        align-items: center;
   }



    /*--------------------------------
    4. Container Classes
    */    
   
    .container__in {
        width: 1025px;
        margin: 0 auto;
    }


    .container--sidebar .container__in {
        max-width:  100%;
        overflow: ;
        display: grid; 
        grid-auto-flow: column; 
        grid-template-columns: 250px minmax(0, 1fr); 
        grid-template-rows: 1fr; 
        gap: 0px 48px; 
        grid-template-areas: "aside main";
    } 

    .container--md {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }


    /*--------------------------------
    5. Site Header / Nav / Footer
    */


   /* Header */


   /* Menu */

    .main-dropdown-menu-lg { 

        position:  absolute;
        top: 70px;
        right: 50%;
        margin-right: -475px;
        max-width: 300px;
        padding:  var(--ixn-space-sm);
    }


    /* Searchbar */

    .searchbar {
        display: inline-block;
        margin-right: var(--ixn-space-sm);
    }


   /* footer */

   .footer-basic {  
      display: flex;
      justify-content: space-between;
   }

   .footer-basic__aside {
      self-align: right;
      margin-bottom: 0;
   }

   .footer-basic__body {
        margin-bottom:  0;
    }

   .post__toolbox {

        position: absolute;
        max-width: 350px;

   }


    /*--------------------------------
    6. Page Templates
    */




  /* Home page ------------------------------------- 
   * Front cover
  */


  .front-cover { 
        position: relative; 
        text-align: left;
    }

    .front-cover__img {
        position: absolute;
        top: -115px;
        right: -100px;
        margin-top: 0;
    }

    .front-cover__text {
        position: relative;
        z-index: 5;
        margin-top: var(--ixn-space-lg);
        width:  515px;
    }

    .front-cover--ltr .front-cover__text {
        left:  410px;
    }

    .front-cover--ltr .front-cover__img {
        right:  auto;
        left:  -100px;
    }


    #cover-mast { min-height: 480px; }
    #subcover-wedding-done { min-height: 400px; } 
    #subcover-ecobrides { min-height: 400px; }

    #subcover-wedding-done .front-cover__text {
        margin-top:  var(--ixn-space-xsm);
        padding-top:  var(--ixn-space-md);
        width:  430px;
        left:  470px;
    }

    #subcover-wedding-done .front-cover__img {
        left:  -50px;
    }


    #subcover-ecobrides .front-cover__text  {
        margin-top:  var(--ixn-space-xsm);
        padding-top:  var(--ixn-space-md);
        width:  430px;
        left:  35px;
    }

    #subcover-ecobrides .front-cover__img {
        
    }    


    /* Price cards */

   .cards-3 {
        display:  flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width:  100%;
    }

        .cards-3__item {
            flex: 0 0 260px;
            margin-top: var(--ixn-space-sm);
            margin-bottom: var(--ixn-space-md);
            position:  relative;
            padding-bottom: 70px;
        }

        .cards-3__cta {
            position:  absolute;
            bottom:  10px;
        }



    /* Blog */

    .ixn-blog {
        column-gap: var(--ixn-space-md);
        grid-template-columns: 1fr 1fr 1fr;

    }

      /* Reset position */
      .ixn-blog--cover-img { grid-column: 3 / span 1; min-height: 275px;}
      .ixn-blog--cover-txt { justify-self: left; }

      .ixn-blog--span-2 {
            grid-column: 1 / span 2;
         }


         .ixn-blog--span-3 {
            grid-column: 1 / span 3;
         }

   .ixn-blog__post { 
      margin: 0;
   }

   
   /* Container */

   .container--narrow .container__in { 

        margin: 0 auto;
        width:  700px;

    }

    .container--md .container__in { 

        margin: 0 auto;
        width:  1025px;

    }


    /* Control panel  */ 

    .control-panel-nav {
        padding:  var(--ixn-space-sm);
    }

    .ixn-cp-cfdi-create__rfcs {
        width:  75%;
    }


    /*--------------------------------
    7. 
    */


    /* Grids */

    .l-grid { 
        padding: 0;
        list-style: none;
      }

    .l-grid__item {
        list-style: none;
    }


     /* Grids */

    .l-grid { 
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        justify-content: space-around;
        flex-wrap: nowrap;
    }

        .l-grid__item {
            flex: 1;
        }

        .l-grid--col-2 .l-grid__item { width: 50%; }
        .l-grid--col-3 .l-grid__item { width: 33.33333%; }
            .l-grid--col-4 .l-grid__item { width: 25%; }

        
        .l-grid--gap-lg {}

        .l-grid--gap-lg .l-grid__item {
            margin: 0 5px;
        }


    /* Hero */

    .ixn-hero {
        
        height: 541px;
        position: relative;
    }

        .ixn-hero__body {
            background-color: var(--ixn-color-primary);
            width: 550px;
            padding: var(--ixn-space-md);
            position: relative;
            top: 130px;
        }

            .ixn-hero__body h1, .ixn-hero__body h2 {
                color: var(--ixn-color-white);
            }

        .ixn-hero__img { display: none; }


    /* Section */

    .section-bg__container { width: 1025px; }

    .section { 
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

     .section__header { 
      width: 100%; /* Some wrappers are 929px wide, other 1025 */
      text-align: center; 
      margin-bottom: 1.2em;
    }
    

    /* Section Gallery */


    .section-gallery__body { 
        width: calc( 100% - 440px );
        float: left; 
        padding-right: var(--ixn-space-md);
    }

    .section-gallery__aside {
        float:right;
        width: 440px; 
    }

    .section__img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    /* Section B: subcover type card 
       This is a mixin with l-grid
    */

    .section-b {
        column-gap: 48px; 
    }

        .section-b__item {
            flex: 1;
        }

    .section-b--reversed {
        flex-direction: row-reverse;
    }


    /* Tables */

     .c-table { 
        border-collapse: collapse; 
        text-align: left; 
        width: 100%; 
     } 

        .c-table__row--is-alt,
        .c-table__row:nth-child(odd) { 
            background-color: #E7DFD9; 
            color: #38281D; 
        }


        .c-table__cell { 
            vertical-align: top;
            padding: 3px 5px; 
            color: #38281D; 
            width: auto;
        }

        .c-table__cell:first-child { border-left: none; }
        .c-table__row:last-child c-table__cell { border-bottom: none; }

        .c-table--a .c-table__cell:first-child {
            width: 105px;
            text-align: left;
        }


    /* C-Content */

    .l-content {
      width: 100%;
      margin-top: 30px;
    }

      .l-content--max-width-650 {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
      }

      .l-content--text-center {
        text-align: center;
      }

      .l-content--text-left {
        text-align: left;
      }

      /* Post */

      .l-content__header,
      .l-content__body, 
      .l-content__thumb {
        margin: 20px 0;
      }


    /* 
    *  Landscape phones
    */

    @media only screen and (min-width: 650px) {


      /* l-Content */

      .l-content__header,
      .l-content__body {
        margin: 30px 0;
      }

      .l-content__post--has-thumbnail.l-content__body { 
        position: relative; 
        min-height: 150px
      }

      .l-content__post--has-thumbnail .l-content__thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 138px;
        margin: 0 30px 30px 0;
      }

      .l-content__post--has-thumbnail .l-content__excerpt {
        border-left: 160px solid transparent;
      }
      

    }


    /*--------------------------------
    7. Blocks
    */

    
    /* Cols */

    .cols, 
    .cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .cols-2 {
        grid-template-columns: var(--ixn-image-width-sm) var(--ixn-image-width-sm);
        justify-content: center;
    }

        .cols-2--free {
            grid-template-columns: 1fr 1fr;
        }

    .cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }  

    .cols-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }  
    
    .cols-2-wide {
        grid-template-columns: var(--ixn-col-width) var(--ixn-col-width);
        justify-content: center;
    }  


    /* Cols 2 float ------------------------------ */

    .cols-2-float {
        width: 100%;
    }
        .cols-2-float > div:nth-child(2) {
            float: left; 
            width: 440px;
        }

        .cols-2-float > div:nth-child(1) {
            float: right;
            width: calc( 100% - 440px );
            padding-left: var(--ixn-space-md);
        }
     

   
    /* Backdrop */

    .backdrop-sm { display: none; }
    

    /* Gallery */

    .ixn-gallery__grid {     
        gap: var(--ixn-space-sm);
    }


    /* Grid with centered orphan item */

    .ixn-grid {
        grid-template-columns: repeat(6, 1fr);
    }

        .ixn-grid__item:nth-last-child(2):nth-child(3n + 1) {
          grid-column-end: 4;
        }

    /* Floating Box ------------------------------ */

    .ixn-box-float--right:not([class*="ixn-floating-right"]) {
        margin-right: -96px; /* Default right margin */ 
    }
        
        .ixn-box-float--right.ixn-floating-right--no {
            margin-right: 0px;
        }

        /* Floating image to right, margin negatives classes */
        .ixn-floating-right--xxxsm {
            margin-right: calc(var(--ixn-space-xxxsm) * -1);
        }
        .ixn-floating-right--xxsm {
            margin-right: calc(var(--ixn-space-xxsm) * -1);
        }
        .ixn-floating-right--xsm {
            margin-right: calc(var(--ixn-space-xsm) * -1);
        }
        .ixn-floating-right--sm {
            margin-right: calc(var(--ixn-space-sm) * -1);
        }
        .ixn-floating-right--md {
            margin-right: calc(var(--ixn-space-md) * -1);
        }
        .ixn-floating-right--lg {
            margin-right: calc(var(--ixn-space-lg) * -1);
        }
        .ixn-floating-right--xlg {
            margin-right: calc(var(--ixn-space-xlg) * -1);
        }

        
    .ixn-box-float--left:not([class*="ixn-floating-left"]) {
        margin-left: -96px; /* Default left margin */
    }

        .ixn-box-float--left.ixn-floating-left--no {
            margin-left: 0px;
        }

        /* Floating box to left, margin negatives */
        .ixn-floating-left--xxxsm {
            margin-left: calc(var(--ixn-space-xxxsm) * -1);
        }
        .ixn-floating-left--xxsm {
            margin-left: calc(var(--ixn-space-xxsm) * -1);
        }
        .ixn-floating-left--xsm {
            margin-left: calc(var(--ixn-space-xsm) * -1);
        }
        .ixn-floating-left--sm {
            margin-left: calc(var(--ixn-space-sm) * -1);
        }
        .ixn-floating-left--md {
            margin-left: calc(var(--ixn-space-md) * -1);
        }
        .ixn-floating-left--lg {
            margin-left: calc(var(--ixn-space-lg) * -1);
        }
        .ixn-floating-left--xlg {
            margin-left: calc(var(--ixn-space-xlg) * -1);
        }


    /* Modal Gallery ------------------------------------- 
    * Fit to art directed image sizes
    */


    /* Makes slider fit to the picture size 
     * Works with modal--fit-picture-size 
    */

    .slider--fit-picture-size .c-gallery__caption {
        padding-left:  var(--ixn-space-xsm);
        padding-bottom: var(--ixn-space-xxsm);
    }
        


    /* Slider classes */

    .modal--theme-toolbar.modal-dialog {
        max-width: 1025px; /* container size */
    }
    .modal--theme-toolbar .modal__body {   
        max-width: 1025px; /* container size */
    }

    .modal--theme-toolbar .slider__wrapper { 
        width: 1023px;
    }

    .c-gallery__item { 
        align-items: flex-start;
    }

    .modal-gallery.modal-dialog {
        position: relative;
        width: 100%;
        max-width: 1025px; /* container size */
        margin: 0 auto;
        pointer-events: none;
    } 

    .modal-gallery .modal__body {   
        padding-bottom: var(--ixn-space-sm);
    }


    /* Comments */

    .sub-comment,
    .sub-sub-comment {
      width: 600px;
    }


   /* Pagination */

    .pagination {
        padding: 0 var(--ixn-space-sm);
    }


    /* Tables */

    /* Table cell: last child */

    .ixn-td--last-child {
        text-align:  right;
    }




   /* Modal ------------------------------------- 
    * 
   */

   .modal__header,
   .modal__footer,
   .modal__body {
      padding: var(--ixn-space-md);
   }
   .modal__header {padding-bottom: var(--ixn-space-sm);}
   .modal__body {
      padding-top: 0;
   }




   /* WP Block shared styles ------------------------------ */


   /* Bleed left on narrow container */

    .wp-block .container--narrow-bleed,
    .container--narrow-bleed {
        width:  1025px;
        margin-left:  -211px;
    }

    .container--narrow-bleed-sm {
        width:  900px;
        margin-left:  -150px;
        max-width: 900px;
    }


    .container--wide-bleed {
        width:  1025px;
        margin-left:  -48px;
    }

    .container--wide-bleed-sm {
        width:  900px;
        margin-left:  -150px;
        max-width: 900px;
    }



    /* Align caption to margin */

    .container--narrow-bleed > .ixn-gallery__caption,
    .container--narrow-bleed > .ixn-picture__caption,
    .blocks-gallery-caption {
        
        width: 604px;
        margin-right: auto;
        margin-left: auto;


    }



    /* Image ------------------------------ */

    /* Center picture */
    .ixn-picture__default { 
        margin: 0 auto;
    }

    /* WP Block: Gallery ------------------------------ */
   
 
    .wp-block-gallery {
      width: 1025px;
    }

    .blocks-gallery-grid .blocks-gallery-item {
      margin-right: var(--ixn-space-sm) !important;
    }

    .blocks-gallery-grid .blocks-gallery-item:nth-child(3) {
      margin-right: 0 !important;
    }

      /* Quote */

    .quote {
        max-width: 650px;
        margin: 0 auto 100px;
    }

    .quote__footer {
        padding-left: 40px;
    }


}


@media screen and (min-width: 1026px) and ( max-width:  1350px) {

    .u--hide-laptop { display: none; }

    /* All section gallery will most likely use 100% for container */
    .section-bg .section-gallery {
        width: 1025px;
    }
}


/* 
*  Large desktop
*/

@media only screen and (min-width: 1350px) {


    /*--------------------------------
    4. Container Classes
    */
    
   
    .container__in {
        width: 1350px;
        margin: 0 auto;
    }

    .container--sidebar .container__in {
        grid-template-columns: 275px minmax(0, 1fr); 
    } 


    /*--------------------------------
    5. Site Header / Nav / Footer
    */

    
    /* Menu */

    .main-dropdown-menu-lg { 
        margin-right: -625px;
    }


    .ixn-blog--span-3 {
        grid-column: 1 / span 4;
    }

    /* Blog */

    .ixn-blog {
        column-gap: var(--ixn-space-md);
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }

    /* Control panel  */ 

    .ixn-cp-cfdi-create__rfcs {
        width:  50%;
    }


    /*--------------------------------
    7. Layout Blocks
    */


    /* Section */
    .section-bg__container { 
        width: 1350px; 
        padding-right: 0;
        padding-left: 0;
    }

    .section { width: 1040px; }

    .container--wide-bleed {
        width:  1025px;
        margin-left:  auto;
        margin-right:  auto;
    }

    .ixn-picture.container--wide-bleed {
        width:  auto;
    }


    

    /*--------------------------------
    7. Blocks
    */

    .wp-block .container--narrow-bleed,
    .container--narrow-bleed {
        width:  1350px;
        margin-left:  -373px;
    }

 

   /* Image ------------------------------ */




   /* WP Block: Gallery ------------------------------ */
   
 
    /*.wp-block-gallery {
      width: 1025px;
    }*/

    .blocks-gallery-grid .blocks-gallery-item {
      margin-right: var(--ixn-space-sm) !important;
    }

    .blocks-gallery-grid .blocks-gallery-item:nth-child(3) {
      margin-right: 0 !important;
    }


    /* Section B: subcover type card 
       This is a mixin with l-grid
    */

    /* Make sure images stay aligned to center of grid */
    .section-b__picture {
        text-align: right;
    }

    .section-b--reversed .section-b__picture {
        text-align: left;
    }


    /* Utilities ----------------- */

   .u--show-xlg { display: block; }
   .u--hide-xlg,
   .u--hide-desktop { display: none; }


}