/*
 @font-face
*/

@font-face{
 font-family: 'Open Sans';
 src: local( 'OpenSans' ), local( 'OpenSans-Regular' ), url( '../fonts/OpenSans-Regular.woff2' ) format( 'woff2' );
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face{
 font-family: 'Montserrat';
 font-style: normal;
 font-weight: 400;
 src: local( 'Montserrat Regular' ), local( 'Montserrat-Regular' ), url( '../fonts/Montserrat-Regular.woff2' ) format( 'woff2' );
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@-ms-viewport{ width: device-width } body{-ms-overflow-style: scrollbar }
:root{ font-size: 16px }
@media ( max-width: 767px ){
 :root{ font-size: 18px }       
}

*,*:before,*:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
html,body{ font-size:10px }
html{ font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0) }
body{ margin: 0;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:1rem;font-weight: 400;line-height:1.625em;background-color:#FFF }
.bg{background-color:#FFF}

body, a{ color:#575757 }
/*a{ -webkit-transition: ease color 300ms; transition: ease color 300ms }*/
a:hover{ color: #575757 } a:focus, a:active{ color: #575757 }
a, label{ text-decoration: none; outline: 0 }

ol,ul,menu,dir,figure{ margin: 0; padding: 0 }
ol,ul{ list-style-type: none }

/* 
 .habul and .wys ol,ul list
*/
ol.habul, ul.habul, .wys ol, .wys ul{ margin: 0 0 14px 14px; padding-left: 7px } ol.habul, .wys ol{ list-style-type: inital } ul.habul, .wys ul{ list-style-type: disc }

.bafta:before,.bafta:after{ display: table; content: '' } .bafta:after{ clear: both }

p, h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ margin: 0 }
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ font-weight: 400; line-height: 1em }
p{ margin-bottom: 0.875em }
h1,p.h1,h2,p.h2,h3,p.h3,h4,p.h4,h5,p.h5,h6,p.h6{ margin-bottom: 0.28em }/* only for h & p.h* tags */

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ font-family: Montserrat,'Open Sans',Helvetica,Arial,sans-serif; font-weight: 700; color: #025295 }

h1, .h1{ font-size: 2rem } 
h2, .h2{ font-size: 1.875rem  }
h3, .h3{ font-size: 1.75rem }
h4, .h4{ font-size: 1.625rem } 
h5, .h5{ font-size: 1.375rem }   
h6, .h6{ font-size: 1.25rem }  
p.intro{ font-size: 1.25rem }

p+h1, p+.h1{ padding-top: 20px }
p+h2, p+.h2{ padding-top: 16px }
p+h3, p+.h3,
p+h4, p+.h4,
p+h5, p+.h5,
p+h6, p+.h6{ padding-top: 10px }    
small, .small{ font-size: 0.875rem; line-height: 1.571em }

.search-bar label{ font-size: 0.875rem }
.tbscroll-- .tbscrollbox .padding .caption .content b{ font-size: 1rem }
.snippet-- .snippet .wys+.btn{ font-size: 1rem  }

 
.sidebar .sidebar-title{ font-size: 1.625rem }
.qualifications-- .qualifications .qualification p, .specifications-- .qualifications .qualification p{ font-size: 1.625rem; line-height: 1.4em } 
.footer .telephone{ font-size: 1.625rem }

@media ( min-width: 992px ){
     
 h1, .h1{ font-size: 3rem } 
 h2, .h2{ font-size: 2.25rem }
 h3, .h3{ font-size: 1.875rem }

 .tbscroll-- .tbscrollbox .padding .caption .content b{ font-size: 1.625rem }
     
}

@media ( min-width: 992px ){
 .header .widgets .telephone{ font-size: 1.4375rem }
}

.text-centre{ text-align: center }


/*
 Wys css to go after all font declaration
*/

.wys:before,.wys:after{ display: table; content: '' }.wys:after{ clear: both }
.wys>*:first-child{ margin-top: 0; }.wys>*:last-child{ margin-bottom: 0 }
.wys a, .wys a:focus, .wys a:active{ color: #444; text-decoration: underline } .wys a:hover{ color: #2699FB; text-decoration: underline } 
.wys a:focus, .wys a:active{ color: #79949F }



/*
aspect ratio | padding-bottom value
-------------|---------------------
 16:9        |  56.25%
 4:3         |  75%
 3:2         |  66.66%
 8:5         |  62.5%
*/

.img-bg{ display: block; width: 100%; padding-bottom: 75%; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover }
.img-responsive, .img-fill{ display: block; max-width: 100%; height: auto }
.img-fill{ width: 100% }

/*
 Grid
*/

.jrespond{width:10px;height:0}
@media( pointer: coarse ){.jrespond{height:1px}}       
@media (min-width: 360px){.jrespond{width:20px}}
@media (min-width: 576px){.jrespond{width:30px}}
@media (min-width: 768px){.jrespond{width:40px}}
@media (min-width: 992px){.jrespond{width:50px}}
@media (min-width:1200px){.jrespond{width:60px}}
@media (min-width:1450px){.jrespond{width:70px}}


/*
min-width: 0px          max-width: 359px
min-width: 360px        max-width: 575px
min-width: 576px        max-width: 767px
min-width: 768px        max-width: 991px
min-width: 992px        max-width: 1199px 
min-width: 1200px       max-width: 1449px
min-width: 1450px       (max infinity)

*/


.container, .container-width{ min-width: 220px; margin-left: auto; margin-right: auto } .container{ padding-right: 20px; padding-left: 20px } .container.collapse{ padding-right: 0; padding-left: 0 }
@media ( min-width: 1200px ){
 .container, .container-width{ max-width: 1290px } .container.fit{ max-width: 100% }
}

.row{ margin-right: -20px; margin-left: -20px }
.row, .row-collapsed{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap }
.row .col, .row-collapsed .col{ -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% }
.row .col-auto, .row-collapsed .col-auto{ -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto }
.row>div, .row-collapsed>div{ width: 100%; min-height: 1px }
.row>div{ padding-right: 20px; padding-left: 20px }

.col-1{   -webkit-box-flex: 0; -webkit-flex: 0 0 8.333333%; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% }
.col-2{   -webkit-box-flex: 0; -webkit-flex: 0 0 16.666667%; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% }
.col-20p{ -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% }
.col-3{   -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% }
.col-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
.col-5{   -webkit-box-flex: 0; -webkit-flex: 0 0 41.666667%; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% }
.col-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
.col-7{   -webkit-box-flex: 0; -webkit-flex: 0 0 58.333333%; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% }
.col-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
.col-9{   -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% }
.col-10{  -webkit-box-flex: 0; -webkit-flex: 0 0 83.333333%; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% }
.col-11{  -webkit-box-flex: 0; -webkit-flex: 0 0 91.666667%; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% }
.col-12{  -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% }




@media ( min-width: 360px ){  /* .col-mp- e.g Mobile portrait... Galaxy, Nexus, Pixel, iPhone 6+, Lumia */

 .col-mp-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-mp-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-mp-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}
@media ( min-width: 576px ){  /* .col-ml- e.g Mobile landscape... Galaxy, Nexus, Pixel 2, iPhone 6+, Lumia */

 .col-ml-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-ml-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-ml-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}
@media ( min-width: 768px ){  /* .col-tp- e.g Tablet portrait */

 .col-tp-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-tp-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-tp-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}
@media ( min-width: 992px ){  /* .col-tl- e.g Tablet landscape */

 .col-tl-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-tl-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-tl-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}
@media ( min-width: 1200px ){ /* .col-lg- */

 .col-lg-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-lg-5{   -webkit-box-flex: 0; -webkit-flex: 0 0 41.666667%; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% }
 .col-lg-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-lg-7{   -webkit-box-flex: 0; -webkit-flex: 0 0 58.333333%; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% }
 .col-lg-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}
@media ( min-width: 1450px ){ /* .col-xl- */

 .col-xl-4{   -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% }
 .col-xl-6{   -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
 .col-xl-8{   -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% }
}



.header{ }
.header a.proqualab{ display: block; float: left }
.header .proqualab{ display: block; width: 239px; margin: 40px 5px 25px 35px; overflow: hidden }
.header .proqualab>svg{ width: auto; height: 60px }
.header .proqualab>svg>path.svg-path-pro{ fill: #025295 } .header .proqualab>svg>path.svg-path-qual{ fill: #025295 }

.header .widgets{ float: right; font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif }
.header .widgets, .header .widgets a{ color: #025295 } 
.header .widgets a.callback{ display: inline-block }

button.hamburger{ display: none }
.top-menu{ position: relative; z-index: 99 }

ul.primary-menu>li>a{ font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 700 }

@media ( max-width: 1199px ){

 html.menu-open body .blur{ height: 100vh; overflow: hidden }

 .header .proqualab{ width: 92px; height: 49px; margin: 17px 0 0 15px }  
 .header .proqualab>svg{ width: 92px; height: 47px } 
 .header .widgets .icon-it{ display: block; float: left; width: 50px; height: 70px; overflow: hidden; font-size: 0; margin-right: 10px; background-repeat: no-repeat; background-position: center }
 .header .widgets .callback.icon-it{ float: right }

 .header .widgets a.email{ background-image: url( '../images/mail-ico.svg' ) }
 .header .widgets a.telephone { background-image: url( '../images/tel.svg' ) }
 .header .widgets a.callback{ width: 70px; margin-right: 0; background-color: #9cd335; background-image: url( '../images/callback-ico.svg' ) }

 button.hamburger{
  display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; float: right; width: 70px; height: 70px; margin: 0; padding: 0px; border-width: 0; cursor: pointer       
 }               
 button.hamburger{
  /*width:0px;*/ overflow: visible
 }
 button.hamburger::-moz-focus-inner{
  border: 0; padding: 0
 }
 .hamburger.open{ background-color: #F1F9FF }
 .hamburger.close{ background-color: transparent; opacity: 0; transition: ease-in opacity 100ms 100ms }
 html.menu-open .hamburger.close{ opacity: 1; transition: ease-in opacity 400ms 400ms }
 .hamburger .bun{
  width: 36px; height: 22px; display: inline-block; position: relative
 }       
 .hamburger .burger{
  display: block; top: 50%; margin-top: -2px
 }
 .hamburger .burger, .hamburger .burger::before, .hamburger .burger::after{
  width: 36px; height: 4px; position: absolute       
 }        
 .hamburger.open .burger, .hamburger.open .burger::before, .hamburger.open .burger::after{
  background-color: #2699FB
 }
 .hamburger.close .burger::before, .hamburger.close  .burger::after{
  background-color: #FFF
 }
 .hamburger .burger::before, .hamburger .burger::after{
  display: block; content: ''
 }
 .hamburger.open .burger::before{ top: -10px }
 .hamburger.open .burger::after{ bottom: -10px }
 .hamburger.close .burger::before{ transform: rotate(45deg) }
 .hamburger.close .burger::after{ transform: rotate(-45deg) }
 
 /* Top menu : START */
 .top-menu{ 
  position: absolute; top: 0; left: -100%; padding-top: 5px; background-color: #025295; min-height: 100%; width: 100%; transition: ease-in left 400ms
 }
 html.menu-open .top-menu{
  left: 0; transition: ease left 400ms
 }
 .top-menu ul.primary-menu{
  padding-top: 70px;       
 }   
 ul.primary-menu>li>a{ font-size: 1.125rem; font-weight: 700 }
 .top-menu ul.primary-menu li>div.sub-menu{
  max-height: 0; overflow: hidden; -webkit-transition: ease-out max-height 500ms; transition: ease-out max-height 500ms
 }
 .top-menu ul.primary-menu li.open-sub-menu>div.sub-menu{
  max-height: 1000px; -webkit-transition: ease-in max-height 800ms; transition: ease-in max-height 800ms
 }   
 ul.primary-menu a{
  display: block; padding: 10px 20px; color: #FFF
 }
 ul.primary-menu li.menu-item-has-children ul{
  margin-left: 30px   
 }
 ul.primary-menu li a{ position: relative; padding-left: 50px }
 ul.primary-menu li.navigation-node>a, ul.primary-menu li.menu-item-has-children:not( .navigation-node )>a>span{}
 ul.primary-menu li.menu-item-has-children>a>span{     
  display: block; position: absolute; top: 2px; left: 0; bottom: 2px; width: 50px;
 }
 ul.primary-menu li.menu-item-has-children>a>span:before, ul.primary-menu li.menu-item-has-children>a>span:after{
  display: block; content: ''; position: absolute; top: 50%; left: 50%; background-color: #FFF      
 }
 ul.primary-menu li.menu-item-has-children>a>span:before{
  width: 16px; height: 2px; margin-top: -1px; margin-left: -8px
 }
 ul.primary-menu li.menu-item-has-children>a>span:after{
  width: 2px; height: 16px; margin-top: -8px; margin-left: -1px; transition: ease-in height 100ms 300ms, ease-in margin-top 100ms 300ms;
 }
 ul.primary-menu li.menu-item-has-children.open-sub-menu>a>span:after{
  height: 2px; margin-top: -1px; transition: ease-in height 100ms, ease-in margin-top 100ms;
 }      
 
 /* !IMPORTANT */
 ul.primary-menu li.large-device-only{     
  display: none;
 }
 /* Top menu : END */
 

}



@media ( min-width: 1200px ){
      
 .header .widgets{ padding: 0 30px 0 0 }
 .header .widgets {}
 .header .widgets .email{ height: 28px; line-height: 28px; padding-right: 48px; background-image: url( '../images/mail-ico.svg' ); background-repeat: no-repeat; background-size: auto; background-position: center right }
 .header .widgets a.callback{ margin-left: 24px }
 .header .widgets a.callback{ padding: 16px 40px; background-color: #9cd335; color: #FFF; border-radius: 0 0 5px 5px; position: relative; top: -1px }
 .header .widgets .telephone{ display: block; margin-top: 20px; text-align: right }

 /* Top menu : START */
 .top-menu{ padding: 0 30px; background-color: #44c8f5 }
 ul.primary-menu{ font-size: 0; display: table }
 .top-menu.centre ul.primary-menu{ margin-left: auto; margin-right: auto } /* Align the menu center of page */
 .top-menu.right ul.primary-menu{ float: right } /* Align the menu right of page */
 ul.primary-menu, ul.primary-menu a{ background-color: transparent; color: #FFF; -webkit-transition: ease background-color 150ms; transition: ease background-color 150ms }  
 ul.primary-menu li{ font-size: 1rem; position: relative }
 ul.primary-menu a{ display: block }
 ul.primary-menu li.navigation-node>a{ cursor: default; pointer-events: none }
 ul.primary-menu>li{ display: inline-block; position: relative; font-size: 1.125rem }
 ul.primary-menu>li>a{ padding: 24px 12px }
 ul.primary-menu ul a{ white-space: nowrap; padding: 8px 22px; color: #41bee9 }
 ul.primary-menu ul li:first-child a{ padding-top: 14px }
 ul.primary-menu ul li:last-child a{ padding-bottom: 14px }
 ul.primary-menu>li>div>ul>li:last-child a{ padding-bottom: 24px }
 ul.primary-menu>li:HOVER>a, ul.primary-menu>li.active>a{ background-color: #e2f3f6; color: #025295 }
 ul.primary-menu ul li:HOVER>a{}
 ul.primary-menu ul li:HOVER>a, ul.primary-menu ul li.active>a{ color: #025295 }
 ul.primary-menu li div.sub-menu{ display: none; background-color: #e2f3f6 }
 ul.primary-menu li:HOVER>div.sub-menu{ display: block }
 ul.primary-menu div.sub-menu{ position: absolute }
 ul.primary-menu>li>div.sub-menu{ top: 100%; left: 0 }
 ul.primary-menu>li>div.sub-menu div.sub-menu{ top: -5px; left: 100% }


 
 
 /* !IMPORTANT */
 ul.primary-menu li.small-device-only{
  display: none;
 }
 /* Top menu : END */
 
}

@media ( min-width: 1350px ){
	
 ul.primary-menu>li>a{ padding: 24px 22px }
 
 ul.primary-menu>li.menu-item-has-children>a{ padding-right: 35px }
 
 ul.primary-menu li.menu-item-has-children a>span{
  display: block; position: absolute; top: 50%; margin-top: -4px; right: 15px; width: 7px; height: 7px; border: solid #41bee9 0; border-right-width: 2px; border-bottom-width: 2px; 
  -webkit-transform: rotate( -45deg ); transform: rotate( -45deg ); -webkit-transform: ease border-color 300ms; transform: ease border-color 300ms }     
 ul.primary-menu>li.menu-item-has-children>a>span{ margin-top: -5px; right: 15px; border-color: #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg)  }
 ul.primary-menu ul li.menu-item-has-children a>span{ top: 18px; margin-top: 0 }
 
 ul.primary-menu>li:HOVER.menu-item-has-children>a>span,
 ul.primary-menu>li.active.menu-item-has-children>a>span{ border-color: #FFF }
 
 ul.primary-menu>li:HOVER.menu-item-has-children>a>span,
 ul.primary-menu>li.active.menu-item-has-children>a>span,
 ul.primary-menu ul li:HOVER.menu-item-has-children a>span,
 ul.primary-menu ul li.active.menu-item-has-children a>span{ border-color: #025295 }
	
}


.search-bar input[type="text"].search-form-field,
.search-bar select.search-form-field,
.search-bar .search-controls a,
.search-bar .search-controls button{ font-family: Montserrat, 'Open Sans', Helvetica,Arial, sans-serif }
.search-bar form{ padding-left: 20px; padding-right: 20px }
.search-bar{ padding: 30px 0; background-color: #025295 }
.search-bar, .search-bar a{ color: #FFF }
.search-bar input.search-by-keyword{ background-color: #44c8f5; background-image: url( "../images/search-ico.svg" ); background-repeat: no-repeat; background-position: center right; color: #FFF }
.search-bar .search-controls{ padding-top: 20px }
.search-bar .search-controls button{ margin-left: 30px; background-color: #9cd335; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400 }
.search-bar .search-level, .search-bar .search-sector{ padding-top: 20px }

.search-bar ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 opacity: 1;
 color: #FFF;
}
.search-bar ::-moz-placeholder { /* Firefox 19+ */
 opacity: 1;
 color: #FFF;
}
.search-bar :-ms-input-placeholder { /* IE 10+ */
 opacity: 1;
 color: #FFF;
}
.search-bar :-moz-placeholder { /* Firefox 18- */
 opacity: 1;
 color: #FFF;
}


.search-bar select.search-form-field{
 background-position: calc(100% - 22px ) 50%, calc(100% - 12px ) 50%;
 background-size: 10px 10px, 10px 10px;
 background-image: linear-gradient( 45deg, transparent 50%, #025295 50% ), linear-gradient( 135deg, #025295 50%, transparent 50% );
 background-repeat: no-repeat;
 padding-right: 60px;
} 
.search-bar select.search-form-field:focus{
 background-image: linear-gradient( 45deg, transparent 50%, #025295 50% ), linear-gradient( 135deg, #025295 50%, transparent 50% )
}
.search-bar select.search-form-field:-moz-focusring{
 color: transparent; text-shadow: 0 0 0 #000;
}



@media ( min-width: 767px ){ 

 .search-bar .search-keyword, .search-bar .search-level{ float: left }
 .search-bar input[type="text"].search-form-field,
 .search-bar select.search-form-field,
 .search-bar .search-controls button{ font-size: 1.0625rem; padding-top: 18px; padding-bottom: 18px; padding-left: 28px }
 
 .search-bar input[type="text"].search-form-field,
 .search-bar .search-controls button{ padding-right: 28px }
 
 .search-bar .search-keyword{ position: relative; padding-right: 70px; padding-bottom: 0 } 
 .search-bar .search-keyword:after{ display: block; content: ''; position: absolute; top: 50px; right: 20px; width: 30px; height: 6px; background-color: #44c8f5 }
 .search-bar .search-keyword, .search-bar .search-level{ width: 50%; padding-bottom: 20px }
 .search-bar .search-level{ padding-top: 0 }
 
}

@media ( min-width: 1200px ){ 

 .search-bar .search-fields, .search-bar .search-sector{ float: left }
 .search-bar .search-controls{ float: right; text-align: right }
 .search-bar label{ display: inline-block; height: 31px } .search-bar .no-label, .search-bar .search-controls{ padding-top: 32px }
 .search-bar .search-keyword{ max-width: 290px }
 .search-bar .search-keyword label{ padding-left: 20px }
 .search-bar .search-keyword:after{ top: 55px }
 
 .search-bar .search-level{ max-width: 182px; padding-right: 20px }
 .search-bar .search-sector{ min-width: 500px }
 
}

/* Placeholder */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 opacity: 1;
 color: #999;
}
::-moz-placeholder { /* Firefox 19+ */
 opacity: 1;
 color: #999;
}
:-ms-input-placeholder { /* IE 10+ */
 opacity: 1;
 color: #999;
}
:-moz-placeholder { /* Firefox 18- */
 opacity: 1;
 color: #999;
}

/* Field groups/group */

.field-groups{
 max-width: 800px
}
.field-groups+.field-groups, .field-group.margbtm+.field-group, .field-group+.field-group.margtop, .field-group+script+.field-group.margtop{
 margin-top: 40px         
}
.field-group.margbtm{
 margin-bottom: 40px      
}

/* Horizontal label/field style */

.field-group>label, .field-group>.label{
 display: block; padding-bottom: 6px;       
}


@media ( max-width: 767px ){
   
 .field-group>.inp:after{
  display: table; content: ''; clear: both      
 } 
 .field-group .inps>.inp+.inp{
  padding-top: 8px;
 }
   
} 

@media ( min-width: 768px ){
        
 .field-group, .field-group .inps{
  display: table; width: 100%; table-layout: fixed
 }
 .field-group>label, .field-group>.label{
  padding-top: 6px; padding-bottom: 0; 
 }  
 .field-group>label, .field-group>.label, .field-group .inp{
  display: table-cell; vertical-align: top
 }

 .TableForm .field-group>label, .TableForm .field-group>.label, .TableForm .field-group .inp{
  display: block;
 }

 .field-group .inp-group{
  margin-left: -10px; margin-right: -10px;         
 }
 .field-group .inps>.inp{
  padding-left: 10px; padding-right: 10px;   
 }
 .field-group>label, .field-group>.label{   
  width: 180px   
 }

}

/* Vertical label/field style
    
.field-group>label, .field-group>.label, .field-group>.inp{
 display: block; margin-bottom: 
}

*/

/* Field group for check/radio always fixed table, label always tiny */
.field-group.field-group-checkbox{
 display: table; width: 100%; table-layout: fixed
}
.field-group.field-group-checkbox>.label, .field-group.field-group-checkbox>.inp{
 display: table-cell; vertical-align: top   
}
.field-group.field-group-checkbox>.label{
 width: 50px; padding: 0     
}

.field-group+.field-group, p+.field-group, .field-group+script+.field-group{
 margin-top: 14px
}
.field-group+p{
 margin: 30px 0 0 0
}
.field-group>.label label{
 display: none      
}   
.field-group.required:not(.no-astrix)>label:after, .field-group.required:not(.no-astrix)>div.label:after{
 content: ' *'; font-size: 0.875rem
}
.field-group .inp>span.footnote{
 display: block; margin-top: 12px; font-size: 0.8125rem; line-height: 1.571em
}

/* Form elements */

input, select, textarea,  button{
 -webkit-appearance: none; -moz-appearance: none; appearance: none
}
input[type="checkbox"]{
 -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox  
}
input[type="radio"]{
 -webkit-appearance: radio; -moz-appearance: radio; appearance: radio 
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="color"],
textarea,
select,
#datepicker{
 width: 100%; border: solid transparent 1px; line-height: 17px; padding: 16px 18px; background-color: #FFF; color: #575757
}
input.small-width, textarea.small-width, select.small-width{
 max-width: 80px;     
}   
input.medium-width, textarea.medium-width, select.medium-width{
 max-width: 50%;     
}

.TableForm input[type="text"],
.TableForm #datepicker{ border-color: #575757; }

a.btn, span.btn, button.btn{
 line-height: 17px; padding: 16px 18px;
}
select{
 line-height: 17px; padding-left: 14px; padding-right: 28px   
}
select.auto-width{
 width: initial       
}
a.btn,button{
 text-decoration: none; outline: 0; border: 0; cursor: pointer
}
button{
 /*width:0px;*/ overflow: visible
}
a.btn,button{
 text-decoration: none; outline: 0
}
button::-moz-focus-inner {
 border: 0; padding: 0
}
button:DISABLED{
 cursor: default   
}
a.btn, span.btn, button, input, select, textarea{
 display: inline-block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; -webkit-border-radius: 5px; border-radius: 5px
}
.TableForm .btn{
  background-color: #9cd335;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  border: 0;
  font-size: 1.0625rem;
  padding: 13px 28px;
  color: #fff;
  margin-top: 40px;
}

input[type=radio], input[type=checkbox]{
 float: left; padding: 0; -webkit-border-radius: 0; border-radius: 0
}
a[name].btn{
 cursor: default     
}

/* Checkbox/Radio - styled */

input[type="checkbox"].styled, input[type="radio"].styled{
 display: none
}
input[type="checkbox"].styled+label, input[type="radio"].styled+label{
 position: relative; display: block; float: left; border: solid #025295 1px; background-color: transparent; cursor: pointer
}     
input[type="checkbox"].styled+label+span, input[type="radio"].styled+label+span{
 display: block; float: left; margin-left: 8px;
}
span+input[type="checkbox"].styled+label, span+input[type="radio"].styled+label{
 margin-left: 20px;
}
input[type="checkbox"].styled+label+input+label, input[type="radio"].styled+label+input+label{
 margin-left: 8px
} 
/* Vertical */
input[type="checkbox"].styled.vertical+label, input[type="radio"].styled.vertical+label{
 float: none; margin-left: 0
}
input[type="checkbox"].styled.vertical+label+input+label, input[type="radio"].styled.vertical+label+input+label{
 margin-top: 8px
}
/* Rescue code/css for vertical check/radio boxes with labels */
.vertical-labelled input[type="checkbox"].styled+label,.vertical-labelled input[type="checkbox"].styled+label+span, .vertical-labelled input[type="radio"].styled+label,.vertical-labelled input[type="radio"].styled+label+span{
 float: none; display: inline-block; vertical-align: top
}
.vertical-labelled+.vertical-labelled{
 margin-top: 8px      
}



input[type="checkbox"].styled+label, input[type="radio"].styled+label{
 width: 27px; height: 27px    
}
input[type="radio"].styled+label{
 -webkit-border-radius: 14px; border-radius: 14px;     
}   
input[type="checkbox"].styled.onoff+label{
 width: 48px; margin-right: 50px;
}
input[type="checkbox"].styled+label:before, input[type="radio"].styled+label:before{
 display: block; content: ''; border: solid transparent 0; margin-top: 3px; margin-left: 8px; -webkit-transition: 300ms; transition: 300ms; pointer-events: none
}
input[type="checkbox"].styled+label:before{
 width: 9px; height: 14px; border-right-width: 2px; border-bottom-width: 2px; -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
input[type="checkbox"].styled.onoff+label:before{
  width: 17px; height: 17px
}
input[type="radio"].styled+label:before{
 width: 11px; height: 11px; -webkit-border-radius: 6px; border-radius: 6px
}
input[type="radio"].styled+label:before{
 margin: 7px 0 0 7px
}
input[type="checkbox"].styled.onoff+label:before{
 display: block; content: ''; margin: 0; background-color: #025295; opacity: .2; border: none; -webkit-transform: none; transform: none
}
input[type="checkbox"].styled.onoff+label:before{
 position: absolute; top: 4px; left: 4px; right: auto; 
}

input[type="checkbox"].styled:checked+label:before{
 border-color: #025295;
}
input[type="radio"].styled:checked+label:before{
 background-color: #025295;   
}      
input[type="checkbox"].styled.onoff:checked+label:before{
 left: 25px; opacity: 1
}
input[type="checkbox"].styled.onoff.hint+label:after{
 font-size: 0.8125rem; content: 'No'; position: absolute; left: 100%; margin-left: 14px
}
input[type="checkbox"].styled.onoff.hint:checked+label:after{
 content: 'Yes';
}

.field-group .inp>input[type="radio"], .field-group .inp>input[type="checkbox"]{
 margin-top: 12px     
}  
.field-group .inp>input[type="radio"]+label, .field-group .inp>input[type="checkbox"]+label{
 margin-top: 0
}


/* Form elements - select arrow */

select{
 background-position:
  calc(100% - 14px ) 50%,
  calc(100% - 9px ) 50%;
 background-size:
  5px 5px,
  5px 5px;
 background-image:
  linear-gradient( 45deg, transparent 50%, #025295 50% ),
  linear-gradient( 135deg, #025295 50%, transparent 50% );
 background-repeat: no-repeat;
 padding-right: 25px;
}
select:focus{
 background-image:
  linear-gradient( 45deg, transparent 50%, #025295 50% ),
  linear-gradient( 135deg, #025295 50%, transparent 50% )
}
select:-moz-focusring{
 color: transparent; text-shadow: 0 0 0 #000;
}
select.auto-width{
 padding-right: 27px; 
}

/* Form element modifiers */

.inp.text-with-button button.btn{
 display: block; margin: 10px auto 0 auto      
}

@media ( min-width: 768px ){

 .inp.text-with-button{
   position: relative; padding-right: 200px;       
 }  
 .inp.text-with-button button.btn{
  position: absolute; top: 0; right: 0; width: 180px; height: 100%; margin: 0; padding: 0 
 }

}

/* Validation */

.form-message{
 max-height: 0; overflow: hidden; opacity: 0; -webkit-transition: max-height 700ms linear, opacity 700ms; transition: max-height 700ms linear, opacity 700ms;  
}
.form-message.open{
 max-height: 300px; opacity: 1    
}
.form-message>span{
 display: block; position: relative; margin: 1px 0 30px 0; padding: 20px;      
}

.form-message>span>a.cross{
 position: absolute; top: 0; right: 0;      
}

.form-message.success>span{
 border: solid green 1px;      
}

.form-message.failed>span{
 border: solid red 1px;      
}



.field-group.required.flag label, .field-group.required.flag .label{
 color: red;      
}

input[type="text"].flag,
input[type="password"].flag,
input[type="number"].flag,
input[type="email"].flag,
input[type="tel"].flag,
input[type="url"].flag,
input[type="color"].flag,
textarea.flag,
select.flag,
input[type="checkbox"].styled.flag+label,
input[type="radio"].styled.flag+label{
 border-color: red;
}


a.btn, span.btn, button.btn, .wys a.btn, .wys span.btn, .wys button.btn{ background-color: #9cd335; color: #FFF }

.page--.pb{ padding-bottom: 40px } .main .page-panel.page-heading{ margin-top: 35px } .main .page-panel+.page-panel{ margin-top: 40px } .main .page-panel.page-heading+.page-panel{ margin-top: 30px }
.page-panel{ padding-right: 20px; padding-left: 20px }
.mainbar>.page-panel{ padding-right: 0; padding-left: 0 }
.page-panel.panel-bgcolour{ padding-top: 30px ; padding-bottom: 30px }


@media( max-width: 991px ){
 .page-panel .row>div+div{ margin-top: 40px }
}

@media( min-width: 992px ){
 .page--.pb{ padding-bottom: 80px } .main .sidebar, .main .page-panel.page-heading{ margin-top: 70px } .main .page-panel+.page-panel{ margin-top: 80px } .main .page-panel.page-heading+.page-panel{ margin-top: 60px }
 .page-panel.panel-bgcolour{ padding-top: 60px ; padding-bottom: 60px }
}



/* .pagelayout */

.pagelayout .sidebar{ min-height: 49px; padding-bottom: 30px }
@media ( max-width: 991px ){
 .pagelayout .sidebar ul.loading{ display: none }
 
 .pagelayout .sidebar{ margin-top: 20px }
 .pagelayout .sidebar select{ border-color: #025295 }
 
}
@media ( min-width: 992px ){
 
 .pagelayout{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap }
 .pagelayout .sidebar, .pagelayout .mainbar{ width: 100% } 
 .pagelayout .sidebar{ max-width: 350px; padding-right: 80px }
 .pagelayout .sidebar+.mainbar{ max-width: calc( 100% - 350px ) }
 .pagelayout .sidebar form.loading{ display: none }
 

       
}

.pagelayout .sidebar ul ul ul, .pagelayout .sidebar ul ul li:not( .active ){ border-top: solid #EBEBEB 1px }
.pagelayout .sidebar ul a, .pagelayout .sidebar ul span{ display: block; padding: 7px 20px }

.pagelayout .sidebar ul li.active>a, .pagelayout .sidebar ul li.active>span{ position: relative }
/* .pagelayout .sidebar ul li.active>a:before, .pagelayout .sidebar ul li.active>span:before{ content: '>'; position: absolute; left: 5px } */



.pagelayout .sidebar ul li.active.active-parent>a, .pagelayout .sidebar ul li.active.active-parent>span{ background-color: transparent }

.pagelayout .sidebar ul li.level-0>a, .pagelayout .sidebar ul li.level-0>span{ display: block; font-size: 1.625rem; font-weight: 700; margin-bottom: 20px }
.pagelayout .sidebar ul li.level-1>a, .pagelayout .sidebar ul li.level-1>span{ padding-left: 25px }
.pagelayout .sidebar ul li.level-2>a, .pagelayout .sidebar ul li.level-2>span{ padding-left: 30px }

.pagelayout .sidebar ul li.level-1.active>a, .pagelayout .sidebar ul li.level-2.active>a{ background-color: #44c8f5; color: #FFF }




/*
.sidebar>ul>li:first-child>span{ display: block; margin-bottom: 20px }
.sidebar ul ul, .sidebar ul li+li{ border-top: solid #B5CBE0 1px }
.sidebar li a{ display: block; padding: 10px 5px 10px 20px; color: #404752; -webkit-transition: ease background-color 300ms, ease color 300ms; transition: ease background-color 300ms, ease color 300ms }
.sidebar li a:hover, .sidebar li.active>a{ color: #569CDE }
.sidebar li.active>a{ background-color: #FFF }
.sidebar li ul a{ padding-left: 30px }
*/












/* Home page */

.page--.page-home .main .page-panel.page-heading{ text-align: center }


/* Snippet Panel */

.snippet-- .snippet{ padding: 40px 0 }
@media( min-width: 992px ){
 .snippet-- .snippet{ padding: 80px 0 }      
}

/* Snippet Panel - Styling */

.snippet--.homep-snippet-1 .snippet{ background-color: #e2f3f6; text-align: center }
.snippet--.homep-snippet-2 .snippet{ background-color: #FFF; text-align: center }
.snippet-- .snippet .wys+.btn{ margin-top: 40px; font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 700; padding: 18px 28px }

/* Sliding testimonials */

.testimonials--{ margin-top: 40px; padding: 120px 0 100px 0; text-align: center }

.testimonials-- .testimonials-container{ position: relative; margin-top: 40px; padding: 0 60px }
.testimonials-- .clip{ overflow: hidden; margin-left: -10px; margin-right: -10px }
.testimonials-- .reel{ display: flex; position: relative; left: 0  }
.testimonials-- .testimonial{ -webkit-box-flex: 0; -webkit-flex: 0 0 200%; -ms-flex: 0 0 200%; flex: 0 0 200%; max-width: 200%; padding-right: 100% }


/* Sliding testimonials - Styling */
.testimonials--{ background-color: #bce0fd }
.testimonials-- .testimonial .padding{ display: inline-block; margin-top: 40px; padding: 30px; border-top: solid #444 2px }
.testimonials-- .testimonial .image{ height: 140px; background-size: contain; background-position: center; background-repeat: no-repeat }

/*  Sliding testimonials - Arrows */

.testimonials-- a.arrow{ position: absolute; top: 50%; margin-top: -25px }
.testimonials-- a.prev.arrow{ left: 20px }
.testimonials-- a.next.arrow{ right: 20px }

@media( min-width: 992px ){
 .testimonials--{ margin-top: 80px }
 .testimonials-- .testimonials-container, .testimonials-- .testimonial .padding{ margin-top: 80px }
}

/* Banners */

.banners{ margin-top: 20px; padding: 0 20px }
.banners .box{ height: 100% }
.banners .banner a, .banners .banner span{ display: block; color: #FFF }
.banners .banner .content{ padding: 40px 20px }

@media( max-width: 991px ){
 .banners .banner{ margin-top: 20px }  
}
@media( min-width: 992px ){
 .banners{ margin-top: 40px; padding: 0 100px } .banners .banner{ margin-top: 40px }
}

.page-cert-landing .banners{ margin-top: 0px; padding:0px; }
.page-cert-landing .banners .img-bg{ display: none; }
.page-cert-landing .banners .content{ font-size: 22px; }
.page-cert-landing .banners .content b{ display:block; font-size: 32px; }
.page-cert-landing .banners .banner .content::after{ display: block; content: ">"; width: 40px; height: 40px; border-radius: 50%; line-height: 38px; text-align: center; padding-left: 2px; font-size: 35px; color: #fff; margin-top: 30px; }
.page-cert-landing .banners .banner:first-child .content::after{ background: #9cd335; }
.page-cert-landing .banners .banner:last-child .content::after{ background: #025295; }

/* Google Map */

.google-map{ height: 100vh; margin-top: 40px }
@media( max-width: 991px ){
 .googlemap--{ padding-right: 30px }
}
@media( min-width: 992px ){
 .google-map{ height: 600px; margin-top: 80px }
}


/* Tiered Banner Scroller */

.tbscroll--{ margin: 40px auto; max-width: 1800px; padding: 0; text-align: center }
.tbscroll-- .tbscroll-container{ position: relative; padding: 0 74px }
.tbscroll-- .clip{ overflow: hidden; margin-left: -21px; margin-right: -21px }
.tbscroll-- .reel{ display: flex; position: relative; left: 0  }
@media ( min-width: 992px ){
 .tbscroll--{ margin: 80px auto; padding: 0 }
}

.tbscroll-- .tbscrollbox{ -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 20px }
.tbscrollbox>div+div{ margin-top: 40px }
@media ( min-width: 576px ){
 .tbscroll-- .tbscrollbox{ -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% }
}
@media ( min-width: 768px ){
 .tbscroll-- .tbscrollbox{ -webkit-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333% }
}
@media ( min-width: 1200px ){
 .tbscroll-- .tbscrollbox{ -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% }
}

/* Styling */
.tbscroll--{ }
.tbscroll-- .tbscrollbox span.padding, .tbscroll-- .tbscrollbox a.padding, .tbscroll-- .tbscrollbox span.img-bg{ display: block }
.tbscroll-- .tbscrollbox span.img-bg{ -webkit-filter: grayscale(100%); filter: grayscale(100%) }


.tbscroll-- .tbscrollbox .padding{ position: relative; padding: 0; background-color: #E5F2FC }
.tbscroll-- .tbscrollbox .padding .caption{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: ease background-color 300ms }



.tbscroll-- .tbscrollbox .padding .caption .content{ display: inline-block; padding: 20px 24px; color: #FFF; font-family: Montserrat, 'Open Sans', Helvetica,Arial, sans-serif }
.tbscroll-- .tbscrollbox .light .padding .caption .content{ color: #000 }


@media ( min-width: 1400px ){ 
 .tbscroll-- .tbscroll-container{ padding: 0 100px }      
}

/* Arrows */
.tbscroll-- a.arrow{ position: absolute; top: 50%; margin-top: -25px }
.tbscroll-- a.prev.arrow{ left: 20px }
.tbscroll-- a.next.arrow{ right: 20px }


.ImportNotice{
  display: block;
  background-color: #025295;
  color: #fff;
  padding: 30px;
  margin-top: 10px;
}

.ImportNotice a{ color: #fff; text-decoration: underline; }

.FormText{
  display: block;
  font-size: 15px;
  margin: 20px 0;
}