@charset "UTF-8";

body, 
body a,
body .main .bgcolour-light,
body .main .bgcolour-light a[href]:not( .btn ){
 color: #313640
}
body .main .bgcolour-dark, 
body .main .bgcolour-dark a[href]:not( .btn ){
 color: #fff
}

.ui-frame-header a[href], .ui-frame-sidebar a[href]{
 text-decoration: none 
}

/*
 Link colour in WYS
 */
 
body .main .wys a[href]:not( .btn ):hover{
 text-decoration: none 
}
body .main .wys a[href]:not( .btn ),
body .main .bgcolour-light .wys a[href]:not( .btn ){
 color: #171D6E
}
body .main .wys a[href]:not( .btn ):hover,
body .main .bgcolour-light .wys a[href]:not( .btn ):hover{
 color: #1BA1E8
}
body .main .bgcolour-dark .wys a[href]:not( .btn ),
body .main .bgcolour-dark .wys a[href]:not( .btn ):hover{
 color: #fff
}



/*
 Images
 */

picture.img-contain{
 background-color: #f4f4f4
}

/*
 Modal
 */

.jquery-helpers-modal>a.cross:before,
.jquery-helpers-modal>a.cross:after{
 background-color: #FFF;
}

/*
 Alert
 */
 
.jquery-helpers-alert{
 background-color: #FFF;
 border-radius: 10px;
 box-shadow: 0 2px 10px 0 #0003
}
.jquery-helpers-alert .header{
 border-bottom: solid #d9dadc 1px;
 border-radius: 10px 10px 0 0;
}
.jquery-helpers-alert.fixed-bottom,
.jquery-helpers-alert.fixed-bottom .header{
 border-radius: 0
}
.jquery-helpers-alert .header p+p{
 font-size: 0.875rem;
 font-weight: 400;
}
.jquery-helpers-alert .message{
 font-size: 1rem
}
.jquery-helpers-alert .ajaxbox{
 box-shadow: inset 0 1px 5px 0 #0003
}

/*
 Alert cookie policy
 */
 
.jquery-helpers-alert.cookie-policy{
 background-color: #E0F3FD
}
.jquery-helpers-alert.cookie-policy .controls .btn{
 padding: 0;
 margin-left: 14px
}

@media ( max-width: 350px ){
	
 .jquery-helpers-alert.cookie-policy .controls .btn{
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: 0
 }
 
}


/*
 header
 */
 
body.default-page-type .ui-frame-fixed-header,
body.montage-page-type .ui-frame-fixed-header{
 background-color: rgba( 23, 29, 110, 1 );
 transition: linear background-color 50ms
}
body.montage-page-type.header-transparent .ui-frame-fixed-header{
 background-color: rgba( 23, 29, 110, 0 )
}


@media ( max-width: 1199px ){

 body.montage-page-type .ui-frame-fixed-header,
 body.montage-page-type.header-transparent .ui-frame-fixed-header{
  background-color: rgba( 23, 29, 110, 1 )
 }	
 .ui-frame-mainmenu.ui-group-header{
  background-color: #171d6e
 }
 
}

.ui-frame-header .header .logo>svg>path.svg-path-1{
 fill: #349ED9
} 
.ui-frame-header .header .logo>svg>path.svg-path-2{
 fill: #F3F3F3
}
.ui-frame-header .header .logo>svg>path.svg-path-3{
 fill: #ffffff
}
.hamburger span, .hamburger span:before, .hamburger span:after{
 background-color: #1ba1e8
}
.ui-frame-fixed-header a[href]{
 color: #FFF
}

/*
 mainmenu
 */
 
.ui-frame-mainmenu a.mainmenu-toggle.cross:before,
.ui-frame-mainmenu a.mainmenu-toggle.cross:after{
 background-color: #FFF
}
 
@media ( max-width: 1199px ){
 
 .ui-frame-mainmenu{
  padding-right: 5px;
  border-right: 0
 }
 .ui-frame-mainmenu ul.primary-menu>li+li{
  margin-top: 0
 }
 .ui-frame-mainmenu ul.primary-menu li li+li{
  margin-top: 5px
 }
 .ui-frame-mainmenu ul.primary-menu>li>a{
  font-size: 1.5rem;
  font-weight: 700;
  padding: 7px 14px 7px 64px;
  min-height: 36px
 }
 .ui-frame-mainmenu.submenu-indicator-left ul.primary-menu li.menu-item-has-children>a{
  padding-left: 64px
 }
 .ui-frame-mainmenu div.submenu-wrap a{
  margin-left: 75px
 }
 .ui-frame-mainmenu ul.primary-menu li, 
 .ui-frame-mainmenu ul.primary-menu li a[href]{
  color: #fff
 }
 .ui-frame-mainmenu ul.primary-menu li.active, 
 .ui-frame-mainmenu ul.primary-menu li.active>a[href]{
  color: #1ba1e8
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap{
  background-color: transparent
 }	
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap.l2-submenu-wrap{
  border-radius: 0 4px 4px 0
 }
 .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span{
  width: 64px;
  height: 50px
 }
 .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  border-color: #fff
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span::before{
  top: 24px;
  left: 30px;
  width: 16px;
  height: 3px
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span::after{
  top: 17px;
  left: 37px;
  width: 3px;
  height: 16px
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children.submenu-open > a > span::after {
  top: 24px;
  height: 3px
 }
 
 
 
 

 /*
  Sidebar scrollbar
  */

 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer{ /* Firefox */
  scrollbar-width: thin;
  scrollbar-gutter: auto;
  scrollbar-color: #f8f2ec transparent
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar{ /* Chrome, Edge, and Safari */
  width: 8px;
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar-track{
  background-color: transparent
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar-thumb{
  background-color: #f8f2ec;
  border-radius: 6px
 }
 

}

@media ( min-width: 1200px ){
	
 .ui-frame-fixed-header .ui-header-sides li>a[href]:not( .btn ),
 .ui-frame-mainmenu ul.primary-menu li, 
 .ui-frame-mainmenu ul.primary-menu li>a[href]{
  color: #fff;
  transition: ease color 300ms
 }
 .ui-frame-fixed-header .ui-header-sides li>a[href]:not( .btn ):hover,
 .ui-frame-mainmenu ul.primary-menu li:hover, 
 .ui-frame-mainmenu ul.primary-menu li:hover>a[href],
 .ui-frame-mainmenu ul.primary-menu li.active, 
 .ui-frame-mainmenu ul.primary-menu li.active>a[href]{
  color: #1ba1e8
 }
 .ui-frame-mainmenu ul.primary-menu li li, 
 .ui-frame-mainmenu ul.primary-menu li li>a[href]{
  color: #313640;
  transition: ease color 500ms
 }
 .ui-frame-mainmenu ul.primary-menu li li:hover, 
 .ui-frame-mainmenu ul.primary-menu li li:hover>a[href],
 .ui-frame-mainmenu ul.primary-menu li li.active, 
 .ui-frame-mainmenu ul.primary-menu li li.active>a[href]{
  color: #1ba1e8
 }
 .ui-frame-mainmenu ul.primary-menu li li{
  background-color: transparent;
  transition: ease background-color 500ms
 }
 .ui-frame-mainmenu ul.primary-menu li li:hover,
 .ui-frame-mainmenu ul.primary-menu li li.active{
  background-color: #fff
 }
 .ui-frame-mainmenu ul.primary-menu>li div.submenu-wrap>ul{
  background-color: #e0f3fd;
  border-radius: 10px;
  box-shadow: 0 16px 16px #00000029
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap>ul>li:first-child{
  border-radius: 10px 10px 0 0
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap>ul>li:last-child{
  border-radius: 0 0 10px 10px
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  border-color: #fff
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children:hover>a>span:before,
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children.active>a>span:before{
  border-color: #1ba1e8
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li li.menu-item-has-children>a>span:before{
  border-color: #fff
 }
 
 
 
}

/*
 Pagelayout Sidemenu
 */
 
.pagelayout-sidemenu>.sidemenu>.outer>.inner{
 background-color: #f4f4f4	
}
.pagelayout-sidemenu>.sidemenu ul li+li{
 border-top: solid #f1f1f1 1px	
}
.pagelayout-sidemenu>.sidemenu ul li.active>a{
 text-decoration: underline
}
.pagelayout-sidemenu>.sidemenu li.level-1>a,
.pagelayout-sidemenu>.sidemenu li.level-1>span{
 font-weight: 700;
 margin-bottom: 10px
}

/* 
 Arrow 
 */

a.arrow{ width: 46px; height: 46px; background-color: #E0F3FD; border-radius: 23px; transition: ease background-color 300ms }
a.arrow:hover{ background-color: #1BA1E8 }
a.arrow:before{ 
 width: 18px; 
 height: 18px;
 margin-top: -9px;
 border-color: #fff;
 border-radius: 2px
}
a.arrow.lined:after{
 width: 22px; 
 height: 4px; 
 top: 50%;
 margin-top: -2px;
 background-color: #fff;
 border-radius: 2px
}
a.arrow.prev.left:before{
 left: 50%;
 margin-left: -10px;
 border-width: 0 0 4px 4px;
}
a.arrow.next.right:before{ 
 right: 50%;
 margin-right: -10px;
 border-width: 4px 4px 0 0;
}
a.arrow.lined.prev.left:after{ 
 left: 50%;
 margin-left: -11px
}
a.arrow.lined.next.right:after{ 
 right: 50%;
 margin-right: -11px
}

/*
 Carousel
 */
 
.carousel-- a.arrow:before{
 border-color: #fff
}
.carousel-- .pagination>ul>li>a:before{
 background-color: #fff; 
 border-color: #fff
}
.carousel-- .pagination>ul>li.active.focus>a:before{
 background-color: #222;
 border-color: #222
}

/*
 Pagination
 */
 
.carousel-- .pagination>ul>li>a:before,
.testimonials-- .pagination>ul>li>a:before{
 background-color: #fff; 
 border-color: #fff
}
.carousel-- .pagination>ul>li.active.focus>a:before,
.testimonials-- .pagination>ul>li.active.focus>a:before{
 background-color: #222;
 border-color: #222
}

/*
 Form
 */

input, select, textarea{
 border-color: transparent;
 background-color: #fff;
 color: #222
}

button.btn,
a.btn, 
a[href].btn, 
span.btn{
 font-size: 14px;
 height: 40px;
 line-height: 40px;
 text-transform: uppercase;
 background-color: #1ba1e8;
 color: #fff
}
button.btn.purple,
a.btn.purple, 
a[href].btn.purple, 
span.btn.purple{
 background-color: #6535c8
}
button.btn.green,
a.btn.green, 
a[href].btn.green, 
span.btn.green{
 background-color: #6535c8
}
button.btn.teal,
a.btn.teal, 
a[href].btn.teal, 
span.btn.teal{
 background-color: #61d3ce
}
button.btn.white,
a.btn.white, 
a[href].btn.white, 
span.btn.white{
 background-color: #fff;
 color: #1ba1e8;
 border-color: #1ba1e8
}

.wys .btn,
.cookie-policy .btn{
 box-shadow: 6px 6px 12px -6px rgba(0,0,0,0.5);
}


/*
 Radial FX
 */
 
@media ( min-width: 1200px ){
	
 button.btn,
 a.btn, 
 a[href].btn, 
 span.btn{
  transition: ease background-color 500ms
 }
 button.btn:hover,
 a.btn:hover,
 a[href].btn:hover,
 span.btn:hover{
  background-color: #1b6dcb
 }
 button.btn.purple:hover,
 a.btn.purple:hover, 
 a[href].btn.purple:hover, 
 span.btn.purple:hover{
  background-color: #422382
 }
 button.btn.green:hover,
 a.btn.green:hover, 
 a[href].btn.green:hover, 
 span.btn.green:hover{
  background-color: #422382
 }
 button.btn.teal:hover,
 a.btn.teal:hover, 
 a[href].btn.teal:hover, 
 span.btn.teal:hover{
  background-color: #19a9a2
 }
 button.btn.white:hover,
 a.btn.white:hover, 
 a[href].btn.white:hover, 
 span.btn.white:hover{
  background-color: #e0f3fd
 }

 button.btn.radial-in,
 a.btn.radial-in, 
 a[href].btn.radial-in, 
 span.btn.radial-in{
  position: relative;
  transition: none;
  overflow: hidden
 }
 button.btn.radial-in:hover,
 a.btn.radial-in:hover, 
 a[href].btn.radial-in:hover, 
 span.btn.radial-in:hover{
  background-color: #1ba1e8
 }
 .btn.radial-in>span{
  position: relative;
  z-index: 1
 }
 .btn.radial-in:after{
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: -25%;
  width: 150%;
  padding-top: 150%;
  border-radius: 999px;
  background-color: #1b6dcb;
  transition: ease 250ms
 }

 .btn.radial-in:hover:after{
  top: -200%;
  border-radius: 999px;
 }
 button.btn.purple.radial-in:hover,
 a.btn.purple.radial-in:hover, 
 a[href].btn.purple.radial-in:hover, 
 span.btn.purple.radial-in:hover{
  background-color: #6535c8
 }
 .btn.purple.radial-in:after{
  background-color: #422382
 }
 button.btn.green.radial-in:hover,
 a.btn.green.radial-in:hover, 
 a[href].btn.green.radial-in:hover, 
 span.btn.green.radial-in:hover{
  background-color: #6535c8
 }
 .btn.green.radial-in:after{
  background-color: #422382
 }
 button.btn.teal.radial-in:hover,
 a.btn.teal.radial-in:hover, 
 a[href].btn.teal.radial-in:hover, 
 span.btn.teal.radial-in:hover{
  background-color: #61d3ce
 }
 .btn.teal.radial-in:after{
  background-color: #19a9a2
 }
 button.btn.white.radial-in:hover,
 a.btn.white.radial-in:hover, 
 a[href].btn.white.radial-in:hover, 
 span.btn.white.radial-in:hover{
  background-color: #fff
 }
 .btn.white.radial-in:after{
  background-color: #e0f3fd
 }
 
}


/*
 Forms in pagelayout area
 */
 
.pagelayout input, 
.pagelayout select, 
.pagelayout textarea{
 border-color: #1ba1e8;
}

.pagelayout input[type="checkbox"].styled+label{
 border: solid #1ba1e8 1px;
 border-radius: 6px
}





/*
 Validiation basic colours
 */
 
.form-message>span{
 color: #fff
}
.form-message.success>span{
 background-color: #339900 
}
.form-message.failed>span{
 background-color: #cc0000 
}
.form-message>span>a.cross:before,
.form-message>span>a.cross:after{
 background-color: #fff 
}
.field-group label.asterisk,
.field-group .label.asterisk,
.field-group.required label:not( .no-asterisk ):after,
.field-group.required .label:not( .no-asterisk ):after{
 content: ' \002a'
}
.field-group.required.flag label, 
.field-group.required.flag .label{
 color: #cc0000      
}
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: #cc0000 !important
}


.pagelayout input[type="text"]:disabled{
 background-color: #fafafa
}
.pagelayout input[type="text"]:disabled+span.label{
 color: #cad0dc
}

/*
 Wys
 */
 
 
 
/*
 Footer
 */
 
.footer{
 background-color: transparent
}
.footer, .footer a{
 color: #222
}
.footer .footer-menu{
 background-color: #171d6e
}
.footer .footer-menu a{
 text-decoration: none 
}
.footer .copyrite-contact{
 background-color: #f4f4f4
}
.footer .footer-menu, .footer .footer-menu a{
 color: #fff
}
.footer .footer-menu .menu-list-heading span{
 color: #1ba1e8
}

.footer ul.social a.twitter:hover{
 background-color: #1da1f2;
 border-color: #1da1f2
}
.footer ul.social a.facebook:hover{
 background-color: #1877F2;
 border-color: #1877F2
}
.footer ul.social a.linkedin:hover{
 background-color: #0A66C2;
 border-color: #0A66C2
}
.footer ul.social a.instagram:hover{
 background-color: #8209f1;
 border-color: #8209f1
}
.footer .QRCode{
 background-color: #000	
}

@media ( min-width: 1200px ){
	
 .footer a{
  transition: ease color 300ms
 }
 .footer a:hover{
  color: #1ba1e8
 }
}


/*
 At end styles
 */

.btn.icon-button{
 position: relative
}
.btn.icon-button:before{
 content: '';
 display: block;
 position: absolute;
 background-size: contain;
 background-repeat: no-repeat;
 z-index: 1	
}
.btn.icon-button.login-button:before{
 background-image: url( "../images/login.svg" );
}

@media ( max-width: 575px ){
	
 .btn.icon-button-mobile{
  position: relative
 }
 .btn.icon-button-mobile:before{
  content: '';
  display: block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1	
 }
 .btn.icon-button-mobile.signup-button:before{
  background-image: url( "../images/signup.svg" );
 }
 
 .btn.icon-button-mobile:before,
 .btn.icon-button:before{
  top: 16px;
  left: 50%;
  width: 40px;
  height: 27px;
  margin-left: -12px
 }
 
}

@media ( min-width: 576px ){
	
 .btn.icon-button{
  padding-right: 47px
 }
 .btn.icon-button:before{
  width: 15px;
  height: 17px;
  top: 50%;
  right: 15px;
  margin-top: -8.5px;
 }
 
}

/*
 Additional styles
 */ 

img.svg-shadow text{
 font-family: 'Ubuntu';
}

.page-panel.sign-up-remove-margin-top .pagelayout > .page-panel{
 margin-top: 0	
}



/*
 Development helpers
 */


.jquery-helpers-modal>a{
 border: dashed 1px #FFF 
}
.resources-- .category,
.file--{
 border: dashed 1px #444
}
 
 



