/*////////////////////////////////////// 

DESIGN SYSTEM 2.0 - UTILITIES LIST
----------------------------------------
* OHIO STATE COLOR PALLETE 
* FONTS & TYPOGRAPHY
* MARGIN & PADDING
* HEIGHT & WIDTH 
* OVERFLOW 
* DISPLAY
* FLEX-BOX
* LAYOUT CONTAINERS
* BORDERS & BORDER-RADIUS
* OVERLAYS
* MIX BLEND MODES
* HOVER STYLES
* IMAGE POSITION 
* ANIMATION
* ICONS
* MEDIA QUERIES

//////////////////////////////////////*/

html{
    scroll-behavior: smooth;
}
html,
body{
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    
}
 
/* *, *:after, *:before  {
    box-sizing: border-box;
    padding:0;
    margin:0;
} */

img{
    position: relative;
    width: inherit;
    height: inherit;
    z-index: 0;
}

section, .content-band, div{
    background: transparent;
    transition: all .2s ease-in-out;
}

/* ////////////////////////
    COLOR VARIABLES 
////////////////////////*/

:root{

    /* Neutral Grays */

    --gray-800: #2c2c2c;
    --gray-700: #434343;
    --gray-600: #8C8C8C;
    --gray-500: #BFBFBF;
    --gray-400: #D9D9D9;
    --gray-300: #E8E8E8;  
    --gray-250: #F0F0F0;
    --gray-200: #F2F2F2;
    --gray-100: #F6F6F6;
    --gray-50:  #F7F7F7;

    /* Primary Colors */  

    --maroon-800: #700017;
    --maroon-700: #8B3043;
    --maroon-600: #99495A;
    --maroon-500: #AA6D7E;
    --maroon-400: #BF95A5;
    --maroon-300: #E9D9DC;
    --maroon-200: #F5EEEE;
    --maroon-100: #FAF6F6;
    --maroon-lte-100: #faf6f6;
    --maroon-lte-200: #f5eeee;

    --red-800: #EA1014;
    --red-700: #F1353A;
    --red-600: #F4595C;
    --red-500: #F57174;
    --red-400: #F7888B;
    --red-300: #F9ACAE;
    --red-200: #FBC4C5;
    --red-100: #FDE7E7;
    --red-50: #faf6f6;

    --blue-800: #3d7aa9;
    --blue-700: #4781ad;
    --blue-600: #5f91b7;
    --blue-500: #749fc1;
    --blue-400: #9ebcd4;
    --blue-300: #c4d7e5;
    --blue-200: #e2ebf2;
    --blue-100: #f4f7fa;
    --blue-lte-100: #eff0f5;

    --lte-blue-800: #73A5CC;
    --lte-blue-700: #88B2D4;
    --lte-blue-600: #A4C4DE;
    --lte-blue-500: #C0D6E8;
    --lte-blue-400: #CEE0ED;
    --lte-blue-300: #DCE8F2;
    --lte-blue-200: #EAF2F7;
    --lte-blue-100: #F4F8FB;

    --gold-800: #ffbe0e;
    --gold-700: #ffce4a;
    --gold-600: #fad87b;
    --gold-500: #f8de9b;
    --gold-400: #f6e2b2;
    --gold-300: #f4e7ca;
    --gold-200: #f2ebdd;
    --gold-100: #f3f1ed;

    --drk-green-800: #5E8000;
    --drk-green-700: #6E8C19;
    --drk-green-600: #7E9933;
    --drk-green-500: #8EA64C;
    --drk-green-400: #AEBF7F;
    --drk-green-300: #C7D3A6;
    --drk-green-200: #DFE6CC;
    --drk-green-100: #EFF2E5;

    --green-800: #B5DC10;
    --green-700: #BCDF27;
    --green-600: #C4E340;
    --green-500: #CBE657;
    --green-400: #DAED87;
    --green-300: #E5F3AC;
    --green-200: #F0F8CF;
    --green-100: #F7FBE7;


/* OHID COLORS */

    --ohid-blue-100: #EBF7FF;
    --ohid-blue-200: #D9EFFF;
    --ohid-blue-300: #BFE5FF;
    --ohid-blue-400: #A6DAFF;
    --ohid-blue-500: #8CD0FF;
    --ohid-blue-600: #59BBFF;
    --ohid-blue-700: #26A6FF;
    --ohid-blue-800: #0096FF;

    --ohid-drk-blue-100: #ECF0F4;
    --ohid-drk-blue-200: #DAE3E9;
    --ohid-drk-blue-300: #C2D0DB;
    --ohid-drk-blue-400: #A9BDCC;
    --ohid-drk-blue-500: #91AABE;
    --ohid-drk-blue-600: #6084A1;
    --ohid-drk-blue-700: #2F5E84;
    --ohid-drk-blue-800: #0A426E;
    

/* IOP COLORS */   
--iop-lt-blue-800: #40b0ff;
--iop-blue-800: #0096ff;
--iop-drk-blue-800: #004393;   


/* ////////////////////////////
    FONT VARIABLES
/////////////////////////////*/
    --lte: 300;
    --reg: 400;
    --semi: 600;
    --bold: 700;
}

/* /////////////////////////////////
    OH COLOR PALLETE CLASSES
//////////////////////////////////*/

.transparent { background: transparent!important;}
.white{background: #FFF!important}
.black{background: #000!important}

/* Primary Shortcuts */
.red{background: var(--red-800)!important}
.blue{background: var(--blue-800)!important}
.gold{background: var(--gold-800)!important}
.green{background: var(--green-800)!important}

/* Primary Colors & Tints */

/* Maroon */
.maroon-800 {background: var(--maroon-800)!important}
.maroon-700 {background: var(--maroon-700)!important}
.maroon-600 {background: var(--maroon-600)!important}
.maroon-500 {background: var(--maroon-500)!important}
.maroon-400 {background: var(--maroon-400)!important}
.maroon-300 {background: var(--maroon-300)!important}
.maroon-200 {background: var(--maroon-200)!important}
.maroon-100 {background: var(--maroon-100)!important}

/* Maroon - Neutrals */
.maroon-lte-100 {background: #faf6f6!important;}
.maroon-lte-100 {background: #f5eeee!important;}

/* Red */
.red-800 {background: var(--red-800)!important}
.red-700 {background: var(--red-700)!important}
.red-600 {background: var(--red-600)!important}
.red-500 {background: var(--red-500)!important}
.red-400 {background: var(--red-400)!important}
.red-300 {background: var(--red-300)!important}
.red-200 {background: var(--red-200)!important}
.red-100 {background: var(--red-100)!important}
.red-50 {background: var(--red-50)!important}

/* Blue */
.blue-800 {background: var(--blue-800)!important}
.blue-700 {background: var(--blue-700)!important}
.blue-600 {background: var(--blue-600)!important}
.blue-500 {background: var(--blue-500)!important}
.blue-400 {background: var(--blue-400)!important}  
.blue-300 {background: var(--blue-300)!important}
.blue-200 {background: var(--blue-200)!important}
.blue-100 {background: var(--blue-100)!important}

.blue-lte-100 {background: #eff0f5;}

/* Secondary Colors */

/* Light Blue */
.lte-blue-800 {background: var(--lte-blue-800)!important}
.lte-blue-700 {background: var(--lte-blue-700)!important}
.lte-blue-600 {background: var(--lte-blue-600)!important}
.lte-blue-500 {background: var(--lte-blue-500)!important}
.lte-blue-400 {background: var(--lte-blue-400)!important}  
.lte-blue-300 {background: var(--lte-blue-300)!important}
.lte-blue-200 {background: var(--lte-blue-200)!important}
.lte-blue-100 {background: var(--lte-blue-100)!important}

/* Gold */
.gold-800 {background: var(--gold-800)!important}
.gold-700 {background: var(--gold-700)!important}
.gold-600 {background: var(--gold-600)!important}
.gold-500 {background: var(--gold-500)!important}
.gold-400 {background: var(--gold-400)!important}
.gold-300 {background: var(--gold-300)!important}
.gold-200 {background: var(--gold-200)!important}
.gold-100 {background: var(--gold-100)!important}

/* Green */
.green-800 {background: var(--green-800)!important}
.green-700 {background: var(--green-700)!important}
.green-600 {background: var(--green-600)!important}
.green-500 {background: var(--green-500)!important}
.green-400 {background: var(--green-400)!important}
.green-300 {background: var(--green-300)!important}
.green-200 {background: var(--green-200)!important}
.green-100 {background: var(--green-100)!important}

/* Dark Green */
.drk-green-800 {background: var(--drk-green-800)!important}
.drk-green-700 {background: var(--drk-green-700)!important}
.drk-green-600 {background: var(--drk-green-600)!important}
.drk-green-500 {background: var(--drk-green-500)!important}
.drk-green-400 {background: var(--drk-green-400)!important}
.drk-green-300 {background: var(--drk-green-300)!important}
.drk-green-200 {background: var(--drk-green-200)!important}
.drk-green-100 {background: var(--drk-green-100)!important}

/* Neutral Grays */
.gray-800 {background: var(--gray-800)!important}
.gray-700 {background: var(--gray-700)!important}
.gray-600 {background: var(--gray-600)!important}
.gray-500 {background: var(--gray-500)!important}
.gray-400 {background: var(--gray-400)!important}
.gray-300 {background: var(--gray-300)!important}
.gray-250 {background: var(--gray-250)!important}
.gray-200 {background: var(--gray-200)!important}
.gray-100 {background: var(--gray-100) !important}
.gray-50 {background: var(--gray-50) !important}

/* IOP Colors */
.iop-blue {background: var(--iop-blue-800)!important}
.iop-lt-blue {background: var(--iop-lt-blue-800)!important}
.iop-drk-blue {background: var(--iop-drk-blue-800)!important}

/* OHID Colors */
.ohid-blue-800 { background: #0096FF; }
.ohid-blue-700 { background: #26A6FF; }
.ohid-blue-600 { background: #59BBFF; }
.ohid-blue-500 { background: #8CD0FF; }
.ohid-blue-400 { background: #A6DAFF; }
.ohid-blue-300 { background: #BFE5FF; }
.ohid-blue-200 { background: #D9EFFF; }
.ohid-blue-100 { background: #EBF7FF; }

.ohid-drk-blue-800 { background: #0A426E; }
.ohid-drk-blue-700 { background: #2F5E84; }
.ohid-drk-blue-600 { background: #6084A1; }
.ohid-drk-blue-500 { background: #91AABE; }
.ohid-drk-blue-400 { background: #A9BDCC; }
.ohid-drk-blue-300 { background: #C2D0DB; }
.ohid-drk-blue-200 { background: #DAE3E9; }
.ohid-drk-blue-100 { background: #ECF0F4; }


/* ////////////////////////////////// 
        FONTS / TYPOGRAPHY
///////////////////////////////////*/

.source-sans{
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6{ 
    margin: 0;
    font-weight: var(--reg);
    font-family: 'Source Sans Pro', sans-serif;
}

h1.xxl{
    font-size: 3.75rem; /* 60px */
    line-height: .9;
}
h1.xl{
    font-size: 3.25rem; /* 52px */
    line-height: 1;
}

h1.large{
    font-size: 3.052rem; /* 48.83px */
    line-height: 3rem;
}

h1{
    font-size: 2.441rem; /* 39.06px */
    line-height: 1;
}
h2{
    font-size: 1.953rem; /* 31.25px */
    line-height: 2.0rem;
}
h3{
    font-size: 1.563rem; /* 25.00px */
    line-height: 1.8rem;
}
h4{
    font-size: 1.25rem; /* 20.00px */
    line-height: 1.6rem;
}
h5{
    font-size: 1.125rem; /* 18.00px */
    line-height: 1.125;
}
h6{
    font-size: 1rem; /* 16.00px */
    line-height: 1;
}
p{
    font-size: 1rem; /* 16.00px */
    line-height: 1.5rem;
    margin: 10px 0;
    max-width: 720px;
}
p.small{
    font-size: .875rem;
    line-height: 20px;
}

h1{
    width: fit-content;
    padding: 0 0 5px 0;
    margin: 0;
}

h2, h3, h4, h5{
    width: fit-content;
    padding: 0;
    margin: 0;
}

/* screen-reader only */
.sr-only{
    position: absolute;
    left: -999em;
    right: auto;
}

/* line height */
.line-height-none{ line-height: 0}
.line-height-auto{ line-height: auto}

/* font size */
/* font size */
.font-15{ font-size: 15px!important; line-height: 20px !important;}
.font-16{ font-size: 16px!important; line-height: 24px !important;}
.font-18{ font-size: 18px!important; line-height: 26px !important;}
.font-20{ font-size: 20px!important; line-height: 28px !important;}
.font-24{ font-size: 24px!important; line-height: 30px !important;}
.font-28{ font-size: 28px!important; line-height: 32px !important;}
.font-30{ font-size: 30px!important; line-height: 32px !important;}
.font-32{ font-size: 32px!important; line-height: 34px !important;}
.font-34{ font-size: 34px!important; line-height: 36px !important;}
.font-36{ font-size: 36px!important; line-height: 36px !important;}

/* text align */
.text-center{ text-align: center}
.text-right{ text-align: right}
.text-left{ text-align: left}

/* font color */
.font-white, a.font-white, .font-white > .nav-link-item > *{ color:white!important}
.font-black{ color: black !important}
.font-red, a.font-red, .font-red > .nav-link-item > *{ color: var(--red-800)!important}
.font-maroon, a.font-maroon, .font-maroon > .nav-link-item > *{ color: var(--maroon-800)!important}
.font-blue, a.font-blue, .font-blue > .nav-link-item > *{ color: var(--blue-800)!important}
.font-green, a.font-green, .font-green > .nav-link-item > *{ color: var(--green-800)!important}
.font-iop-drk-blue, a.font-iop-drk-blue, .font-iop-drk-blue > .nav-link-item > *{ color: var(--iop-drk-blue-800)!important}

.font-gray-100 {color: var(--gray-100)!important;}
.font-gray-200 {color: var(--gray-200)!important;}
.font-gray-300 {color: var(--gray-300)!important;}
.font-gray-400 {color: var(--gray-400)!important;}
.font-gray-500 {color: var(--gray-500)!important;}
.font-gray-600 {color: var(--gray-600)!important;}
.font-gray-700 {color: var(--gray-700)!important;}
.font-gray-800 {color: var(--gray-800)!important;}

/* font text decoration */
.underline{text-decoration: underline!important;}
.overline{text-decoration: overline!important;}

p > a{ text-decoration: underline }
p > a.red-txt{ color: var(--red-800) }
p > a.blue-txt{ color: var(--iop-blue-400) }
a{ text-decoration: none; color: var(--blue-800);font-weight: bold;} 

/* FONT WEIGHTS */
.light{ font-weight: var(--lte)!important}
.regular{ font-weight: var(--reg)!important}
.semibold{ font-weight: var(--semi)!important}
.bold{ font-weight: var(--bold)!important}

/* removes extra bottom space of last paragraph */
.content-band, .container > p:last-of-type{ margin-bottom: 0;}


/* ///////////////////////////
    UL / OL - List ELEMENTS
////////////////////////////*/

ul, ol{
    max-width: 720px;
    padding: 0;
    margin-left: 20px;
  }
  
  ul > li, ol > li{
    padding: 8px 10px 8px 8px;
    line-height: 24px;
  }
  
  ul.sublist {
    margin: 0 0 0 30px;
  }
  
  
  /*//////////////////////////
    Bullet Colors 
  //////////////////////////*/
  
  /* RED */
  
  ul.bullet-red li::marker{
    color: var(--red-800);
    font-size: 20px;
  }
  
  /* Blue */
  
  ul.bullet-blue li::marker{
    color: var(--blue-800);
    font-size: 20px;
  }
  
  /* Green */
  
  ul.bullet-green li::marker{
    color: var(--green-800);
    font-size: 20px;
  }


/*/////////////////////////// 
    SPACING MODIFIERS
///////////////////////////*/

/* MARGINS */
.m-auto{ margin: auto !important}
.m-0{ margin: 0 !important}
.m-5{ margin: 5px!important}
.m-10{ margin: 10px!important}
.m-20{ margin: 20px!important}
.m-30{ margin: 30px!important}
.m-40{ margin: 40px!important}
.m-50{ margin: 50px!important}
.m-60{ margin: 60px!important}

/* MARGIN TOP */
.mt-auto{ margin-top: auto!important}
.mt-0{ margin-top: 0!important}
.mt-5{ margin-top: 5px!important}
.mt-10{ margin-top: 10px!important}
.mt-20{ margin-top: 20px!important}
.mt-30{ margin-top: 30px!important}
.mt-40{ margin-top: 40px!important}
.mt-50{ margin-top: 50px!important}
.mt-60{ margin-top: 60px!important}

/* MARGIN BOTTOM */
.mb-auto{ margin-bottom: auto!important}
.mb-0{ margin-bottom: 0!important}
.mb-5{ margin-bottom: 5px!important}
.mb-10{ margin-bottom: 10px!important}
.mb-20{ margin-bottom: 20px!important}
.mb-30{ margin-bottom: 30px!important}
.mb-40{ margin-bottom: 40px!important}
.mb-50{ margin-bottom: 50px!important}
.mb-60{ margin-bottom: 60px!important}
.mb-70{ margin-bottom: 70px!important}
.mb-80{ margin-bottom: 80px!important}

/* MARGIN RIGHT */
.mr-auto{ margin-right: auto!important}
.mr-0{ margin-right: 0!important}
.mr-5{ margin-right: 5!important}
.mr-10{ margin-right: 10px!important}
.mr-20{ margin-right: 20px!important}
.mr-30{ margin-right: 30px!important}
.mr-40{ margin-right: 40px!important}
.mr-50{ margin-right: 50px!important}
.mr-60{ margin-right: 60px!important}

/* MARGIN LEFT */
.ml-auto{ margin-left: auto!important}
.ml-0{ margin-left: 0!important}
.ml-5{ margin-left: 5!important}
.ml-10{ margin-left: 10px!important}
.ml-20{ margin-left: 20px!important}
.ml-30{ margin-left: 30px!important}
.ml-40{ margin-left: 40px!important}
.ml-50{ margin-left: 50px!important}
.ml-60{ margin-left: 60px!important}

/* MARGIN LEFT / RIGHT */
.mlr-auto{ margin-left: auto!important;  margin-right: auto!important;}
.mlr-0{ margin-left: 0!important; margin-right: 0!important;}
.mlr-5{ margin-left: 50!important; margin-right: 5!important;}
.mlr-10{ margin-left: 10px!important; margin-right: 10px!important;}
.mlr-20{ margin-left: 20px!important; margin-right: 20px!important;}
.mlr-30{ margin-left: 30px!important; margin-right: 30px!important;}
.mlr-40{ margin-left: 40px!important; margin-right: 40px!important;}
.mlr-50{ margin-left: 50px!important; margin-right: 50px!important;}
.mlr-60{ margin-left: 60px!important; margin-right: 60px!important;}

/* MARGIN TOP/BOTTOM */
.mtb-auto{ margin-top: auto!important; margin-bottom: auto!important}
.mtb-0{ margin-top: 0!important; margin-bottom:0 !important;}
.mtb-10{ margin-top: 10px !important; margin-bottom: 10px !important;}
.mtb-20{ margin-top: 20px !important; margin-bottom: 20px !important;}
.mtb-30{ margin-top: 30px !important; margin-bottom: 30px !important;}
.mtb-40{ margin-top: 40px !important; margin-bottom: 40px !important;}
.mtb-50{ margin-top: 50px !important; margin-bottom: 50px !important;}
.mtb-60{ margin-top: 60px !important; margin-bottom: 60px !important;}
.mtb-70{ margin-top: 70px !important; margin-bottom: 70px !important;}
.mtb-80{ margin-top: 80px !important; margin-bottom: 80px !important;}


/* PADDING */
.p-0{ padding: 0 !important}
.p-5{ padding: 5px!important}
.p-10{ padding: 10px!important}
.p-20{ padding: 20px!important}
.p-30{ padding: 30px!important}
.p-40{ padding: 40px!important}
.p-50{ padding: 50px!important}
.p-60{ padding: 60px!important}

/* PADDING BOTTOM */
.pb-0{ padding-bottom: 0px!important}
.pb-5{ padding-bottom: 5px!important}
.pb-10{ padding-bottom: 10px!important}
.pb-20{ padding-bottom: 20px!important}
.pb-30{ padding-bottom: 30px!important}
.pb-40{ padding-bottom: 40px!important}
.pb-50{ padding-bottom: 50px!important}
.pb-60{ padding-bottom: 60px!important}

/* PADDING TOP */
.pt-0{ padding-top: 0px!important}
.pt-5{ padding-top: 5px!important}
.pt-10{ padding-top: 10px!important}
.pt-20{ padding-top: 20px!important}
.pt-30{ padding-top: 30px!important}
.pt-40{ padding-top: 40px!important}
.pt-50{ padding-top: 50px!important}
.pt-60{ padding-top: 60px!important}

/* PADDING LEFT */
.pl-0{ padding-left: 0px!important}
.pl-5{ padding-left: 5px!important}
.pl-10{ padding-left: 10px!important}
.pl-20{ padding-left: 20px!important}
.pl-30{ padding-left: 30px!important}
.pl-40{ padding-left: 40px!important}
.pl-50{ padding-left: 50px!important}
.pl-60{ padding-left: 60px!important}
.pl-70{ padding-left: 70px!important}
.pl-80{ padding-left: 80px!important}

/* PADDING RIGHT */
.pr-0{ padding-right: 0px!important}
.pr-5{ padding-right: 5px!important}
.pr-10{ padding-right: 10px!important}
.pr-20{ padding-right: 20px!important}
.pr-30{ padding-right: 30px!important}
.pr-40{ padding-right: 40px!important}
.pr-50{ padding-right: 50px!important}
.pr-60{ padding-right: 60px!important}
.pr-70{ padding-right: 70px!important}
.pr-80{ padding-right: 80px!important}

/* PADDING TOP/BOTTOM */
.ptb-5{ padding-top: 5px!important; padding-bottom: 5px !important ;} 
.ptb-10{ padding-top: 10px !important; padding-bottom: 10px !important;}
.ptb-20{ padding-top: 20px !important; padding-bottom: 20px !important;}
.ptb-30{ padding-top: 30px !important; padding-bottom: 30px !important;}
.ptb-40{ padding-top: 40px !important; padding-bottom: 40px !important;}
.ptb-50{ padding-top: 50px !important; padding-bottom: 50px !important;}
.ptb-60{ padding-top: 60px !important; padding-bottom: 60px !important;}
.ptb-70{ padding-top: 70px !important; padding-bottom: 70px !important;}
.ptb-80{ padding-top: 80px !important; padding-bottom: 80px !important;}

/* PADDING LEFT/RIGHT */
.plr-0{ padding-left: 0px!important; padding-right: 0px!important;}
.plr-5{ padding-left: 5px!important; padding-right: 5px!important;}
.plr-10{ padding-left: 10px!important; padding-right: 10px!important;}
.plr-20{ padding-left: 20px!important; padding-right: 20px!important;}
.plr-30{ padding-left: 30px!important; padding-right: 30px!important;}
.plr-40{ padding-left: 40px!important; padding-right: 40px!important;}
.plr-50{ padding-left: 50px!important; padding-right: 50px!important;}
.plr-60{ padding-left: 60px!important; padding-right: 60px!important;}
.plr-70{ padding-left: 70px!important; padding-right: 70px!important;}
.plr-80{ padding-left: 80px!important; padding-right: 80px!important;}


/*//////////////////////////////// 
    HEIGHT & WIDTH CLASSES
/////////////////////////////////*/

.height-full{ height: 100% !important}
.height-inherit{ height: inherit !important}
.height-auto{ height: auto !important}

/* HEIGHT */
.h10{ height: 10px !important}
.h20{ height: 20px !important}
.h30{ height: 30px !important}
.h40{ height: 40px !important}
.h50{ height: 50px !important}
.h60{ height: 60px !important}
.h70{ height: 70px !important}
.h80{ height: 80px !important}
.h90{ height: 90px !important}
.h100{ height: 100px !important}
.h200{ height: 200px !important}
.h300{ height: 300px !important}
.h350{ height: 350px !important}
.h400{ height: 400px !important}
.h500{ height: 500px !important}
.h600{ height: 600px !important}
.h700{ height: 700px !important}
.h800{ height: 800px !important}

/* MAX-HEIGHT */
.max-h10{ max-height: 10px !important}
.max-h20{ max-height: 20px !important}
.max-h30{ max-height: 30px !important}
.max-h40{ max-height: 40px !important}
.max-h50{ max-height: 50px !important}
.max-h60{ max-height: 60px !important}
.max-h70{ max-height: 70px !important}
.max-h80{ max-height: 80px !important}
.max-h90{ max-height: 90px !important}
.max-h100{ max-height: 100px !important}
.max-h200{ max-height: 200px !important}
.max-h300{ max-height: 300px !important}
.max-h350{ max-height: 350px !important}
.max-h400{ max-height: 400px !important}
.max-h500{ max-height: 500px !important}
.max-h600{ max-height: 600px !important}
.max-h700{ max-height: 700px !important}
.max-h800{ max-height: 800px !important}

/* MIN-HEIGHT */
.min-h10{ min-height: 10px !important}
.min-h20{ min-height: 20px !important}
.min-h30{ min-height: 30px !important}
.min-h50{ min-height: 50px !important}
.min-h60{ min-height: 60px !important}
.min-h70{ min-height: 70px !important}
.min-h80{ min-height: 80px !important}
.min-h90{ min-height: 90px !important}
.min-h100{ min-height: 100px !important}
.min-h200{ min-height: 200px !important}
.min-h300{ min-height: 300px !important}
.min-h400{ min-height: 400px !important}
.min-h500{ min-height: 500px !important}
.min-h550{ min-height: 550px !important}
.min-h600{ min-height: 600px !important}
.min-h700{ min-height: 700px !important}
.min-h800{ min-height: 800px !important}


/* WIDTH */

.width-full{ width: 100% !important; max-width: 100%!important}
.width-half{ width: 50% !important; max-width: 50%!important}
.width-quarter{ width: 25% !important; max-width: 25%!important}
.width-third{ width: 33% !important; max-width: 33%!important}
.width-inherit{ width: inherit !important;}
.width-auto{ width: auto !important;}
.width-max-content {width: max-content!important;}
.width-min-content {width: min-content!important;}

.w10{ width: 10px !important}
.w20{ width: 20px !important}
.w30{ width: 30px !important}
.w40{ width: 40px !important}
.w50{ width: 50px !important}
.w60{ width: 60px !important}
.w70{ width: 70px !important}
.w80{ width: 80px !important}
.w90{ width: 90px !important}
.w100{ width: 100px !important}
.w110{ width: 110px !important}
.w120{ width: 120px !important}
.w150{ width: 150px !important}
.w170{ width: 170px !important}
.w180{ width: 180px !important}
.w200{ width: 200px !important}
.w300{ width: 300px !important}
.w400{ width: 400px !important}
.w500{ width: 500px !important}
.w600{ width: 600px !important}
.w700{ width: 700px !important}
.w800{ width: 800px !important}
.w900{ width: 900px !important}
.w1000{ width: 1000px !important}
.w1200{ width: 1200px !important}
.w1440{ width: 1440px !important}

/* MIN-WIDTH */
.min-w0{ min-width: 0px !important}
.min-w10{ min-width: 10px !important}
.min-w20{ min-width: 20px !important}
.min-w30{ min-width: 30px !important}
.min-w50{ min-width: 50px !important}
.min-w60{ min-width: 60px !important}
.min-w70{ min-width: 70px !important}
.min-w80{ min-width: 80px !important}
.min-w90{ min-width: 90px !important}
.min-w100{ min-width: 100px !important}
.min-w150{ min-width: 150px !important}
.min-w200{ min-width: 200px !important}
.min-w250{ min-width: 250px !important}
.min-w300{ min-width: 300px !important}
.min-w350{ min-width: 350px !important}
.min-w400{ min-width: 400px !important}
.min-w500{ min-width: 500px !important}
.min-w600{ min-width: 600px !important}
.min-w700{ min-width: 700px !important}
.min-w800{ min-width: 800px !important}

/* MAX-WIDTH */
.max-w10{ max-width: 10px !important}
.max-w20{ max-width: 20px !important}
.max-w30{ max-width: 30px !important}
.max-w40{ max-width: 40px !important}
.max-w50{ max-width: 50px !important}
.max-w60{ max-width: 60px !important}
.max-w70{ max-width: 70px !important}
.max-w80{ max-width: 80px !important}
.max-w90{ max-width: 90px !important}
.max-w100{ max-width: 100px !important}
.max-w150{ max-width: 150px !important}
.max-w170{ max-width: 170px !important}
.max-w180{ max-width: 180px !important}
.max-w200{ max-width: 200px !important}
.max-w220{ max-width: 220px !important}
.max-w240{ max-width: 240px !important}
.max-w300{ max-width: 300px !important}
.max-w400{ max-width: 400px !important}
.max-w500{ max-width: 500px !important}
.max-w600{ max-width: 600px !important}
.max-w700{ max-width: 700px !important}
.max-w800{ max-width: 800px !important}
.max-w900{ max-width: 900px !important}
.max-w1000{ max-width: 1000px !important}
.max-w1200{ max-width: 1200px !important}
.max-w1440{ max-width: 1440px !important}


/*/////////////////////////// 
    POSITION
///////////////////////////*/

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

/*/////////////////////////// 
    OVERFLOW 
///////////////////////////*/

.overflow-hidden{ overflow:hidden }
.overflow-scroll{ overflow-y:scroll }
.overflow-ellipsis{ text-overflow: ellipsis; }


/*/////////////////////////// 
    DISPLAY
///////////////////////////*/

.display-none{ display: none !important }
.display-contents{ display: contents !important }

.display-block{display: block!important}
.display-inline-block{display: inline-block!important}

.display-mobile{ display: none !important }
.hide-mobile{ display: block !important }



/*/////////////////////////// 
    FLEX BOX
///////////////////////////*/

.flex { display: flex}
.inline-flex{ display: inline-flex !important}

.flex-row{ flex-direction: row !important}
.flex-col{ flex-direction: column !important}
.flex-row-reverse{flex-direction: row-reverse !important}
.flex-col-reverse{flex-direction: column-reverse!important}

.flex-wrap {flex-wrap: wrap !important}
.flex-nowrap {flex-wrap: nowrap !important}
.flex-wrap-reverse {flex-wrap: wrap-reverse !important}

.align-start { align-items:flex-start!important}
.align-center { align-items:center!important}
.align-end { align-items:flex-end!important}
.align-stretch { align-items: stretch !important}
.align-baseline { align-items: baseline !important}

.align-self-start{ align-self: flex-start !important}
.align-self-center{ align-self: center !important}
.align-self-end{ align-self: flex-end !important}

.justify-self-start{ justify-self: flex-start !important}
.justify-self-center{ justify-self: center !important}
.justify-self-end{ justify-self: flex-end !important}

.justify-start { justify-content: flex-start!important}
.justify-center { justify-content: center!important}
.justify-end { justify-content: flex-end!important}
.justify-between{ justify-content: space-between!important}
.justify-around{ justify-content: space-around!important}

.flex-1{ flex: 1 !important}
.flex-auto{flex: auto !important}
.grow-0{ flex-grow: 0 !important}
.shrink-0{ flex-shrink: 0 !important}

.gap-1{gap:1px}
.gap-2{gap:2px}
.gap-3{gap:3px}
.gap-4{gap:4px}
.gap-5{gap:5px}
.gap-10{gap:10px}
.gap-20{gap:20px}
.gap-30{gap:30px}
.gap-40{gap:40px}
.gap-50{gap:50px}
.gap-100{gap:100px}
.gap-80p{gap:80%}

.basis-10{flex: 1 1 10% !important}
.basis-20{flex:1 1 20% !important}
.basis-25{flex: 1 1 25% !important}
.basis-30{flex: 1 1 30% !important}
.basis-33{flex: 1 1 33% !important}
.basis-40{flex: 1 1 40% !important}
.basis-50{flex: 1 1 50% !important}
.basis-60{flex: 1 1 60% !important}
.basis-70{flex: 1 1 70% !important}
.basis-75{flex: 1 1 75% !important}
.basis-80{flex: 1 1 80% !important}
.basis-90{flex: 1 1 90% !important}
.basis-100{flex: 1 1 100% !important}


/* Flexbox gap workaround for Safari on iOS 14, 13 and lower */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
    :not(:last-child) {
      margin-right: 5%;
    }
  }



/*///////////////////////////////////////// 
    FLEX Layouts 
/////////////////////////////////////////*/

/* even columns */
.even-cols { display: flex; }
.even-cols > * { flex-basis: 100%;}

/* flex grid */
.flex-grid{
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap
}

/* flex sidebar - Left */
.flex-sidebar{ display: flex; flex-wrap: wrap; }
.flex-sidebar > *:nth-child(1){ flex: 1 1 75%; }
.flex-sidebar > *:nth-child(2){ flex: 1 1 25%; }

/* flex sidebar - Right */
.flex-sidebar-right{
    display: flex;
    flex-wrap: wrap
}
.flex-sidebar-right > *:nth-child(1){ flex: 1 1 75% }
.flex-sidebar-right > *:nth-child(2){ flex: 1 1 25% }


/*/////////////////////////////////////////// 
    LAYOUT CONTAINERS
///////////////////////////////////////////*/

.page-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

section{ 
    display: flex;
    justify-content: center;
}

.content-band{
    position: relative;
    min-width: 0;
    max-width: 1440px;
    width: 100%;
    margin: 40px 20px;
}

.container{
    position: relative;
    width: 100%;
    transition: all .2s ease-in-out;
}

.container * > p, ul, li{
    max-width: 720px;
}

/* .container * > p:last-of-type{
    padding-bottom: 0!important;
    margin-bottom: 0!important;
} */


/*///////////////////////////////// 
    BORDERS & BORDER-RADIUS
/////////////////////////////////*/

.border{ border: 1px solid var(--gray-400)} 
.border-medium{ border-width: 2px !important}
.border-thick{ border-width: 3px !important}

.border-none{ border: none!important }

.border-top{border-top: 1px solid var(--gray-400)}
.border-bottom{border-bottom: 1px solid var(--gray-400)}
.border-left{border-left: 1px solid var(--gray-400)}
.border-right{border-right: 1px solid var(--gray-400)}

.border-top-none{border-top: 0!important}
.border-bottom-none{border-bottom: 0!important}
.border-left-none{border-left: 0!important}
.border-right-none{border-right: 0!important}

/* Border Default Color */
.border-gray-100{ border-color: var(--gray-100)!important}
.border-gray-200{ border-color: var(--gray-200)!important}
.border-gray-300{ border-color: var(--gray-300)!important}
.border-gray-400{ border-color: var(--gray-400)!important}
.border-gray-500{ border-color: var(--gray-500)!important}
.border-gray-600{ border-color: var(--gray-600)!important}
.border-gray-700{ border-color: var(--gray-700)!important}
.border-gray-800{ border-color: var(--gray-800)!important}

/* Border Red Color */
.border-red-500{ border-color: var(--red-500)!important}
.border-red-600{ border-color: var(--red-600)!important}
.border-red-700{ border-color: var(--red-700)!important}
.border-red-800{ border-color: var(--red-800)!important}

/* Border Blue Color */
.border-blue-500{ border-color: var(--blue-500)!important}
.border-blue-600{ border-color: var(--blue-600)!important}
.border-blue-700{ border-color: var(--blue-700)!important}
.border-blue-800{ border-color: var(--blue-800)!important}

/* Border Green Color */
.border-green-500{ border-color: var(--green-600)!important}
.border-green-600{ border-color: var(--green-500)!important}
.border-green-700{ border-color: var(--green-700)!important}
.border-green-800{ border-color: var(--green-800)!important}

.border-iop-drk-blue{
    border-color: var(--iop-drk-blue-800)!important;
}


/* ////////////////////////
    BORDER RADIUS 
////////////////////////*/

.rounded-4 {border-radius: 4px !important}
.rounded-6 {border-radius: 6px !important}
.rounded-8 {border-radius: 8px !important}
.rounded-10 {border-radius: 10px !important}
.rounded-12 {border-radius: 12px !important}
.rounded-20 {border-radius: 20px !important}
.rounded-30 {border-radius: 30px !important}
.rounded-40 {border-radius: 40px !important}
.rounded-full { border-radius: 100px !important}
.circle{ border-radius: 100%!important; overflow: hidden;}


/* Border top radius */
.rounded-top-4{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.rounded-top-6{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.rounded-top-8{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.rounded-top-12{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.rounded-top-20{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Border bottom radius */
.rounded-bottom-4{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.rounded-bottom-6{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.rounded-bottom-8{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.rounded-bottom-12{
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.rounded-bottom-20{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Border top left radius */
.rounded-top-left-4{
    border-top-left-radius: 4px;
}
.rounded-top-left-6{
    border-top-left-radius: 6px;
}
.rounded-top-left-8{
    border-top-left-radius: 8px;
}
.rounded-top-left-12{
    border-top-left-radius: 12px;
}
.rounded-top-left-20{
    border-top-left-radius: 20px;
}

/* Border top right radius */
.rounded-top-right-4{
    border-top-right-radius: 4px;
}
.rounded-top-right-6{
    border-top-right-radius: 6px;
}
.rounded-top-right-8{
    border-top-right-radius: 8px;
}
.rounded-top-right-12{
    border-top-right-radius: 12px;
}
.rounded-top-right-20{
    border-top-right-radius: 20px;
}

/*///////////////////////////////////////// 
    Overlays
/////////////////////////////////////////*/


/* Black & White photo filter (.bw) */

.black-white::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: gray;
    mix-blend-mode: color;
    z-index: 10;
} 

/* black overlay */

.overlay-black::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity:.3;
    z-index: 10;
} 

/* red overlay */

.overlay-red::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--drk-red-800);
    opacity:.3;
    z-index: 10;
} 

/* Gradient Overlay */
.gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, 
    black 0%, 
    rgba(0, 0, 0, 0.90) 5%, 
    rgba(0, 0, 0, 0.738) 19%, 
    rgba(0, 0, 0, 0.541) 34%, 
    rgba(0, 0, 0, 0.382) 47%, 
    rgba(0, 0, 0, 0.278) 56.5%, 
    rgba(0, 0, 0, 0.194) 65%, 
    rgba(0, 0, 0, 0.126) 73%, 
    rgba(0, 0, 0, 0.075) 80.2%, 
    rgba(0, 0, 0, 0.042) 86.1%, 
    rgba(0, 0, 0, 0.021) 91%, 
    rgba(0, 0, 0, 0.008) 95.2%, 
    rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
}

.gradient-gray800{
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
    var(--gray-800) 0%, 
    rgb(44, 44, 44, 0.90) 5%, 
    rgba(44, 44, 44, 0.738) 19%, 
    rgba(44, 44, 44, 0.541) 34%, 
    rgba(44, 44, 44, 0.382) 47%, 
    rgba(44, 44, 44, 0.278) 56.5%, 
    rgba(44, 44, 44, 0.194) 65%, 
    rgba(44, 44, 44, 0.126) 73%, 
    rgba(44, 44, 44, 0.075) 80.2%, 
    rgba(44, 44, 44, 0.042) 86.1%, 
    rgba(44, 44, 44, 0.021) 91%, 
    rgba(44, 44, 44, 0.008) 95.2%, 
    rgba(44, 44, 44, 0.002) 98.2%, transparent 100%);
}


/* Drop Shadow */
.shadow{ box-shadow: 0px 0 32px -10px rgba(0,0,0, .2) !important }


.opacity-0{
    opacity: 0!important;
    transition: all .2s ease-in-out;
}
.opacity-1{
    opacity: 1!important;
    transition: all .2s ease-in-out;
}

/* //////////////////////////
    MIX BLEND MODES
///////////////////////////*/

.blend-normal{
mix-blend-mode: normal;
}
.blend-multiply{
mix-blend-mode: multiply;
}
.blend-screen{
mix-blend-mode: screen;
}
.blend-overlay{
mix-blend-mode: overlay;
}
.blend-darken{
mix-blend-mode: darken;
}
.blend-lighten{
    mix-blend-mode: lighten;
}
.blend-color-dodge{
    mix-blend-mode: color-dodge;
}
.blend-color-burn{
    mix-blend-mode: color-burn;
}
.blend-hard-light{
    mix-blend-mode: hard-light;
}
.blend-soft-light{
    mix-blend-mode: soft-light;
}
.blend-difference{
    mix-blend-mode: difference;
}
.blend-exclusion{
    mix-blend-mode: exclusion;
}
.blend-hue{
    mix-blend-mode: hue;
}
.blend-saturation{
    mix-blend-mode: saturation;
}
.blend-color{
    mix-blend-mode: color;
}
.blend-luminosity{
    mix-blend-mode: luminosity;
}

/* //////////////////////////
    Hover styles
///////////////////////////*/

/* TEXT HOVER */
:hover.hover-font-white >* {color: white!important;}
:hover.hover-font-red >* {color: var(--red-800)!important}
:hover.hover-font-maroon >* {color: var(--maroon-800)!important}
:hover.hover-font-blue >* {color: var(--blue-800)!important}
:hover.hover-font-iop-drk-blue >* {color: var(--blue-800)!important}
:hover.hover-font-green >* {color: var(--green-800)!important}

/* .underline:hover{ text-decoration: underline!important } */
:hover.underline{ text-decoration: underline!important}

/* CURSOR BEHAVIOR */
.pointer{ cursor: pointer;}
.user-none{
    cursor: unset;
    user-select: none;
}

/*////////////////////////////// 
    HOVER OVERLAYs 
//////////////////////////////*/


/* HOVER BACKGROUND COLOR */
.hover-white:hover{background: white!important;}
.hover-black:hover{background: black!important;}

.hover-gray-100:hover{background: var(--gray-100)!important;}
.hover-gray-200:hover{background: var(--gray-200)!important;}
.hover-gray-300:hover{background: var(--gray-300)!important;}
.hover-gray-400:hover{background: var(--gray-400)!important;}
.hover-gray-500:hover{background: var(--gray-500)!important;}
.hover-gray-600:hover{background: var(--gray-600)!important;}
.hover-gray-700:hover{background: var(--gray-700)!important;}
.hover-gray-800:hover{background: var(--gray-800)!important;}

.hover-red-100:hover{background: var(--red-100)!important;}
.hover-red-200:hover{background: var(--red-200)!important;}
.hover-red-300:hover{background: var(--red-300)!important;}
.hover-red-400:hover{background: var(--red-400)!important;}
.hover-red-500:hover{background: var(--red-500)!important;}
.hover-red-600:hover{background: var(--red-600)!important;}
.hover-red-700:hover{background: var(--red-700)!important;}
.hover-red-800:hover{background: var(--red-800)!important;}

.hover-blue-100:hover{background: var(--blue-100)!important;}
.hover-blue-200:hover{background: var(--blue-200)!important;}
.hover-blue-300:hover{background: var(--blue-300)!important;}
.hover-blue-400:hover{background: var(--blue-400)!important;}
.hover-blue-500:hover{background: var(--blue-500)!important;}
.hover-blue-600:hover{background: var(--blue-600)!important;}
.hover-blue-700:hover{background: var(--blue-700)!important;}
.hover-blue-800:hover{background: var(--blue-800)!important;}

.hover-iop-drk-blue:hover{background: var(--iop-drk-blue-800)!important;}

.hover-green-100:hover{background: var(--green-100)!important;}
.hover-green-200:hover{background: var(--green-200)!important;}
.hover-green-300:hover{background: var(--green-300)!important;}
.hover-green-400:hover{background: var(--green-400)!important;}
.hover-green-500:hover{background: var(--green-500)!important;}
.hover-green-600:hover{background: var(--green-600)!important;}
.hover-green-700:hover{background: var(--green-700)!important;}
.hover-green-800:hover{background: var(--green-800)!important;}



/* Hover Shadow */
.hover-shadow:hover{
    box-shadow: 0px 0 32px -10px rgba(0,0,0, .18);
}

/* Hover Light / Dark */

.hover-light, .hover-dark{
    position: relative;
}
.hover-light::after{
    content: '';
    position: absolute;
    flex: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    z-index: 0;
    transition: all .2s ease-in-out;
    overflow: hidden;
}
.hover-light:hover::after{
    content: '';
    position: absolute;
    flex: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    opacity: .4;
    z-index: 5;
    overflow: hidden;
}
.hover-dark::after{
    content: '';
    position: absolute;
    flex: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    opacity: 0;
    z-index: 0;
    transition: all .3s ease-in-out;
    overflow: hidden;
}
.hover-dark:hover::after{
    content: '';
    position: absolute;
    flex: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    opacity: .3;
    z-index: 0;
    overflow: hidden;
}

/* HOVER ICON OVERLAYS */

.play-btn-icon, .external-link-icon{
    position: relative;
}
.play-btn-icon::before{
    content:'';
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(/images/SVG/play-icon.svg);
    opacity: .6;
    z-index: 5;
    transition: all .3s ease-in-out;
}
:hover.play-btn-icon::before{
    content:'';
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(/images/SVG/play-icon.svg);
    opacity: 1;
    z-index: 5;
    transition: all .3s ease-in-out;
}

.external-link-icon::before{
    content: '\f14c';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    font-weight: var(--semi);
    font-family: 'Font awesome 5 pro';
    opacity: .5;
    transition: all .25s ease-in-out;
    z-index: 10;   
}
:hover.external-link-icon::before{
    content: '\f14c';
    opacity: 1;
}

/* ///////////////////////////////////////////
    HOVER BORDER 
////////////////////////////////////////////*/

.hover-border-transparent:hover{
    border-color: transparent!important;
    border-width: 2px;
    border-style: solid;
}
.hover-border-gray-500:hover{
    border-color: var(--gray-500)!important;
    border-width: 2px;
    border-style: solid;
}
.hover-border-red:hover{
    border-color: var(--red-800);
}

.hover-border-blue:hover{
    border-color: var(--blue-800);
}


/* //////////////////////////////
    Image position modifiers 
///////////////////////////////*/

img.img-top{
    width: 100%;
    height: 100%;
    object-fit: none!important;
    object-position: top!important;
} 
img.img-bottom{
    width: 100%;
    height: 100%;
    object-fit: none!important;
    object-position: bottom!important;
} 
img.img-left{
    width: 100%;
    height: 100%;
    object-fit: none!important;
    object-position: left!important;
} 
img.img-right{
    width: 100%;
    height: 100%;
    object-fit: none!important;
    object-position: right!important;
} 
img.img-center{
    width: 100%;
    height: 100%;
    object-fit: none!important;
    object-position: center!important;
}

img.img-cover{
    width: 100%;
    height: 100%;
    object-fit: cover!important;
}
img.img-cover-top{
    width: 100%;
    height: 100%;
    object-fit: cover!important;
    object-position: top;
}
img.img-cover-bottom{
    width: 100%;
    height: 100%;
    object-fit: cover!important;
    object-position: bottom;
}

img.img-contain{
    width: 100%;
    height: 100%;
    object-fit: contain!important;
}
img.img-fill{
    width: 100%;
    height: 100%;
    object-fit: fill!important;
}


/* ///////////////////////////
    DIVIDER
////////////////////////////*/

.divider{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 1px;
    min-height: 1px;
    margin: 0 auto;
    background: #d9d9d9;
}

.subpage-content .divider{
    width: 100%;
    max-width: 800px;
    margin: 0 20px;
}


/*/////////////////////////// 
    ANIMATIONS
///////////////////////////*/


/* FADE */

.fade{
    -webkit-animation: fadeEffect .4s;
    animation: fadeEffect .4s;
}

  @-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }




/* //////////////////////
    Spinner
////////////////////// */

.spinner {
    position: absolute;
    border-radius: 100%;
    border-style: solid;
    border-color: transparent;
    border-top-color: transparent;
    background: transparent;
    animation: rotate .5s linear infinite;
    z-index: 2;
}

.spinner.spinner-sml{
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border-width: 2px;

}
.spinner.spinner-med{
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px; 
    border-width: 4px;
}

.spinner.spinner-lrg{
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    width: 70px;
    height: 70px; 
    border-width: 5px;
}

.spinner-blue{
    border-top-color: var(--blue-800)!important;
    border-color:var(--blue-200);
}
.spinner-ohid-blue{
    border-top-color: var(--ohid-blue-800)!important;
    border-color:var(--ohid-blue-200);
}

.spinner-red{
    border-top-color: var(--red-800)!important;
    border-color:var(--red-100);
}
.spinner-maroon{
    border-top-color: var(--maroon-800)!important;
    border-color:var(--maroon-100);
}
.spinner-white{
    border-top-color: white!important;
    border-color: transparent;
}

  
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

/*/////////////////////////////
     Spinner 2 
*/

.spinner-2 {
    position: absolute;
    width: 84px;
    height: 84px; 
    background: transparent;
    animation: rotate 2s linear infinite;
    z-index: 2;
}
.spinner-2 .path {
    stroke: #0096ff;
    stroke-linecap: round;
    animation: dash 1.0s ease-in-out infinite; 
}
.spinner-2 .path2 {
    stroke: #dfdfdf;
    stroke-linecap: round;
   
}
  
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }



/*////////////////////////////////////// 
    ICONS
//////////////////////////////////////*/

.icon, .icon > i{
    transition: all .2s ease-in-out;
}

.icon-white{
    fill: white!important;
    color: white!important;
}
.icon-black{
    fill: black!important;
    color: black!important;
}
.icon-gray{
    fill: var(--gray-600)!important;
    color: var(--gray-600)!important;
}

.icon-red{
    fill: var(--red-800)!important;
    color: var(--red-800)!important
}
.icon-blue{
    fill: var(--blue-800)!important;
    color: var(--blue-800)!important;
}
.icon-green{
    fill: var(--green-800)!important;
    color: var(--green-800)!important;
}

.icon-iop-drk-blue{
    fill: var(--iop-drk-blue-800)!important;
    color: var(--iop-drk-blue-800)!important;
}

.right-arrow-icon {
    padding-left: 10px!important;
}
.right-arrow-icon > .icon-svg{
    width: 11px;
    height: 14px;
}
.contact-icon > div.icon > .icon-svg{
    width: 22px;
    height: 22px;
    fill: var(--gray-700);
    stroke:var(--gray-700);
    stroke-miterlimit:10;
}



/* ////////////////
    Mobile 
/////////////////*/

.show-mobile{
    display: none;
}

/* ////////////////////////
    MEDIA QUERIES
/////////////////////////*/

@media screen and (min-width: 1200px), (max-width:1200px) {

}
@media screen and (max-width: 991px) {   
    .flex-col-mobile{
        flex-direction: column!important;
    }
}

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

    .flex-row {
        flex-direction: column!important;
    }
    .flex-col-mobile{
        flex-direction: column!important;
    }
}

@media screen and (max-width: 512px) {   
    .display-mobile{
        display: block!important;
    }
    .show-mobile{ display: block!important; }
    .hide-mobile {
        display: none!important;
    }
    section:last-of-type{
        margin-bottom: 40px;
    }
    .content-band {
        flex-direction: column;
        max-height: 100%!important;
    }
    .grid{
        grid-template-columns: 100%;
    }

    .flex-grid{
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .even-cols{
        flex-direction: column!important;
    }
    .flex-row {
        flex-direction: column!important;
    }

    .flex-row-mobile{
        flex-direction: row!important;
        justify-content: center;
    }
    .flex-col-mobile{
        flex-direction: column!important;
    }

    .subpage-content .divider{
        margin: 0;
    }

}