/*
Variables
Initialise settings
Embedded WP Galleries
Buttons
Header
Slider
Scroll To
Front page
Search Options
Press
Content Blocks Body  ////////
Footer
wysiwyg editor fonts
Uber & Mobile Menu
Timeline
SVG
Seach Page
Responsive Video
Parallax
Grids
Hover Blocks
Cookie
Accordian
Progress Circle
TimeLine (content block)
Share Icons
Contact 7 Forms
Maps
Plant & Equipment
Animation
Company Structure
FlipBook
Blog
Text Editor Elements

Individual Blocks
*/


/* ------------------------------------- Variables  -------------------------------------*/

:root{
  font-size:18px;

  --root-background-color:#ffffff;
  --root-hightlight-color: #339bd6;
  --root-text-color:#666666;
  --root-header-color:#333333;
  --root-font-family: 'Radikal', sans-serif;;

  --page-background-color:var(--root-background-color);
  --block-background-color1:var(--root-background-color);
  --block-background-color2: var(--root-background-color);

  --large-container: 1250px;
  --small-container: 800px;

  --h1-fontsize: 48px;
  --h2-fontsize: 48px;
  --h3-fontsize: 30px;
  --h4-fontsize: 18px;
  --h5-fontsize: 18px;
 
  --header-color: var(--root-header-color); 
  --h1-color: var(--root-header-color); 
  --h2-color: var(--root-header-color);       
  --h3-color: var(--root-header-color);         
  --h4-color:var(--root-hightlight-color);        /*  ----- different  */
  --h5-color: var(--root-header-color); 

  --h1-weight: 500;
  --h2-weight: 500;
  --h3-weight: 500;
  --h4-weight: 700;
  --h5-weight: 500;

  --header-font: var(--root-font-family);
  --h1-ff: var(--root-font-family);
  --h2-ff: var(--root-font-family);
  --h3-ff: var(--root-font-family);
  --h4-ff: var(--root-font-family);
  --h5-ff: var(--root-font-family);

  --emp-fontsize: 32px;
  --emp-textcolor:  var(--root-hightlight-color);  
  --emp-weight: 300;
 
  --primary-font: var(--root-font-family);
  --primary-fontsize: 18px;
  --primary-font:var(--root-font-family);
  --primary-fontsize:18px;
  --primary-weight:400;

  --primary-background: #339bd6;
  --primary-textcolor: #666666; 
  --primary-highlight: #339bd6;
 
  --primary-link-color:  #333333;
  --primary-link-hover-color: #333333;
  --primary-link-focus-outline: #333333;
  --primary-link-weight:700;
  --primary-link-text-decoration: underline;

  --primary-maskcolor: var(--root-hightlight-color);
  --primary-border-color: var(--root-hightlight-color);
  --primary-opacity:.9;

  --btn-padding: 1em 3em;
  --btn-margin :3em;
  --btn-primary-font:var(--root-font-family);
  --btn-fontsize: 16px;
  --btn-primary-border: var(--root-hightlight-color);
  --btn-primary-background: var(--root-hightlight-color);
  --btn-primary-color: #ffffff;
  --btn-primary-hover-background: #287aa9;
  --btn-primary-hover-color: #eeeeee;
  --btn-primary-focus-outline:  var(--root-hightlight-color);
  --btn-primary-text-transformation: uppercase;

  --menu-ff:var(--root-font-family);
  --menu-color: #333333; 
  --menu-hover-color: var(--root-hightlight-color); 
  --menu-weight: 500;
  --menu-fontsize:18px;
  --submenu-ff:var(--root-font-family);
  --submenu-color: #fff; 
  --submenu-hover-color: #333; 
  --submenu-weight: 500;
  --submenu-fontsize:14px;
  --submenu-bgcolor:var(--root-hightlight-color);
  --submenu-opacity:.9;

  --panel-padding:  1em 0;
  --panel-margin: 1em 0;

  --parallax-header-color:#ffffff;
  --parallax-subheader-color:#ffffff;

  --footer-textcolor:#ffffff;
  --footer-background: #1b1b1b;
  --footer-link-color:#ffffff;
  --footer-link-hover-color: #666666;


  --form-font: var(--root-font-family);;
  --form-input-background-color:#F1F1F1;
  --form-input-text-color:var(--primary-textcolor);
  --form-list-items-color:var(--primary-textcolor);
  --form-field-label-color: var(--primary-textcolor);
  --form-field-border-color : none;
}


* {  margin: 0;  padding: 0;  border: 0;  font-size: 1rem;   font-size: 1rem;   font: inherit;  vertical-align: baseline; }
* + * {margin: 1em 0 0}
*, *::before, *::after {  box-sizing: border-box;  margin-top: 0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block; }

ul {  list-style: none; }

blockquote, q {  quotes: none; }

blockquote:before, blockquote:after,q:before, q:after {  content: '';    content: none; }

table {  border-collapse: collapse;    border-spacing: 0; }

.image-fluid{  width: 100%;   height: auto;   display: block;   margin: 0 auto;}
.aligncenter{  display: block;  margin: 0 auto;}



body,html{
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: antialiased; 
  font-smoothing: antialiased;
  font-family: var(--primary-font);
  font-size:  var(--primary-fontsize);
  font-weight: var(--primary-weight);
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  transition:transform 250ms ease-in;
}

h1, h2, h3, h4, h4 {
  font-family: var(--header-font);
  color:var(--header-color);
}
h1{
  text-transform: uppercase;
  line-height: 1.2;
}

h2{
  font-weight: var(--h2-weight);
  font-size: var(--h2-fontsize);
  color: var(--h2-color);
  text-transform: uppercase;
  line-height: 1.2;
}
h3{
  font-weight: var(--h3-weight);
  font-size: var(--h3-fontsize);
  color: var(--h3-color);
  line-height: 1.2;
}
h4{
  font-weight: var(--h4-weight);
  font-size: var(--h4-fontsize);
  color: var(--h4-color);
  line-height: 1.2;
}
h5{
  font-weight: var(--h5-weight);
  font-size: var(--h5-fontsize);
  color: var(--h5-color);
  line-height: 1.2;
}
a{
  color: var(--primary-link-color);
  text-decoration: none;
  font-weight: var(--primary-link-weight);
}
a:hover,
a:active,
a:focus{
    color: var(--primary-link-hover-color);
    text-decoration: var(--primary-link-text-decoration);
}

p{
  font-family: var(--primary-font);
  font-weight: var(--primary-weight);
  font-size: var(--primary-fontsize);
  color: var(--primary-textcolor);
  line-height: 1.5; 
}
.container{
  max-width:var(--large-container) !important;
  padding:16px;
  margin:auto;
}


/* ------------------------------------------------------------------------------------------------------------------- */
/*--------------------------------- Content Blocks Body ------------------------------------------------------------------------------ */

.format_block{
/*  border: 1px solid; */
}

.custom_block_content h2{
  text-align: left;
}
.custom_block_content h3{
  text-align: left;
}
.custom_block_content hr{
  border:1px solid #fff;
  opacity: 1;
}

.equal_cols,.two_blockcols,.three_blockcols,.split_promo_block,.side_widgets,.gridblocks,
.image_side_col,.floating_call_2_action,.two_column_promo_row,.multi_file_uploads,.anchor_menu_bar,.group_panel{
  display: grid;
  padding-top: 1rem;
}

    .equal_cols {
    }   
    .two_blockcols {
    }
    .three_blockcols {
    }  
    .gridblocks {
    }   
    .two_column_promo_row{
    }  
    .image_side_col {
    }  
    .split_promo_block {
    }   
    .floating_call_2_action {
    } 
    .side_widgets {
    }
    .menuBlock{
      min-height: 25px;
    }
    .menuBlock ul {
      margin: 0 !important;
    }
    .anchor_menu_bar{
      padding: 1rem 0;
    }


    .equal_cols h2{
    }
    .equal_cols h3{    
    }
    .equal_cols h4{
    }     
    .equal_cols h5{
    }    
    .two_blockcols h2{
    }
    .two_blockcols h3{
    }
    .two_blockcols h4{
    }
    .two_blockcols h5{
    }    
    .three_blockcols h2{
      margin-bottom: 0;
    }
    .three_blockcols h3{
      padding-top: 0;
    }
    .three_blockcols h4{
    }  
    .three_blockcols h5{
    }    
    .gridblocks h2{
    }
    .gridblocks h3{
    }
    .gridblocks h4{
    }    
    .gridblocks h5{
    }   
    .two_column_promo_row h2{
    }
    .two_column_promo_row h3{
    }
    .two_column_promo_row h4{
    }    
    .image_side_col h2{
    }
    .image_side_col h3{
    }
    .image_side_col h4{
    } 
    .image_side_col h5{
    }     
    .split_promo_block h2{
    }
    .split_promo_block h3{
    }
    .split_promo_block h4{
    }   
    .split_promo_block h5{
    }      
    .floating_call_2_action h2{
    }
    .floating_call_2_action h3{
    }
    .floating_call_2_action h4{
    }  
    .floating_call_2_action h5{
    }   
    .side_widgets h2{
    }
    .side_widgets h3{
    }  
    .side_widgets h4{
    }
    .side_widgets h5{
    }  
    .menuBlock h2{
    }
    .menuBlock h3{
    }  
    .menuBlock h4{
    }        
    .menuBlock h5{
    }  
    .parallax_block h2{
      position: relative;
      display: block;
      text-align: center;
      margin: 0;
      top: 50%;
    }  
    .parallax_block h3{
      position: relative;
      display: block;
      text-align: center;
      margin: 0;
      top: 50%;
    }  
    .parallax_block h4{
    }  
    .parallax_block h5{
    }
    .pressGrid{
      margin-bottom: 50px;
    }  
    .pressGrid h2{
      color: #fff;
      text-align: left;
    }
    .pressGrid span{
      color: #fff;
    }
    }   
    .pressGrid p{
      color: #fff;
    }   

   .tabrow h2{
    }
    .tabrow h3{
      font-weight: 900; 
      color: #l3l3l3 ; 
      font-size:36px; 
      text-transform: uppercase;
    }
    .tabrow h4{
    }
    .tabrow h5{
    }
    div[class*="tabcol"] h2, h3, h4, h5{
      margin: 0 0 15px ;
      padding: 0; 
    }
    div[class*="tabcol"] h2{
    }
    div[class*="tabcol"] h3{
    }
    div[class*="tabcol"] h4{
      font-weight: normal;
      font-size: var(--h2-fontsize);
      line-height: 66px;
      color: var(--h4-color);
      font-family: var(--h1-ff);
    }

    div[class*="tabcol"] h4:after{
      content: "";
      display: block;
      width: 70px;
      height: 5px;
      background-image: url(../images/embellishment.png);
      margin: 20px 0;
    }


    div[class*="tabcol"] h5{
      font-weight: 900;
      color: var(--h5-color);
      font-size: 1rem;
      line-height: 1.4rem;
    }

    .fancyBlock h4{
      background-color: var(--primary-background);
      color: #fff ;
      text-transform: uppercase;  
      text-align: center; 
      font-size: 1.4rem;
      line-height: 2rem;
      padding: 1rem 0;
      font-weight: 900;
    }  
    .listBlock h4{
      background-color: var(--primary-background); 
      color: #fff;
      font-weight: 900;
      text-transform: uppercase;
      text-align: center; 
      padding: 1rem 0;
      font-size: 1.4rem;
      line-height: 2rem;
    }  


    .tabrow{
      margin: 0;
      padding: var(--panel-padding)
    }
    .tabrow.first_tabrow{
    }
    .tabrow:has(.equal_cols){
    }
    .tabrow:has(.two_blockcols){
    }
    .tabrow:has(.three_blockcols){
    }        
    .tabrow:has(.gridblocks){
    }
    .tabrow:has(.two_column_promo_row){
    }
    .tabrow:has(.image_side_col){
    }
    .tabrow:has(.split_promo_block){
    }
    .tabrow:has(.floating_call_2_action){
    }
    .tabrow:has(.side_widgets){
    }  
    .tabrow:has(.menuBlock){
      padding: 0
    }   


    .tabrow p{
      font-family: var(--primary-font);  
      color: var(--primary-textcolor) ; 
      font-size:var(--primary-fontsize);
      margin:20px 0; 
    }
    .tabrow img{
      max-width: 100%; 
      height: auto;
    }
    .tabrow ul{ 
      margin:0 0 10px; 
      padding:0;
    }
    .tabrow ol{ 
      margin:0 0 10px 20px; 
      padding:0;
    }
    .tabrow ul li {
      font-family: var(--primary-font);  
      color: var(--primary-textcolor) ; 
      font-size:var(--primary-fontsize); 
      display: block;
      list-style: none;
    }
    .tabrow ul li::before {
      content: "";
      display: inline-block;
      margin-left: -30px;
      margin-right: 10px;
      height: 10px;
      width: 10px;
      background-color: var(--btn-primary-background);
    }
    .tabrow ol li {
      font-family: var(--primary-font);  
      color: var(--primary-textcolor) ; 
      font-size:var(--primary-fontsize); 
      padding: 0 0 0 15px;
    }





/*-----------------------------------------------------------------------------------*/
.equal_cols,.two_blockcols,.three_blockcols{

  }
.tabFull{
    width: 100%
}
.tabNarrow{
    width: 100%; 
    max-width: var(--small-container); 
    margin:auto 
}
.narrowContent_inner{

}
.narrowContent_inner h3{
   text-align: center; 
   float: unset;
}

/*-----------------------------------------------------------------------------------*/
.gridBlocks{
 }
.gridBorder{
   margin-bottom: 20px;
   position: relative;
 }
.gridBorder_inner{
  padding: 20px; 
  text-align: center;  
  height: 100%; 
}
.gridBorder_innerImg{
  text-align: center; 
  height: 100%; 
  display: inline-block; 
  width: 100%;
}

/*-----------------------------------------------------------------------------------*/
.imageGridLayout{
  gap: 2em  !important;
}
.imageGrid{
  min-height: 400px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
 }
.imageGrid_specific{
  max-width: 525px;
  background-size:cover;
  background-repeat: no-repeat;
}
.contentGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}
.textGrid{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width:100%;
    padding:20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    color:#ffffff;
}
.imageGrid:hover .textGrid {
  opacity: 1;
}
.headerContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  opacity: 1;
  transition: opacity 0.5s ease;
  font-weight: 900;
  font-size: 24px;
}
.imageGrid:hover .headerContainer {
    opacity: 0;
  }
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}
  .imageGrid:hover .mask {
    opacity: 1;
  }
/*-----------------------------------------------------------------------------------*/

.tabcol1{
  padding: 0 40px 0 0;
}
.tabcol2:first-child{
  padding: 0px;
}
.tabcol2{
  padding: 0 0 0 40px; 
}
.tabcol2:last-child{
  padding-left: 40px;
}
.tabcol3:first-child{
  padding-right: 40px;
}
.tabcol3:last-child{
  padding-left: 40px;
}


div[class*="tabcol"] {
  font-family: var(--primary-font); 
}
div[class*="tabcol"] .btngroup a{
  font-size: var(--btn-fontsize);
  text-decoration: none;
  text-transform: uppercase;
  color:#0a508b;
  padding: var(--btn-padding); 
  margin:var(--btn-margin); 
  display: inline-block;
  border:2px solid #0a508b;
  font-weight:700; 
  background:#fff;
}
div[class*="tabcol"] .btngroup a:hover{ 
  background: #0a508b;
  color: var(--primary-textcolor);
  border:2px solid #084272;
}

div[class*="tabcol"]  p{
  font-size: var(--primary-fontsize); 
  color: var(--primary-textcolor) ; 
  margin:20px 0;
  padding: 0;
  line-height: 25px;
}
div[class*="tabcol"]  p:first-child {
  margin-top: 0;
}
div[class*="tabcol"] ul{
 margin:0 0 10px; 
 padding:0;
}
div[class*="tabcol"] ul li {
  list-style: none;
  background: url(../images/listicon.jpg) no-repeat 0 10px;
  padding: 0 0 0 15px; 
  margin-left: 15px;
  font-size: var(--primary-fontsize); 
  color: var(--primary-textcolor) ; 
  line-height:30px 
}

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

a.promoLinkRow {
  display: inline-block; 
  padding: 10px 20px;  
  color: #6C7A89;  
  border: 1px solid #009edb; 
  text-decoration: none;
}
a:hover.promoLinkRow{
  border: 1px solid #6C7A89; 
  text-decoration: none; 
  color: #009edb
}

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

.container.cnt-1803{max-width: 1200px;}
.container.ctn-image_side_col{max-width: 1200px; }

.container.cnt-1800{max-width: 1200px;}

.listBlock{margin-bottom: 20px}
.listBlock_inner{ background-color: #f3f3f3;}

.listBlock p{
  font-family: var(--primary-font) ; 
  font-size:var(--primary-fontsize); 
  color: var(--primary-textcolor) ;  
  line-height:30px; 
  padding: 0 20px; 
  margin:20px 0;
} 
.listBlock ul{list-style: none;}
.listBlock ul li{ 
  list-style: none;
  background: url(../images/listicon.jpg) no-repeat 0 10px;
  padding: 0 0 0 15px; 
  margin: 0 20px;
  font-family: var(--primary-font) ;
  font-size:var(--primary-fontsize) ;
  color: var(--primary-textcolor) ; 
  line-height:28px 
}
.listBlock a{
  font-family: var(--primary-font); 
  font-size:var(--primary-fontsize) ;
  color: #808080 ;  
  line height:30px; 
  text-decoration: none;
}
.listBlock a: hover{ 
  color: #808080 ; 
  text-decoration: none;
}

.fancyBlock{position: relative;}
.fancyBlock_inner{ background-color: #f3f3f3;}

.fancyBlock p{
  font-family: var(--primary-font); 
  font-size:var(--primary-fontsize) ; 
  color: var(--primary-textcolor) ; 
  line-height:30px; 
  padding: 0 20px;
  margin:20px 0;
}
.fancyBlock p:last-of-type{
  margin-bottom: 80px;
}
.fancyBlock ul li{ 
  font-family: var(--primary-font) ; 
  color: var(--primary-textcolor) ; 
  font-size:var(--primary-fontsize) ; 
  line-height:28px;
  list-style: none;
  background: url(../images/listicon.jpg) no-repeat 0 10px;
  padding: 0 0 0 15px; 
  margin: 0 20px; 
}
.fancyBlock a{
  font-family: var(--primary-font);
  color: #fff;  
  position: absolute;
  bottom: 10px
}
.fancyBlock a:hover{ 
  text-decoration: none; 
  color: #009edb
}

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

.menuBlock{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;  display: flex;
}
#left-content,
#center-content,
#right-content {
 
}
.menuBlock ul li{ 
  list-style: none; 
  background: unset; 
  padding: 0 0 0 15px; 
  display: inline-block; 
  margin: 0 20px; 
  vertical-align:middle; 
  text-align: center;
  line-height: 18px; 
}
.menuBlock ul li a{
  font-family: 'Radikal';  
  color: #009edb !important ;  
  font-weight: 900; 
  font-size:14px ; 
  line-height:18px; 
  text-decoration: none; 
  text-transform: uppercase;
}
.menuBlock ul li a:hover{
  text-decoration: none;
  color: var(--emp-textcolor);
  }

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

.group_panel{

}

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

.element_side_col{

}
.element_side_col .escol_item1{
  order:1;
}
.element_side_col .escol_item2{
  order:2;
}


/*-------------------------------------------------------------------------------------------------------*/
/* -----------------------------------Embedded Page/Post Galleries-------------------------------------*/
.gallery{width: 100%; }

.gallery-columns-9 .gallery-item{width: 14%; float: left; text-align: center;}
.gallery-columns-8 .gallery-item{width: 14%; float: left; text-align: center;}
.gallery-columns-7 .gallery-item{width: 14%; float: left; text-align: center;}
.gallery-columns-6 .gallery-item{width: 16%; float: left; text-align: center;}
.gallery-columns-5 .gallery-item{width: 20%; float: left; text-align: center;}
.gallery-columns-4 .gallery-item{width: 25%; float: left; text-align: center;}
.gallery-columns-3 .gallery-item{width: 33%; float: left; text-align: center;}
.gallery-columns-2 .gallery-item{width: 50%; float: left; text-align: center;}
.gallery-columns-1 .gallery-item{width: 100%; float: left; text-align: center;}


/*--------------------------------------------------------------------------------------------------------------------------- */
/*-------------------------------------Buttons ------------------------------------------------------------------------------ */
.solid_btn {
  color: var(--btn-primary-color);
  background: var(--btn-primary-background);
  font-size: var(--btn-fontsize);
  text-transform: uppercase;
  font-family: var(--btn-primary-font);
  display: inline-block;
  font-weight: 400;
  padding: var(--btn-padding); 
  text-decoration: none;
}
.solid_btn:hover {
  background: var(--btn-primary-hover-background); 
  outline: 1px solid var(--btn-primary-focus-outline); 
  text-decoration: none;
  color: var(--btn-primary-hover-color);
}
.solid_btn:focus, 
.solid_btn:focus-visible {
  background: var(--btn-primary-hover-background); 
  outline: 1px solid var(--btn-primary-focus-outline); 
  color:#fff;
}
.solid_btn a{
  color:#fff !important;
  font-size:14px;
}

.solid_btn_centered{
    transform: translateX(-50%);
    position: relative;
    left: 50%;
}

.sliderBtn{
    background-image: url('../img/btn-background.jpg'); 
    background-position:center;
    background-size:cover;
    width:300px;
 /*   border: 1px solid #000; */
    font-size:16px;
    font-weight: 400;
    text-align: left;
    padding:10px 40px 10px 10px;
}
.sliderBtn:hover {
    background: #000; 
    text-decoration: none;
    color: var(--btn-primary-hover-color);
}

.sliderBtn::after {
}


.bluebtn {}
.bluebtn:hover {}

.greenbtn {
  background: #00A750;
  font-weight: 500;
}
.greenbtn:hover, 
.greenbtn:focus,
.greenbtn:focus-visible, {
  background: #028c44; 
  outline:1px solid #028c44;
}

.newsbtn_desktop{display:block}
.newsbtn_mobile{display: none}

.loadmorelink{ t
  ext-align:center; 
  font-family: var(--primary-font);
  font-size:var(--primary-fontsize);
  font-weight:600; 
  color:var(--primary-textcolor); 
  text-transform:uppercase; 
  display:block; 
  text-decoration:none; 
  border:0; 
  background:none; 
  margin:0 auto;
}
.loadmorelink img {  
  display: inline-block;  
  margin: -4px 0 0 6px;
}
.loadmorelink:hover{ 
  color:#009edb; 
  text-decoration:none;
}
/*-------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------  Header  -------------------------------------------*/

header {
  width: 100%;
  clear: both; 
  position:absolute; 
  top:0; 
  left:0; 
  z-index:999999;
  background-color:#ffffff;
}
.headerRow{
  display: flex;
  justify-content: space-between;
  place-items: center;
  height: 75px;
  position:relative;
  top:0;

}
.headerRow:hover{
/*  height: 120px; */
}
.mainNav{}
.headerRow:hover > .mainNav{
 /* align-self: self-end; */
}

.logo{ 
    float: left;
    margin-left: 40px;
    margin-top:-75px;
    height: 115px;
    width: 225px;
    background-image: url(../images/nzlsupply_logo.png);
}
/*-------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------  Roaming Top Header  -------------------------------------------*/

.roamingTop{
  position:relative;
  z-index: 1;
}
.roamingTop .custom_block_content {
  height: 75px;
}
.roamingTop .container-fluid {
  height: 75px;
}
.roamingTop .container{
  position: absolute;
  top:0;
  right:0;
}


.roamingTop .social_list {
  text-align: right;
}
.roamingTop .social_list ul{
  list-style-type: none;
}
.roamingTop .social_list li{
  display:inline-block;
}
.roamingTop .social_list li::before{
  content:unset;
}
.roamingTop .social_list li a{
  color:#c5c5c3
}


.roamingTop .search-form{
  float:right;
}
.roamingTop .search-form .search-field {
    background-image: url('../img/search-icon.webp'); 
    background-position: left 10px center; 
    background-size: 20px; 
    background-repeat: no-repeat;
    padding-left: 35px;
    border: 1px solid #999999; 
    height: 40px;
    box-sizing: border-box; 
}
.roamingTop .search-form .search-field:focus-visible {
    border:none;
}    

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

.subpageBanner{ 
    display: grid;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 550px; 
    align-items: center; 
    justify-content: center; 
    margin-top:120px;
  }

.pagebannertitle {
  background: none;
  text-align: center;
}
.pagebannertitle h1{
  font-family: var(--h1-ff); 
  font-size:var(--h1-fontsize);
  color: #ffffff;
  font-weight: 600;
  margin:0; 
  padding:0; 
  text-transform:uppercase; 
}
.pagebannertitle h3{
  font-family: var(--primary-font); 
  font-size:32px;
  color: var(--emp-textcolor);
  font-weight:400; 
  margin:0; 
  padding:0; 
}

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

.innerContainer {
    max-width: 1290px;
    margin: auto;
}

/*--------------------------------------------- ----------------------------------------------------------------------------- */
/*---------------------------------Slider Carousel------------------------------------------------------------------------------ */

.        .slideArea { 
            width: 100%; 
            clear: both;   
            overflow: hidden; 
            position: relative;
        }

        .slideArea .carousel-item {
            height: 100vh;
            background: no-repeat center center scroll;
            background-size: cover;
        }

        .slideArea .kb_wrapper {
            max-height: unset;
        }

        .slideArea .carousel-item img { 
            width: 100vw;
        }

        .carousel-indicators [data-bs-target]{ 
            box-sizing: content-box;
            flex: 0 1 auto;
            width: 20px;
            height: 20px;
            padding: 0;
            margin: 0 3px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #000;
            opacity: 0.5;
            transition: opacity 0.6s ease;
        }

        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #myVideo {
                    width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }



        .myVideoCaption {
            z-index: 1; 
            height: 100%;
            width: 100%;
        }   

        .slideArea .carousel-caption { 
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            padding-top: 0;
            padding-bottom: 35px;
            color: #fff;
            text-align: center;
            height: 100%;
            justify-content: center;
            flex-flow: wrap;
            display: flex !important;
        }

        .bannercap {
            padding: 30px; 
            display: inline-block;
            text-align: left;
            opacity: var(--primary-opacity);
            background-color: var(--primary-background);
        }

        .bannercap h2, .bannercap_quote h2 {
            font-family: var(--header-font);
            font-size: 42px; 
            color: #ffffff;
            margin: 0;
            padding: 0;
            font-weight: 600;
        }

        .bannercap h2 em { color: var(--emp-textcolor); }

        .bannercap h3, .bannercap_quote h3 {
            font-family: var(--primary-font);
            font-size: 16px;
            color: #ffffff;
            text-transform: uppercase;
            margin: 15px 0 20px 0;
            padding: 0;
            font-weight: 400;
        }

        .mobileCap {
            display: none;
        }

        


.position-top-right {position: absolute;  left: unset !important; top: 10px !important; bottom: 0 !important;text-align: right !important;}
.position-top-middle {position: absolute; top: 10px !important;  text-align: center !important;}
.position-top-left{position: absolute;left: 90px !important; top: 10px  !important; text-align: left !important; }

.position-bottom-right {position: absolute;   bottom: 0 !important;text-align: right !important;  height: unset!important;}
.position-bottom-middle {position: absolute; bottom: 10px !important; text-align: center !important;  height: unset!important;}
.position-bottom-left  {position: absolute;left: 90px !important; bottom: 10px !important; text-align: left !important;  height: unset!important;}

.position-middle-right  {position: absolute;right: 90px !important; top: 0 !important;bottom: !important; left:90px !important;
  text-align: right !important;display: flex !important; vertical-align: middle!important;align-items: center!important;}
.position-middle-middle  {position: absolute;right: 0 !imprtant;top: 0 !important; bottom: !important; left:0px !important;
  text-align: center !important;  display: flex !important; vertical-align: middle!important;align-items: center!important;}
.position-middle-left  {position: absolute;right: 0 !important;bottom: 0 !important; left:90px !important;
  text-align: left !important; display: flex !important; vertical-align: middle!important;align-items: center!important;}
.position-middle-middle  h5 {display: block;text-align: center;}


/* -----------------------------------------------Scroll To Elements --------------------------------------------- */
/*--------------------------------- ------------------------------------------------------------------------------ */

.next a  { position: absolute; bottom:35px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);  transition: opacity .3s;  width: 46px;  height: 46px;
    margin-left: -23px;   border: 1px solid #fff;   border-radius: 100%;   box-sizing: border-box;
}

.next a:hover {  opacity: .5;}

.next a span::after {
    position: absolute; top: 50%; left: 50%; content: ''; width: 16px; height: 16px; margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;  border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box;
}

.backtoup {  width: 100%;  clear: both; position: fixed;  bottom: 10px;  right: 10px;  display: none; }
.backtoup a {
    width: 40px;
    height: 40px;
    background: url(../img/backup.png) no-repeat center center;
    font-size: 0px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color:var(--btn-primary-background);
    }
.backtoup a:hover{ background-color:var(--btn-primary-hover-background)}



/* -----------------------------------------------Front Page --------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */


#carouselExampleCaptionspro .carousel-inner{
}


.frontpage-contentarea{ 
  height:100%;
}
.frontpage-contentarea h2{
  font-family: var(--primary-font); 
  font-size:var(--h2-fontsize); 
  font-weight:900; 
  margin:0; 
  padding:0;
}
.frontpage-contentarea p{
  font-family: var(--primary-font); 
  font-size:var(--primary-fontsize); 
  color:var(--primary-textcolor); 
  font-weight:400;   
  margin:20px 0; 
  padding:0;
}


/* ---------------------------  MENU ---------------------------------------------- */

.menu-primary-container{   float:right; margin:  0; padding:0;}
.menu-primary-container ul{ display:block; margin:0; padding:0;}
.menu-primary-container ul li{ display:block; float:left; list-style:none; position:relative; font-family: var(--menu-ff)}
.menu-primary-container ul li a{ font-size:var(--menu-fontsize); font-weight:var(--menu-weight);text-transform:uppercase; color:var(--menu-color); 
  text-decoration:none; background:url(../img/blue-elipse.png) no-repeat 0 50%;   background-size: 16px; padding:0 15px 0 15px;}
.menu-primary-container ul li:first-child a{ padding-left:0; background:none;}
.menu-primary-container ul li:hover a{background:url(../img/blue-elipse.png) no-repeat 0 50%; 
  color:var(--menu-hover-color); text-decoration:none;  background-size: 16px; padding-bottom:10px; 
  /*border-bottom:5px solid var(--emp-textcolor)*/}
.menu-primary-container ul li:first-child:hover a{background:none; color:var(--menu-color); text-decoration:none;  background-size: 0;}
.menu-primary-container ul li > a .first-level-indicator {   }

.menu-primary-container ul li .sub-menu{ display:none; width:240px; background:var(--submenu-bgcolor); opacity:var(--submenu-opacity); position:absolute;  z-index:999; margin:0; padding:15px 0  }
.menu-primary-container ul li:hover .sub-menu{ display:block;  }
.menu-primary-container ul li .sub-menu li{ margin:0; padding:0; display:block; clear:both; list-style:none; width:100%;}
.menu-primary-container ul li .sub-menu li a{ display:block; width:100%; background:none !important; font-size:var(--submenu-fontsize); font-weight:var(--submenu-weight); 
  color:var(--submenu-color) !important; border-bottom:unset;text-transform:none; text-decoration:none; padding:8px 30px!important; margin:0!important;}
.menu-primary-container ul li .sub-menu li:hover a{ color:var(--submenu-hover-color) !important}
.menu-primary-container ul li > a .second-level-indicator {  font-size: smaller;  margin-left: 5px;}

.menu-primary-container ul li .sub-menu .sub-menu {
    display: none;    position: absolute;    left: 100%;   top: 0;  }
.menu-primary-container ul li .sub-menu li:hover > .sub-menu {    display: block;}
.menu-primary-container ul li .sub-menu .sub-menu li {   }

.mainmenu .sub-menu .menu-item-has-children .mrb-pull-right {    left: unset; }

.mainmenu .sub-menu .mrb-pull-right {left: auto; right: 100%; position: absolute;}
.mainmenu .sub-menu .sub-menu .mrb-pull-right {left: auto; right: 100%; position: absolute;}
.nocursor a:hover{cursor: default;}

.side-menu-wrapper {overflow: hidden;position: fixed;top: 0;left: -290px;height: 100%; transition: 0.5s;width: 250px;z-index:9999999;background:#1c292f;padding: 40px 20px 0 20px;}
.sid
e-menu-wrapper ul{padding:0;margin:0;width:100%;height:95%;list-style:none;overflow-y: auto; }
.side-menu-wrapper  ul  li{ position:relative; width: 100%}
.side-menu-wrapper  ul  li a {display:block;color: #41999c;transition: 0.3s;text-decoration: none;font-size:16px;text-transform:uppercase;padding: 6px 4px 6px 4px;border-bottom: 1px solid #41999c;}
.side-menu-wrapper a.menu-close { float: right;color:#6B6B6B;display: block; font-size: 35px;margin: -52px 0 -10px 0;padding: 8px 0 4px 23px;text-decoration: none; }
.side-menu-overlay {top: 0;left: 0;width: 0;height: 100%;opacity: 0;position: fixed;z-index:999999;overflow-y: auto;overflow-x: hidden;text-align: center;transition:opacity 1s;background-color: rgba(0,0,0,.7);}
.side-menu-wrapper  ul  li:hover a {color:#fff;}
.side-menu-wrapper  ul  li  .sub-menu{margin:0; width:100%;display:none; padding:0 0 0 0 ; }
.side-menu-wrapper  ul  li.currentdrop  .sub-menu{margin:0;  width:100%;display:block; padding:0 0 0 0 ;}
.side-menu-wrapper  ul .sub-menu li{ list-style:none; display:block;}
.side-menu-wrapper  ul .sub-menu li a{ color:#fff; font-size:14px;display:block;padding:8px 15px 8px; text-decoration:none; text-transform:uppercase; }
.side-menu-wrapper  ul .sub-menu li:hover a{ background:#eab177; text-decoration:none; text-transform:uppercase; padding:8px 20px; color:#000;}
.slide-menu-open{ display:none;}
svg{display:none !important;} 
.side-menu-wrapper ul li .icon {background: url(../img/menuicon-hov.png) no-repeat 100% 50%;background-size: auto;display: block;float: right;width: 10px;height: 10px;position: absolute;top: 14px;right: 0;background-size: 6px;}
.child-items::before{ }


/*------------------------------------------------Mobile Memu Style End Here ****

/* ---------------------------------  Share Media  --------------------------------- */
/* Define the styling for the social media icons */
.socialmedia_block{
  height: 40px;
  width: 100vw;
  padding-right:1vw;
  background-color: var(--page-background-color);
}
.socialmedia {
  list-style-type: none; /* Remove default list styles */
  padding: 0; /* Remove any default padding */
  float: right;
}

.socialmedia a {
  text-decoration: none; /* Remove underline from links */
}

.socialmedia li {
  display: inline-block; /* Display the list items in a horizontal line */
  margin-right: 10px; /* Add some spacing between the icons */
  font-size: 24px; /* Set the font size of the icons */
}

.socialmedia_block a{
  color:#d7d2ce;
  font-weight: 600;
  font-size:16px;
  text-decoration: none;
}

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

.searchform{ 
  width:70%; 
  margin:0 auto 35px;
}

.formSec > p, .formSec p{
 margin:0  0 5px; 
 padding:0;
 font-family: 'Radikalregular'; 
 font-size:var(--primary-fontsize);  
 font-weight:500;
 color:var(--h2-color);
 text-transform:uppercase; 
}
.searchcol{ 
  width:100%; 
  clear:both; 
  height:46px; 
  border:1px solid #B9B9B9; 
  padding:0 40px 0 0; 
  position:relative;
    border-color: var(--primary-background);
}
.searchcol input{ 
  display:block; 
  width:100%; 
  height:44px; 
  border:0; 
  font-family: var(--primary-font);
  font-size:var(--primary-fontsize);
  font-weight: 400; 
  color:var(--primary-textcolor); 
  padding:0 15px;
}
.searchcol input.formbtn{ 
  background:url(../img/icon-search.jpg) no-repeat center center; 
  background-size:40px; 
  width:40px; 
  position:absolute; 
  top:0; 
  right:0; 
  font-size:0px;
}
.searchcol input{ 
  outline:0;
}

.selectcol{ 
  width:32%;
}
.selectboxsec {
  display: flex;
  justify-content: space-between;
}
select {
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  flex: 1;
  padding: 0 0  0 10px;
  color:var(--primary-textcolor);
  background:none;
  border-radius:0;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
.select {
  position: relative;
  display: flex;
  width: 100%;
  font-family: var(--primary-font);
  font-size:var(--primary-fontsize);
  font-weight: 400; 
  color:var(--primary-textcolor); 
  padding:0 0;
  border: 1px solid var(--primary-background);
  height:46px; 
  overflow: hidden;
  background:none;
  color:var(--primary-textcolor);
}

.select::after {
  content: '\f107';
  background: url(../img/filter-dropdown.png) no-repeat center center;
  background-size: auto;
  position: absolute;
  top: 0;  
  right: 0;
  padding: 1em;
  transition: .25s all ease;
  pointer-events: none;
  font-size: 0;
  width: 40px;
  height: 45px;
  background-size: 30px;
}
.select:hover::after {
  color:var(--primary-textcolor);
}



/* ---------------------------------  TEAM  --------------------------------- */



/*  -------------------------------------------------  PRESS  ------------------------------------------------ */




/*----------------------------------- Projects ---------------------------------------------------------------------- */



/*------------------------------------  Innner Footer  ------------------------------------------------------------------------*/

.emailSec {
  background: url(../img/img-bground-newsletter.jpg) no-repeat center center;
  width: 100%;
  clear: both;
  overflow: hidden;
  padding: 60px 0;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.emailcontainer {
  width: 100%;
  clear: both;
  padding: 0 150px;
  height: 150px;
  background: var(--primary-background);
  display: flex;
  align-items: center;
  justify-content: center;
}
.emailcontainer h3{
  font-family: var(--primary-font); 
  font-size:var(--primary-fontsize); 
  color: #fff;
  font-weight:700; 
  margin:0; 
  padding:0; 
  float:left; 
  text-transform:uppercase; 
}
.emailform{ 
  float:right; 
  width:350px; 
}
.emailform input{ 
  font-family: var(--primary-font); 
  font-size:var(--primary-fontsize); 
  color: var(--primary-textcolor);
  font-weight:400; 
  display:block; 
  border:1px solid #fff; 
  height:40px; 
  padding:0 10px; 
  width:100%; 
  background:none;
 }
.emailform input:focus{ 
  outline:0;
}
.emailform input::placeholder {
  color: #fff;
}



/* --------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------  Footer ------------------------------------------------------------------------*/

footer{ 
  width:100%; 
  clear:both; 
  overflow:hidden; 
  background:var(--footer-background);
}
footer span{
  display: flex;
  height: 100%;
}
footer h3{
  color: #fff;
  margin-top: auto;
  margin-bottom: 0;
  font-family: var(--primary-font); 
}

.footerRow {
  display: flex;
  justify-content: space-between;
  place-items: center;
  height: 120px;
}

.footcol{}
.footcol:first-of-type{margin-left:-15px}
.footcol h3{ 
  font-family: var(--primary-font); 
  color:var(--footer-textcolor); 
  font-size:var(--primary-fontsize);
  font-weight:900; 
  text-transform:uppercase; 
  margin:0 0 15px; 
  padding:0; 
}
.footcol p{ 
  font-family: var(--primary-font); 
  color:var(--footer-textcolor); 
  font-size:14px; 
  margin:0; 
  padding:0; 
  font-weight:600;
}
.footcol p a{ 
  color:var(--footer-textcolor); 
  font-size:14px; 
  margin:0; 
  padding:0; 
  font-weight:600; 
  line-height:25px; text-decoration:none;
}
.footcol p a:hover{ color:var(--footer-textcolor);}

ul.quicklinks_class, ul.productlinks_class { 
  margin:0; 
  padding:0;}
ul.quicklinks_class li, ul.productlinks_class li{
  font-family: var(--primary-font) !important;
  color:var(--footer-textcolor)!important;
  font-size:14px !important;
  font-weight: 600!important;
  display:block; 
  clear:both; 
  list-style:none;
}
ul.quicklinks_class li:before, ul.productlinks_class li:before{
  margin-right:0; 
  clear:both; 
  list-style:none;
  width:0;
  height: 0;
  background-color: transparent;
}

ul.quicklinks_class li a, ul.productlinks_class li a{ 
  font-family: var(--primary-font); 
  color:var(--footer-link-color); 
  font-size:14px; 
  margin:0; 
  padding:0; 
  font-weight:600; 
  line-height:28px;
  text-decoration:none;
}
ul.quicklinks_class li a:hover, ul.productlinks_class li a:hover{ 
  color:var(--footer-link-color);
}


.followus {
  list-style-type: none;
  padding: 0;
  float: right;
  margin:0 0 10px;
}
.followus  li{ 
  display: inline-block;
}
.followus  li a img {width: 30px;
  opacity: .5;
}
.followus  li a:hover img {width: 30px;
  opacity: 1;
}
.line{ width:96%; 
  height:1px; 
  background:#4d4d4e; 
  clear:both; 
  margin:25px auto
}

.sidepanel{ 
  background:var(--emp-textcolor); 
  position:fixed; 
  top:45%; 
  right:0; 
  padding:10px 15px;
  z-index:9999999;
  border-radius: 12rem 0 0 12rem;
  width: 50px;
  height: 100px;
 }
.sidepanel ul{ 
  margin:0; 
  padding:0; 
  width:100%; 
  text-align:center;
}
.sidepanel ul li{ 
  display:block; 
  text-align:center; 
  list-style:none;
   margin:15px 0
 }
.sidepanel ul li img{ 
  display:block; 
  width:32px; 
  margin: 0 auto;}

.sidepanel ul li:hover img{ opacity:.5;} 

.verticaltext{
  transform: rotate(270deg);
  transform-origin: center; 
  font-family: var(--primary-font);
  color: var(--primary-textcolor); 
  text-transform: uppercase;
  font-size: .75rem; 
  white-space: nowrap;
  position: relative; 
  top:60%;
  left:30%;
}
.verticaltext a{
  color: #fff; 
  text-decoration: none;
}
.verticaltext a:hover{
  color: #fff; 
  text-decoration: none;
}



/* --------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------ wysiwyg editor fonts ---------------------------------------------------- */


.divGrey{display: block; height: 100vh; margin: 0 -15px; padding: 15px; background-color: #f3f3f3}
.divWhite{display: block; height: 100vh; margin: 0 -15px; padding: 15px; background-color: #ffffff}

.header_lg-white{font-weight: 400; font-size: var(--h2-fontsize); line-height: 66px; color: var(--h1-color); font-family:var(--h1-ff)}
.header_md-white{font-weight: 400; font-size: var(--h3-fontsize); line-height: 56px; color: var(--h3-color); font-family:var(--h3-ff)}
.header_sm-white{font-weight: 600;  line-height: 48px; color: var(--h5-color); font-family:var(--h1-ff)}

.header_lg-grey{font-weight: 400; font-size: var(--h2-fontsize); line-height: 66px; color: var(--h1-color); font-family:var(--h1-ff)}
.header_md-grey{font-weight: 400; font-size: var(--h3-fontsize); line-height: 56px; color: var(--h3-color); font-family:var(--h3-ff)}
.header_sm-grey{font-weight: 600;  line-height: 48px; color: var(--h5-color); font-family:var(--h5-ff)}

/*.subheader_std{font-weight: 700; font-size: 18px; line-height: 38px;color: #1E1E1E}
.subheader_blue{font-weight: 700; font-size: 17px; line-height: 24px;color: #009edb;} */

.blue-emphasis{font-weight: 300; font-size: var(--emp-fontsize); color: #009edb; line-height: 38px;}
.link-green{display: inline-block; border: 1px solid green; padding: 10px 20px}
.link-blue{display: inline-block; border: 1px solid var(--primary-highlight); padding: 10px 20px}


.header_lg-white::after, .header_lg-grey::after {
    content: ""; 
    display: block; 
    width: 70px; 
    height: 5px; 
    background-image: url('../images/embellishment.png'); 
    margin:20px 0;
}

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


/*----------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- Search page -----------------------------------------------------------*/

.search_content{
  margin-top:75px;
}
.search_content h2{
    font-size: var(--h2-fontsize);
    color: var(--emp-textcolor);
    font-weight: 700; 
}
.search_content h2:first-of-type{
    margin-top: ; 
}
.searchResult_Div{ 
    display: flex;
    margin-bottom: 20px
}
.searchResult_left{ 
    width: 25%;
}
.searchResult_right{
    width: 75%;
    padding: 0 25px;
}
.searchResult_Div h3{
    font-size: var(--h2-fontsize);
    color: var(--h2-color);
}
.searchResult_Div img{
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}
.searchResult_Div a{
    text-decoration: none;
    background-image: linear-gradient( var(--emp-textcolor), var(--emp-textcolor));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 3px;
    transition: background-size 800ms ease-in-out;
    color: inherit;
}
.searchResult_Div a:hover{
    background-size: 100% 3px;
    color: inherit;
}
.searchResult_Div p{
    display: contents;
}


/*--------------------------------------------------------------------------------------------------------------------------- */
/*--------------------------------------------- Responsive Video  -----------------------------------------------------------*/
.hbps-responsive-video { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.hbps-responsive-video iframe, 
.hbps-responsive-video object, 
.hbps-responsive-video embed, 
.hbps-responsive-video video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    width: 100%;
    height: 100%;
}

.desktop_videoVersion{
  display:block;
}
.mobile_videoVersion{
  display:none;
}

.videobackground{
  background-size:contain;
  background-repeat: no-repeat;
}
.videobackground:hover{
  cursor:pointer  
}
#myVid{
  display:none
}


/* --------------------------------                 embedded into page (hide title) */
.kgvid_video_meta_hover {
      display:none !important;
}


/* --------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------ Parallax Section ---------------------------------------------------- */


.img-parallax {
    width: 100vmax;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    pointer-events: none
}
.parallax-static,.parallax-dynamic{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax-normal{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax-static, .parallax-dynamic{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.parallax-static h2,.parallax-dynamic h2,.parallax-normal h2{
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    top: 40%;
    transform: translateY(-50%);
    font-family:var(--h2-ff);
    font-size: var(--h2-fontsize);
    line-height: calc(var(--h2-fontsize) * 1.1);
    line-height: 46px;
    color: var(--parallax-header-color);
    font-weight: 400;
    max-width: 1000px;
}
.parallax-static h3,.parallax-dynamic h3,.parallax-normal h3{
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--h3-ff);
    font-size: 18px;
    line-height: calc(var(--h3-fontsize) * 1.1);
    color: var(--parallax-subheader-color);
    font-weight: 600;
    max-width: 1000px;
}
.parallax-static .solid_btn,.parallax-dynamic .solid_btn, .parallax-normal .solid_btn{
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    top: 60%;
    transform: translateY(-50%);
    color: #ffffff;
    font-weight: 600;
}

.parallax-dynamic .parallax_h2,
.parallax-dynamic .parallax_h3,
.parallax-dynamic .solid_btn {
    position: absolute;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
   
    text-align: center; /* Center the text within the element */
}

.parallax-dynamic .parallax_h2 {
    top: 40%; /* Adjust this value to move h2 up or down */
}

.parallax-dynamic .parallax_h3 {
    top: 50%; /* Adjust this value to move h3 up or down */
}

.parallax-dynamic .solid_btn {
    top: 60%; /* Adjust this value to move the button up or down */
}

.parallaxCentered{
    display: flex;
    align-items: center;

}
.parallaxCentered h2{
    top:unset;
    transform:unset;

}
/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- Grids -------------------------------------------------------*/

.layoutGrid{
  display:grid;
  grid-template-rows:max-content;
  gap:1em;
  margin-bottom: 3em;
  justify-content: center;
}
.layoutGrid.itemsPerRow_1{
  grid-template-columns: 1fr;
}
.layoutGrid.itemsPerRow_2{
  grid-template-columns: repeat(2,1fr);
}
.layoutGrid.itemsPerRow_3{ 
  grid-template-columns: repeat(3,1fr);
}
.layoutGrid.itemsPerRow_4{
  grid-template-columns:repeat(4,1fr);
}
.layoutGrid.itemsPerRow_5{
  grid-template-columns: repeat(5,1fr);
}
/* --------------------------------------------------------- */

.pressGrid{
 
}


/* --------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------ Hover Blocks ---------------------------------------------------- */

.mainBox{
  padding: .7em;
  background-size: cover;
  background-position: center;
  min-height: 400px;
}
.mainBox h2{
  color:var(--h2-color);
  font-size: 1.5rem;
  line-height: 2rem;
}
.mainBox span{
  color: var(--primary-textcolor);
  font-size: .8rem;
}
.mainBox p{
  color:transparent;
}
.mainBox:hover p{
  color: var(--primary-textcolor);
}
.hoverBox{
  position:relative;
  z-index:1;
}
.hoverBox a, .hoverBox a:hover{
  text-decoration: none ;
}
.hoverBox::after{
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-color:var(--primary-maskcolor);  z-index:-1;
}
.hoverBoxContent{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  height: 100%;
}
.hoverLeft::after{
  transform:scaleX(.2);
  transform-origin:left; 
  transition:transform 1s ease-in
}
.hoverLeft:hover::after{
  transform:scaleX(1);
}
.hoverFade::after{
  opacity:0;
  transition: opacity 1s;
}
.hoverFade:hover::after{
  opacity:.75;
}
.hoverZoom:hover::after{
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.hoverGreyScale::after{
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
}

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

.allproductContainer{max-width: 1350px}

.pressBox{
   height: 543px;
}
.pressDetails{
  margin-top:80px;
}
.pressContent{
   justify-content: flex-end;
   align-items: flex-start;
}
.pressContent p{
}
.pressContent:hover p{
}
.pressContent a{
  text-decoration :none;
  color: transparent;
}

.pressContent a:hover{
  text-decoration: none;
}
.projectContent{
   justify-content: flex-end;
   align-items: flex-start;
}
.projectBox{
   height: 400px;
}
.projectContent p{
}
.projectContent:hover p{
}

.affliateBox{
  min-height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid #b7b7b7;
}
.affliateBox h2{
  display: none;
}
.affliateBox:hover{
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
}
.affliateBox:hover h2{
  display: block;
  color: var(--emp-textcolor);
}

.staffBox{
  background-position: top;
  height: 400px;
}
.staffContent{
  justify-content: flex-end;
}

.frontnewsBox{
   max-height: 400px;
}
.newsContent{
   justify-content: flex-end;
   align-items: flex-start;
}
.newsContent a, 
.newsContent a:hover{
   text-decoration: none;
}



/* ------------------------------------- Cookie  -------------------------------------*/
.fixed {
  position: fixed;
  will-change: transform;
}

.fixed--bottom {
  bottom: 0;
  left: 0;
  right: 0;
}

.cookie-disclaimer {
  background-color: #000;
  color: #fff;
  font-size: var(--primary-textcolor);
  opacity: 0;
  padding: 2em;
  transform: translateY(100%);
  transition: opacity 0.3s, transform 0.5s;
}
.cookie-disclaimer.is-active {
  opacity: .8;
  transform: translateY(0);
}
.cookie-disclaimer :first-child {
  margin-top: 0;
}
.cookie-disclaimer :last-child {
  margin-bottom: 0;
}
.media {
  display: flex;
}
.media--center {
  align-items: center;
}
.media__object--left {
  margin-right: 
}
.media__object--right {
  margin-left: 
  order: 1;
}
.media__object--left {
  margin-right: 2em;
}
.media__object--right {
  margin-left: 2em;
  order: 1;
}
.media__body {
  flex-grow: 1;
}


/* ----------------------- accoridan ---------------------------------- */

.faqaccordion{
   margin:60px auto; 
   width:100%; 
}

.accordion-button::after{ 
  background:url(../img/plus.png) no-repeat;  
  position: absolute;right: 20px;
}
.accordion-button:not(.collapsed)::after {
  background: url(../img/collapsed.png) no-repeat;
  position: absolute;right:20px;
}
.accordion-button:focus{ 
  border-left: none !important; 
  border-bottom: 2px solid #var(--emp-textcolor) !important;
}
.accordion-item {
  border: none;
}
.accordion-header h3{ 
  text-transform: uppercase; 
  line-height: unset; 
  margin: 0;
  font-weight: 600;
}
.accordion-button {
  font-size: 18px;
  border-bottom: 1px solid var(--h1-color);
  border-left: 5px solid  transparent;
}
.accordion-button:not(.collapsed) {
  color: var(--emp-textcolor);
  box-shadow: none !important;
  border-bottom: none!important; 
  background-color: transparent;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--emp-textcolor);
  outline: 0;
  box-shadow: none !important;
}

.accordion-body{ 
  text-align:left; 
  padding: 0 0 0 25px
}
.accordion-body p {
  margin: 0 0 20px;
  padding: 0;}


/* ----------------------- Progress Circle ---------------------------------- */



.counter {
  display: grid;
  position: relative;
  width: 100%;
  margin: 0 auto;
  justify-items: center;
  padding: 20px;
}

.counter .count {
  font-size: 83px;
  font-weight: 100;
  color: var(--emp-textcolor);
}
.counter h3{
  color:#565656;
  font-size: 17px;
}
.counter .counter_content{
  color:#565656;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
}

.counter .percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #ff6b00;
}

.counter .circle {
  stroke-dasharray: 314.16, 314.16;
  stroke-width: 2;
  fill: transparent;
  r: 50;
  cx: 50;
  cy: 50;
  stroke: #d3d3d3;
}

.counter .progress {
  stroke: #ff6b00;
  stroke-dashoffset: 214.16;
  -webkit-animation: counter-fill 1.5s forwards;
  animation: counter-fill 1.5s forwards;
  transition: stroke-dashoffset 0.35s;
}

@-webkit-keyframes counter-fill {
  0% {
    stroke-dashoffset: 314.16;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes counter-fill {
  0% {
    stroke-dashoffset: 314.16;
  }
  100% {
    stroke-dashoffset: 0;
  }
}





/*------------------------------- Contentblock-TimeLine ---------------------------------*/

.timeline-container {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
   font-family: var(--primary-font);
}

.timeline-container:before {
   content: '';
   position: absolute;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}
.timeline-block:first-child{
   margin-top: 0px;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

.text-block:before{
   background-color: transparent!important;
}

.text-block {
    background-color: transparent!important;
}
.text-block:after{
  border: none!important;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
   text-align: unset;
}

.timeline-content h4 {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}




/* --------------------------- Share / Social Links ------------------------- */

.shareLink{ 
  text-align:center; 
  width:100%; 
  clear: both; 
  overflow:hidden; 
  margin-top:80px; 
}
ul.shareLink { 
  margin:0; 
  padding:0; 
  width:100%; 
  text-align:center;
}
ul.shareLink li{ 
  display: inline-block; 
  margin:0 10px; 
  padding:0; 
  text-align:center; 
  list-style:none;
}
ul.shareLink li a{ 
  color: #6c8a86;
}







/* ----------------------------------  Contact Form 7   -------------------------------------- */



.wpcf7 {
  font-family: var(--form-font);
}
.wpcf7 .intl-tel-input.allow-dropdown .flag-container, .wpcf7 .intl-tel-input.separate-dial-code .flag-container {
    display:none;
}
.wpcf7 .intl-tel-input.allow-dropdown input, 
.wpcf7 .intl-tel-input.allow-dropdown input[type=tel], 
.wpcf7 .intl-tel-input.allow-dropdown input[type=text], 
.wpcf7 .intl-tel-input.separate-dial-code input, 
.wpcf7 .intl-tel-input.separate-dial-code input[type=tel], 
.wpcf7 .intl-tel-input.separate-dial-code input[type=text] {
    padding-left: unset;
}


.wpcf7-form-control-wrap {
    position: unset;
}
.cf7_SplitColumns{
  display: flex;
  width:100%;
}
.cf7_SplitColumns .cf7_SingleRow{
  width:49%;
}

.cf7_SplitColumns  .cf7_SingleRow:nth-child(odd) {
  margin-right:2%;
}
.cf7_SingleRow {
  width: 100%; 
  margin: 0 0 15px;
  position: relative;  
  font-family: var(--form-font)
}

.cf7_SingleRow label {
  position: relative;
  display: block;
  font-size: 16px;   
  color:var(--form-field-label-color);
  margin: 0 0 ;
  padding: 0;
  font-weight: 500;
  line-height: 26px;
  float: left;
  width: 100%;
}

.wpcf7-list-item-label{
  color: var(--form-list-items-color);
  font-weight: 400;
  font-size: 16px;
}

.cf7_SingleRow .solid_btn .sendbtn  { 
}

.cf7_SingleRow input:not([type=submit]),
.cf7_SingleRow textarea {
  padding: 10px; 
  width: 100%; 
  font-size: 16px; 
  line-height: 24px; 
  color: var(--form-input-text-color); 
  font-weight: 300;
  border: none;  
  background-color: var(--form-input-background-color);  
  border-bottom: none;
  transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease; 
  outline: none
}
.cf7_SingleRow input[type="radio"],
.cf7_SingleRow input[type="checkbox"]
{
  width: unset;
}
.cf7_SingleRow .wpcf7-radio, 
.cf7_SingleRow .wpcf7-checkbox{
  display: block;
  border-bottom: 1px solid;
  border-color: var(--form-field-border-color ); 
  padding-bottom: 20px;
}
.cf7_SingleRow input[type="text"]:focus, 
.cf7_SingleRow textarea:focus, 
.cf7_SingleRow input[type="email"]:focus,{
  border-color: var(--primary-background);
}  
.cf7_SingleRow input[type="text"]:focus-visible,
.cf7_SingleRow input[type="email"]:focus-visible, 
.cf7_SingleRow input[type="textarea"]:focus-visible {
  border-color: var(--primary-background);
}
.cf7_SingleRow select{ 
  width:100%; 
  border:none;
  border-bottom:none;   
  height:42px; 
  padding:0 15px;  
  display:block; 
  font-size:15px;   /*---- the std font-size of 16px caused bolding??? --*/
  color:var(--form-input-text-color);
  margin:0 0 0;   
  font-weight:400; 
  font-family: var(--form-font);
  background-color: var(--form-input-background-color);
  cursor:pointer;
}

select.wpcf7-form-control.wpcf7-select {
    cursor: pointer;
}

.wpcf7-select {
    background:url(../img/arrow-dropdown.png);
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none; 
    padding-right: 20px;
}

.cf7_SingleRow .intl-tel-input{
  width: 100%;
}

.wpcf7 .tooltip-icon {
    display: inline-block;
    margin-left: 5px;
    color: #a3a3a3;
    cursor: help;
}

.wpcf7 .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 2px 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    margin-left: -60px;
    opacity: 0;
    transition: visibility 0s linear 0.1s, opacity 0.1s linear;
}

.wpcf7 .tooltip-icon:hover + .tooltip-text ,.wpcf7 .tooltip-text:hover {
    visibility: visible;
    opacity: 1;
}

.wpcf7 label sup, .wpcf7 #no-option-message sup {
    color: red;
    font-size: 1em;
}

.wpcf7 #no-option-message {
    color: #fff; 
    font-size: 13px;
    font-style: italic;
}

/* Common two-column layout for checkboxes and radio buttons */
.wpcf7-form-control.wpcf7-checkbox.tWoCol_list,
.wpcf7-form-control.wpcf7-radio.tWoCol_list {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    border: 1px solid transparent;
}

/* Break inside rules for checkboxes and radio buttons */
.wpcf7-form-control.wpcf7-checkbox.tWoCol_list .wpcf7-list-item,
.wpcf7-form-control.wpcf7-radio.tWoCol_list .wpcf7-list-item {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: center;
}

/* Margin for radio buttons */
.wpcf7-form-control.wpcf7-radio.tWoCol_list .wpcf7-list-item input[type="radio"] {
    margin-right: 10px;
}

/* Margin for checkboxes */
.wpcf7-form-control.wpcf7-checkbox.tWoCol_list .wpcf7-list-item input[type="checkbox"] {
    margin-right: 10px;
}



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

.regoForm .solid_btn .sendbtn  { 
}
.regoForm label {
}
.regoForm label span{
}
.regoForm ::placeholder {  
}
.regoForm input, 
.regoForm textarea {
}

.regoForm input[type="text"]:focus{
 }  

.regoForm input[type="text"]:focus-visible,
.regoForm input[type="email"]:focus-visible, 
.regoForm input[type="textarea"]:focus-visible {
    border-color: #B05810;
}
.regoForm select{ 
}
.wpcf7-form-control-signature-body{
}

/*-------------------- Maps --------------------------------- */
.gm-style .gm-style-iw-c {
    background-color: white;
    border-radius: unset;
    box-shadow: unset;
}
.wpgmza_map .wpgmza-inner-stack > .grouping {
    box-shadow: unset !important;
}
.wpgmza_map .wpgmza-inner-stack .grouping ~ .grouping-handle{
  background-color: var(--primary-background)!important;
}
.wpgmza-infowindow .wpgmza_infowindow_title {
    text-transform: uppercase;
    color: #000;
    font-family: var(--primary-font);
}
.wpgmza-infowindow .wpgmza_infowindow_address{
    font-family: var(--primary-font);
    color: var(--primary-textcolor);
}
.wpgmza-infowindow .wpgmza_infowindow_description{
    font-family: var(--primary-font);
    color: var(--primary-textcolor);    
}
a.wpgmza_gd{
  font-weight: bold;
}
.wpgmza_map .wpgmza-inner-stack .wpgmza-directions-box .wpgmza-directions-box-inner{
  background-color: var(--primary-background)!important;  
}
.wpgmza_map .wpgmza-inner-stack input.wpgmza-get-directions{
  background-color: var(--btn-primary-background)!important;
}


/*-------------------- Plant Equipment  --------------------------------- */
.plt_eq_ctn {
  margin: 100px 0;
}
.plt_eq {
  background-color: #f3f3f3;
  padding:20px;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.plt_eq p {
  font-size: var(--primary-font);
  color:var(--primary-textcolor);
  font-size: 17px;
  font-weight: 700;
}



/* -------------------  Animation Text Effects --------------------------- */
.pixelated-fade-in {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  font-size: 25px;
  color: #009edb;
  font-weight: 100;
  background-color: transparent;
  position: relative;
    transition: all 0.3s ease-out;
}

.pixelated-fade-in::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#009edb;
  border-radius: 50%;
  border: 1px solid #009edb;
  box-sizing: border-box;
  opacity: 0;
}

.pixelated-fade-in.show::before {
  animation: border-draw 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.pixelated-fade-in.show {
  animation: grow 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes border-draw {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes grow {
  from {
    font-size: 25px;
  }
  to {
    font-size: 75px;
  }
}


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


.circle_percent {
  font-size: 200px;
  width: 1em;
  height: 1em;
  position: relative;
  background: #eee;
  border-radius: 50%;
  overflow: hidden;
}

.circle_inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  clip: rect(0 1em 1em .5em);
}

.round_per {
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  background: var(--emp-textcolor);
  clip: rect(0 1em 1em .5em);
  transform: rotate(180deg);
  transition: 1.05s;
}

.percent_more .circle_inner {
  clip: rect(0 .5em 1em 0em);
}

.percent_more:after {
  position: absolute;
  left: .5em;
  top: 0em;
  right: 0;
  bottom: 0;
  background: var(--emp-textcolor);
  content: '';
}

.circle_inbox {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #fff;
  z-index: 3;
  border-radius: 50%;
}

.percent_text {
  position: absolute;
  font-size: 36px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}



/* ----------------- MOVE TO RESPONSIVE ---------------- */

@media screen and (max-width: 768px) {
  .companyS_col{
    width: 100%;
  }
  .cs_text {
    font-size:16px;
  }
  .cs_sub-text ol li{
    font-size:14px;
  }
  .cs_headerdiv2{
    margin-top:4vw;
  }
  .insidecol_1,
  .insidecol_2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .inside10 {
    width: 10%;
    margin-right: 1px;
    margin-bottom: 0;
    text-align: right;
  }

  .inside90 {
    width: 89%;
    display: flex;
    flex-direction: column;
  }
}



/*------------------------  FLIPBOOK  --------------------------- */
.bluelily_hardYards{
    margin:0 auto;
}
.mainBox.bluelily_hardYards{
  min-height: 525px;
}
.bluelily_flipbook {
  padding: 0 !important;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.bluelily_flipbook::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s ease; 
  z-index: 1;
}

.bluelily_flipbook:hover::before {
  background-color: var(--primary-maskcolor);
}

.bluelily_flipbook img{
    width: 100%;
    min-height: 500px;
    object-fit: cover;
}
.bluelily_flipbook_H2{
    color: white;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: -75px;
    position: relative;
  /*  z-index: 1; */
    padding-left:30px;
}




/*------------------------  BLOG   --------------------------- */
#blogSection{ margin-top:100px }
.blogRow{ width:100%; clear:both; overflow:hidden; margin:0; padding:0; }
.blogBox{float:left; margin-bottom: 5px; height: auto; padding: 5px;  position:relative; background-color: #fff;}
.blogColumn{padding: 5px; height: 100%; background: #f5f5f5;}
.blogImgBox{overflow:hidden; max-height: 300px}
.blogImgBox img{  object-fit: cover;  width:100%;  height: 250px;}
.blogImgBox img:hover{ transform: scale(1.2);    transition: 0.5s ease;}
.blogCaption{background-color:#f5f5f5; padding:20px;  font-size:12px;}
.blogCaption h3{}
.blogCaption h4{text-transform: uppercase;}
.blogCaption h4 a{}
.blogCaption h4 a:hover{text-decoration: none}
.blogCaption p{font-family: 'Radikal'; color:#6C7A89; font-size: 17px; line-height: 28px;}

.articleLink{margin-top:30px; position:absolute; bottom:0;}
a.blogReadMore{color: #000; text-decoration: none;}
a.blogReadMore:hover{text-decoration: none;}




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


.divTestimonial::before {
    content: "";
    display: block;
    background-image: url(../images/quotes.png);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-position-y: center;
    height: 60px;
    width: 60px;
}

.divTestimonial:after {
  /*
  color: var(--backgroun);
  content: '\f10e';
  font-family: 'FontAwesome';
  font-size: 20px;
  margin-left:4px;
  */
}
.divTestimonial{
    font-size: var(--h3-fontsize);
    color: #ffffff;
    margin: 20px 0;
    padding: 0;
    line-height: 35px;
    min-height: 300px;
}

.divQuestion{
  position: relative; 
  margin: 0 -15px; 
  padding: 15px; 
  background-color: #009EDB; 
  color :white; 
  background-size: auto 50%; 
  background-position: top 20% right 2%; 
  background-image:url(../images/question.png);
  background-repeat: no-repeat;
}

.diagonal-cover {
  position: relative;
  overflow: hidden;
}

.diagonal-cover:before {
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #009EDB; /* Adjust the background color as desired */
  opacity: 0.5;
  clip-path: polygon(0 0, 100% 0, 0 100%); /* Create a diagonal shape using clip-path */
  z-index: 1;
}

.diagonal-cover-circle {
  position: relative;
  overflow: hidden;
}

.diagonal-cover-circle:before {
content: "";
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150%;
    max-width: 200%;
    height: 200%;
    background-color: #009EDB;
    opacity: 0.6;
    -webkit-clip-path: circle(23.9% at 2% 11%);
    clip-path: circle(33.9% at 2% 11%);
    z-index: 1;
}
.gradient-cover {
    position: relative;
    overflow: hidden;
    margin:0 -15px;
    padding:15px;
}
.gradient-cover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 5%, #009EDB 95%);
    opacity: 0.5;
    filter: blur(5px);
}

.wave-cover {
    position: relative;
    overflow: hidden;
    margin:0 -15px;
    padding:15px;
}
.wave-cover:before{
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    background-color: #009EDB; 
    opacity: .4;
    height: 100%;
    max-height: 50%;
    width: 100%;
    background-size: 100% 75%; 
    background-image:url(../images/wave.png);
    background-repeat: no-repeat;
    z-index: -1;
}



.red-emphasis{
    color: #009EDB;
}


/*------------------------------------ Block Customisation ------------------------*/
#homeFirstBlock .tabcol2:first-child {
  padding:0;
  margin-top:100px;
}
/*-------------------------------*/

#mediaContact{
  min-height: 500px;
}
#mediaContact h2{
  font-family: var(--h2-ff);
  font-size:50px;
  line-height: 55px;
}
#mediaContact .tabFull{
  max-width:60%;
}
/*-------------------------------*/


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

/*------------------------  BLOG   --------------------------- */


.articleLink{margin-top:30px; position:absolute; bottom:0;}
a.blogReadMore{color: #000; text-decoration: none;}
a.blogReadMore:hover{text-decoration: none;}


.blogContentSection, .casestudyContentSection{
  max-width: 1240px;
  margin:60px auto;
}
#blogBlock h2{
  text-align: left;
  margin-bottom:40px;
  font-family: var(--h2-ff);
}
#blogBlock h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 5px;
    background-image: url(../images/embellishment.png);
    margin: 20px 0;
}
#blogBlock p{
    display:none;
}
#blogBlock .blogCaption .publishDate{
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 14px;
}
#blogBlock .blogColumn, #casestudyBlock .blogColumn {
    background: #ffffff;
    padding:0;
}
#blogBlock .blogCaption, #casestudyBlock .blogCaption {
    background: transparent;
}
#blogBlock .blogCaption h4, #casestudyBlock .blogCaption h4 {
    font-family: var(--root-font-family);
    font-size: 28px;
    font-weight: 400;
    color:#3b3b3b;
}
#blogBlock .blogCaption p, #casestudyBlock .blogCaption p { 
    font-family: var(--root-font-family);
    color:#898988;
    font-size: 1rem;
    font-weight: normal;
}
#blogBlock .blogCaption a, #casestudyBlock .blogCaption a {
    color: #009EDB;
    font-family: var(--root-font-family);
    text-transform: uppercase;
    font-size:14px;
    font-weight: 600;
}
#blogBlock .blogCaption a:hover, #casestudyBlock .blogCaption a:hover {
    color: #009EDB;
}

#blogBlock .solid_btn{
    background-color:transparent;
    outline:none;
    padding:0;
}
#blogBlock .solid_btn a{
    color:var(--primary-link-color) !important  ;
    font-weight: 400;
}

/*-------------------------------*/
*/
#logoBlock h2{
  color:var(--emp-textcolor);
  font-family: var(--root-font-family);
  font-size: 20px;
  line-height:30px;
  font-weight: bold;
  text-align: center;
}
#logoBlock .gallery{
  text-align: center;
}
#logoBlock .gallery-item{
  max-width: 15%;
  text-align: center;
  margin:20px;
}
/*-------------------------------*/
#call2actionBlock h4{
  font-family: var(--h4-ff);
  color: var(--h4-color) !important;
  font-size: 50px;
  line-height: 55px;
  font-weight: 500;
}
/*----------------------------------------------------------------------------------------------------------------- */

#testimonialBlock{
  min-height: 400px;
}
/*----------------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------------------------------------------------------------------- */

#faqBlock{
  min-height: 400px;
}
#faqBlock h2, #faqBlock h4 {
  text-align: left;
  margin-bottom:40px;
  font-family: var(--h2-ff);
  font-weight: 400;
  text-transform: unset;
}
#faqBlock h2::after, #faqBlock h4::after {
    content: "";
    display: block;
    width: 70px;
    height: 5px;
    background-image: url(../images/embellishment.png);
    margin: 20px 0;
}
#faqBlock .faqaccordion{
    margin-top:0;
}
/*----------------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------------------------------------------------------------------- */

.productSec{
  padding: 200px 0 0 0;
  font-family: var(--primary-font); 
  font-size: var(--btn-fontsize);
  color: var(--primary-textcolor);
}
.productSec ul{
   margin:0 0 10px; 
   padding:0;
}
.productSec ul li::before {
  content: "";
  background-color: var(--btn-primary-background);
  display: inline-block;
  margin-left: -30px;
  margin-right: 10px;
  height: 10px;
  width: 10px;
}
.productSec ul li {
  list-style: none;
  padding: 0 0 0 15px;
  margin-left: 15px;
  font-size: var(--primary-fontsize);
  color: var(--primary-textcolor);
  line-height: 30px;
}
.productSec .solid_btn{
    margin-top:50px;
}

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



#groupProjectsBlock{
}
#groupProjectsBlock h2 {
    text-transform: capitalize;
    margin: 40px 0;
}
#groupProjectsBlock h4 {
    margin-top:30px;
}
#groupProjectsBlock .blogColumn {
    padding:0;
}
#groupProjectsBlock .blogColumn .publishDate{
    display:none;
}

#groupProjectsBlock .blogColumn .projectLink{
    text-transform: uppercase;
}
.projectLink::after {
    content: " >";
    font-size: 2em;
    position: relative;
    bottom: -0.19em;
}


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

#projectSection{
  padding-bottom:75px;
}
#projectSection .container{
  max-width: var(--small-container) !important;
}
#projectSection h2 {
    text-transform: capitalize;
    margin: 40px 0
}
#projectSection h4 {
    text-transform: uppercase;
    margin: 40px 0 0 0;
}

#projectSection .solid_btn{
    display:block;
    max-width: 300px;
}

/*----------------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------------------------------------------------------------------- */
#footerlogoBlock{
  margin-top:-50px;
}
#footerlogoBlock hr{
  height:1px;
  border:none;
}
#footer3colsBlock h4{
  font-family: var(--h4-ff);
  color: var(--h4-color) !important;
  font-size: var(--h4-fontsize);
  line-height: 55px;
  font-weight: 500;
  font-size:16px;
}
#footer3colsBlock div[class*="tabcol"] h4:after{
  content:unset;
}


#footer3colsBlock .tabFull .tabcol3:first-child, #footer3colsBlock .tabFull .tabcol3:last-child{
  max-width: 25%;
}
#footer3colsBlock .tabFull .tabcol3{
  width: 50%;
}


ul#menu-products{ 
  column-count: 2;
}




#menu-footer  li{
  padding-left:0;
  margin-left:0;
}




#aboutParallaxBlock .header_lg-white, #aboutParallaxBlock .header_sm-white{
  color:#fff;
}

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


.leftColBlock .tabrow, .rightColBlock .tabrow, 
{
    padding:0;
    min-height: 800px;
}
.leftColBlock .tabcol2 img, .rightColBlock .tabcol1 img{
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}
.leftColBlock .tabcol1, .rightColBlock .tabcol2{
    display: grid;
    align-content: center;
}
.leftColBlock .solid_btn, .rightColBlock .solid_btn,
.leftColBlock .solid_btn_centered, .rightColBlock .solid_btn_centered{
  width: max-content;
}

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


[id^="carousel-selector-"] img {
    cursor: pointer;
}


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

ul#challengesList li {
    list-style: none;
    background-image: url(../img/bullet-question-mark.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0 0;
    padding-left: 30px;
    line-height: 1.5;
    margin-bottom: 20px;
}

ul#solutionsList li {
    list-style: none;
    background-image: url(../img/bullet-tick.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0 0;
    padding-left: 30px;
    line-height: 1.5;
    margin-bottom: 20px;
}

ul#challengesList li::before, ul#solutionsList li::before {
    content: none;
}


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

.productCategorySection{  }
.productCategorySection .blogColumn{
  padding:0;
  background: transparent;
}
.productCategorySection .blogColumn{
  padding:0;
  background: transparent;
}
.productCategorySection .blogCaption{
  background: transparent;
}
.productCategorySection .blogColumn h4{
  text-align: center;
  background: transparent;
}



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


.timeline-container {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
   font-family: var(--primary-font);
}

.timeline-container:before {
   content: '';
   position: absolute;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}
.timeline-block:first-child{
   margin-top: 0px;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

.text-block:before{
   background-color: transparent!important;
}

.text-block {
    background-color: transparent!important;
}
.text-block:after{
  border: none!important;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
   text-align: unset;
}

.timeline-content h4 {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}