/**
 
Table of Contents
===================================================================================
#Variables
#Column Widths
#Max-widths for Color sections and Columns 
#FULL width Color Sections
#Section Padding (top and bottom)
#Display (flex and grid settings)
#Set the content width to 10 columns instead of 12
#Flex Columns Table - NO GAP






/* ================================================================================ */
/* #Variables
/* ================================================================================ */
:root {
  /* Column gap - based on e1 Indesign Template
  --------------------------------------------------------------------------------- */
  /* --column-gap: 12px; */
  /* --column-gap: 24px; */
  /* --column-gap: 36px; */
  --column-gap: 48px;
  /* --column-gap: 60px; */
  /* --column-gap: 72px; */



  /* DO NOT EDIT BELOW
  --------------------------------------------------------------------------------- */
  --container-width: 1440px;
  --container-padding: 90px;
  --content-width: calc( var(--container-width) - (var(--container-padding) * 2) ); /* content width = 1260px */
} 


.responsive .container { max-width: var(--container-width); }


@media only screen and (min-width: 850px) {
  .container { padding: 0 40px; }
}


@media only screen and (min-width: 1261px) {
  .container { padding: 0 50px; }
}


@media only screen and (min-width: 1400px) {
  .container { padding: 0 var(--container-padding); }
}




/* ================================================================================ */
/* #Column Widths (DO NOT EDIT)
/* ================================================================================ */

/* Reset Enfold Columns
----------------------------------------------------------------------------------- */
.entry-content-wrapper.clearfix:before,
.entry-content-wrapper.clearfix:after,
#footer .container:before,
#footer .container:after { 
  display: none;
}


.entry-content-wrapper,
#footer .container { 
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}


#main .flex_column { 
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
} 


/* Make NEW columns based on 'e1 Template – Website (1260px content width)' 
----------------------------------------------------------------------------------- */
:root {
  /* Fifths column sizes
  --------------------------- */
  /* Content width MINUS the column gaps */
  --one-fifth-content-width-minus-gaps: calc( 100% - (var(--column-gap) * 4) );

  /* Fifths Column widths */
  --one-fifth-width: calc( var(--one-fifth-content-width-minus-gaps) / 5 );
  --two-fifth-width: calc( (var(--one-fifth-width) * 2) + var(--column-gap) );
  --three-fifth-width: calc( (var(--one-fifth-width) * 3) + (var(--column-gap) * 2) );
  --four-fifth-width: calc( (var(--one-fifth-width) * 4) + (var(--column-gap) * 3) );

  
  /* ALL other column sizes
  --------------------------- */
  /* Span Columns - for use with adjusting flex-columns */
  --content-width-minus-all-gaps: calc( 100% - (var(--column-gap) * 11) );
  --one-column-width: calc( var(--content-width-minus-all-gaps) / 12 );

  --span-columns-x2: calc( (var(--one-column-width) * 2) + var(--column-gap) );
  --span-columns-x3: calc( (var(--one-column-width) * 3) + (var(--column-gap) * 2) ); /* equals 1/4 */
  --span-columns-x4: calc( (var(--one-column-width) * 4) + (var(--column-gap) * 3) ); /* equals 1/3 */
  --span-columns-x5: calc( (var(--one-column-width) * 5) + (var(--column-gap) * 4) );
  --span-columns-x6: calc( (var(--one-column-width) * 6) + (var(--column-gap) * 5) ); /* equals 1/2 */
  --span-columns-x7: calc( (var(--one-column-width) * 7) + (var(--column-gap) * 6) );
  --span-columns-x8: calc( (var(--one-column-width) * 8) + (var(--column-gap) * 7) );
  --span-columns-x9: calc( (var(--one-column-width) * 9) + (var(--column-gap) * 8) ); /* equals 3/4 */
  --span-columns-x10: calc( (var(--one-column-width) * 10) + (var(--column-gap) * 9) );
  --span-columns-x11: calc( (var(--one-column-width) * 11) + (var(--column-gap) * 10) );
}



.responsive #top #wrap_all .flex_column { 
  margin-bottom: 32px;
}


@media only screen and (min-width: 850px) {
  .entry-content-wrapper,
  #footer .container { 
    flex-direction: row;
  }


  #main .flex_column { 
    flex: 0 0 auto; 
    margin-bottom: var(--column-gap);
  }
  

  #main .av_one_half { flex: 0 0 var(--span-columns-x6); } 

  #main .av_one_third { flex: 0 0 var(--span-columns-x4); } 
  #main .av_two_third { flex: 0 0 var(--span-columns-x8); }

  #main .av_one_fourth { flex: 0 0 var(--span-columns-x3); } 
  #main .av_three_fourth { flex: 0 0 var(--span-columns-x9); }

  #main .av_one_fifth { flex: 0 0 var(--one-fifth-width); } 
  #main .av_two_fifth { flex: 0 0 var(--two-fifth-width); }
  #main .av_three_fifth { flex: 0 0 var(--three-fifth-width); }
  #main .av_four_fifth { flex: 0 0 var(--four-fifth-width); }
}




/* ================================================================================ */
/* #Max-widths for Color sections and Columns (DO NOT EDIT)
/* ================================================================================ */
:root { 
  /* Why the below calculations? - gets set px widths instead of %, good for max-width */

  /* Get multiple column gaps */
  --column-gap-x2: calc(var(--column-gap) * 2);
  --column-gap-x3: calc(var(--column-gap) * 3);
  --column-gap-x4: calc(var(--column-gap) * 4);
  --column-gap-x5: calc(var(--column-gap) * 5);
  --column-gap-x6: calc(var(--column-gap) * 6);
  --column-gap-x7: calc(var(--column-gap) * 7);
  --column-gap-x8: calc(var(--column-gap) * 8);

  /* Get the content width MINUS ALL the column gaps */
  --content-width-minus-gaps: calc( var(--content-width) - (var(--column-gap) * 11) );

  /* Get the size of a column */
  --column: calc( var(--content-width-minus-gaps) / 12 );

  /* Get the width of multiple columns (does NOT include the gaps) */
  --column-x2: calc(var(--column) * 2);
  --column-x3: calc(var(--column) * 3);
  --column-x4: calc(var(--column) * 4);
  --column-x5: calc(var(--column) * 5);
  --column-x6: calc(var(--column) * 6);
  --column-x7: calc(var(--column) * 7);
  --column-x8: calc(var(--column) * 8);
  --column-x9: calc(var(--column) * 9);
  --column-x10: calc(var(--column) * 10);

  /* Span accross columns (including the gaps) - in PX - for use with max-width ONLY  */
  --columns-span-12: calc( var(--content-width) );  /* Content width */
  --columns-span-10: calc( var(--content-width) - ( var(--column-x2) + (var(--column-gap) * 2) ) );
  --columns-span-9: calc( var(--content-width) - ( var(--column-x3) + (var(--column-gap) * 3) ) ); 
  --columns-span-8: calc( var(--content-width) - ( var(--column-x4) + (var(--column-gap) * 4) ) ); 
  --columns-span-7: calc( var(--content-width) - ( var(--column-x5) + (var(--column-gap) * 5) ) ); 
  --columns-span-6: calc( var(--content-width) - ( var(--column-x6) + (var(--column-gap) * 6) ) ); 
  --columns-span-5: calc( var(--content-width) - ( var(--column-x7) + (var(--column-gap) * 7) ) ); 
  --columns-span-4: calc( var(--content-width) - ( var(--column-x8) + (var(--column-gap) * 8) ) );
  --columns-span-3: calc( var(--content-width) - ( var(--column-x9) + (var(--column-gap) * 9) ) ); 
  --columns-span-2: calc( var(--content-width) - ( var(--column-x10) + (var(--column-gap) * 10) ) ); 
}


/* Max-width for Color Sections + Flex Columns and Textblocks
----------------------------------------------------------------------------------- */
.avia-section,
.avia_textblock {
  margin: 0 auto; 
  float: none;
}


/* Max-width - aligining to columns */
#main .max-width--columns-12,
#main .max-width--columns-10,
#main .max-width--columns-8,
#main .max-width--columns-6,
#main .max-width--columns-5,
#main .max-width--columns-4,
#main .max-width--columns-3,
#main .max-width--columns-2 { 
  max-width: 100%; 
  width: 100%; 
  margin-left: auto;
  margin-right: auto;
}


/* Max-width - set pixels */
#main .max-width--1200,
#main .max-width--1100,
#main .max-width--1000,
#main .max-width--950,
#main .max-width--900,
#main .max-width--850,
#main .max-width--800,
#main .max-width--750,
#main .max-width--700,
#main .max-width--650,
#main .max-width--600,
#main .max-width--550,
#main .max-width--500,
#main .max-width--450,
#main .max-width--400,
#main .max-width--350 { 
  margin-left: auto;
  margin-right: auto;
}


#main .max-width--align-left { margin-left: 0; }


@media only screen and (min-width: 850px) {
  /* Max-width - aligning to columns */
  #main .max-width--columns-12 { max-width: var(--columns-span-12); }
  #main .max-width--columns-10 { max-width: var(--columns-span-10); }
  #main .max-width--columns-8 { max-width: var(--columns-span-8); }
  #main .max-width--columns-6 { max-width: var(--columns-span-6); }
  #main .max-width--columns-5 { max-width: var(--columns-span-5); }
  #main .max-width--columns-4 { max-width: var(--columns-span-4); }
  #main .max-width--columns-3 { max-width: var(--columns-span-3); }
  #main .max-width--columns-2 { max-width: var(--columns-span-2); }


  /* Max-width - set pixels */
  .max-width--1200 { max-width: 1200px; }
  .max-width--1100 { max-width: 1100px; }
  .max-width--1000 { max-width: 1000px; }
  .max-width--950 { max-width: 950px; }
  .max-width--900 { max-width: 900px; }
  .max-width--850 { max-width: 850px; }
  .max-width--800 { max-width: 800px; }
  .max-width--750 { max-width: 750px; }
  .max-width--700 { max-width: 700px; }
  .max-width--650 { max-width: 650px; }
  .max-width--600 { max-width: 600px; }
  .max-width--550 { max-width: 550px; }
  .max-width--500 { max-width: 500px; }
  .max-width--450 { max-width: 450px; }
  .max-width--400 { max-width: 400px; }
  .max-width--350 { max-width: 350px; }


  /* Max-width - set pixels, for sections */
  .section-max-width--1200 .container { max-width: calc(1200px + 180px); }
  .section-max-width--1100 .container { max-width: calc(1100px + 180px); }
  .section-max-width--1000 .container { max-width: calc(1000px + 180px); }
  .section-max-width--950 .container { max-width: calc(950px + 180px); }
  .section-max-width--900 .container { max-width: calc(900px + 180px); }
  .section-max-width--850 .container { max-width: calc(850px + 180px); }
  .section-max-width--800 .container { max-width: calc(800px + 180px); }
  .section-max-width--750 .container { max-width: calc(750px + 180px); }
  .section-max-width--700 .container { max-width: calc(700px + 180px); }
  .section-max-width--650 .container { max-width: calc(650px + 180px); }
  .section-max-width--600 .container { max-width: calc(600px + 180px); }
  .section-max-width--550 .container { max-width: calc(550px + 180px); }
  .section-max-width--500 .container { max-width: calc(500px + 180px); }
  .section-max-width--450 .container { max-width: calc(450px + 180px); }
  .section-max-width--400 .container { max-width: calc(400px + 180px); }
  .section-max-width--350 .container { max-width: calc(350px + 180px); }
}


@media only screen and (min-width: 1162px) {
  #main .section-max-width--columns-10 .container { 
    max-width: var(--columns-span-10); 
    padding: 0;
  }
}




/* ================================================================================ */
/* #FULL width Color Sections
/* ================================================================================ */

.responsive #top #wrap_all #main .section--full-width .container { 
  max-width: 100%; 
  width: 100%; 
  padding: 0;
}




/* ================================================================================ */
/* #Section Padding (top and bottom)
/* ================================================================================ */

:root {
  --section-padding-vertical: 35px;
}
 
/* Padding for Color Sections */
.content, .sidebar {
  padding-top: calc(var(--section-padding-vertical) * 3);
  padding-bottom: calc(var(--section-padding-vertical) * 3);
}

.home .content, .home .sidebar {
  padding-top: calc(var(--section-padding-vertical));
  padding-bottom: calc(var(--section-padding-vertical) - 20px);
}

.no-padding--top .content,
.home .no-padding--top .content { padding-top: 0; }



@media only screen and (min-width: 850px) {
  :root {
    --section-padding-vertical: 50px;
  }
}




/* ================================================================================ */
/* #Display (flex and grid settings)
/* ================================================================================ */

.flex { display: flex; }
.grid { display: grid; }

.flex-direction--column { flex-direction: column; }
.flex-direction--row { flex-direction: row; }

.justify-content--center { justify-content: center; }

.align-items--center { align-items: center; }

.flex .avia-button-wrap { width: 100%; }






/* ================================================================================ */
/* #Set the content width to 10 columns instead of 12
/* ================================================================================ */

@media only screen and (min-width: 850px) {
  .avia-section .entry-content-wrapper { 
    margin: 0 auto;
    max-width: var(--columns-span-10);
  }

  .avia-section.section--full-width .entry-content-wrapper { 
    max-width: 100%;
  }
}





/* ================================================================================ */
/* #Flex Columns Table - NO GAP  
   - add class .no-gap to section
   - add class .bg-img to flex column (if has background image)
/* ================================================================================ */

/* Flex Column (NO GAP) Container */
#top #wrap_all #main .no-gap .flex_column_table.av-equal-height-column-flextable {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


/* Flex Columns (NO GAP) */
.responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column:first-of-type {
  flex-basis: 44%;
}


.responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column:last-of-type {
  flex-basis: 56%;
}


.responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  padding-top: 90px;
  padding-bottom: 90px;
  padding-left: 32px;
  padding-right: 32px;
  margin-bottom: 0;
}


/* Flex Columns - Has Background Image */
.responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column.bg-img {
  min-height: 600px;
  background-size: cover;
  background-position: center center;
}


@media only screen and (max-width: 849px) {
  /* Flex Column (NO GAP) Container */
  #top #wrap_all #main .no-gap .flex_column_table.av-equal-height-column-flextable {
    flex-direction: column;
  }


  /* Flex Columns (NO GAP) */
  .responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column {
    padding-top: 30px;
    padding-bottom: 40px;
    align-items: center;
  }


  .responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column.bg-img {
    min-height: 300px;
  }


  /* Flex Columns - Has Background Image */
  .responsive #top #wrap_all #main .no-gap .flex_column.av-equal-height-column.bg-img {
    min-height: 300px;
    background-size: cover;
    background-position: center center;
  }


  /* Flex Columns - Text Block */
  #main .no-gap .flex_column.av-equal-height-column .av_textblock_section {
    max-width: 340px;
  }
}