/* New Bootstrap 4 Styles*/

/*html {font-size:0.9rem;}

@media (min-width: 576px) { 
    html {font-size:90%} 
}

@media (min-width: 768px) { 
    html {font-size:100%;} 
}*/

:root {
    --AscoraBlack: #383749;
    --AscoraBlue: #246bb5;
    --AscoraBlue2: #0288d1;
    --AscoraBlueAccent: #b1daff;
    --AscoraOrange: #ffa000;
    --AscoraDark: #01579b;
    --AscoraLight: #6c7e8e;
    --MaterialBlack: #212121;
    --MaterialBlueGrey: #e7ecee;
    --MaterialLightBlueGrey: #f0f5f7;
    --MaterialAmber: #ff8f00;
    --AscoraGlyphColor: #2196f3;
    --AscoraStripeGrey: #f5f5f5;
    --BtnBookOrangeDefault: #ffa000;
    --BtnBookOrangeHover: #df7800;
    --AscoraGradBlue1: #44b3ec;
    --AscoraGradBlue2: #0288d1;
    --AscoraOrangeLight: #ffc000;
    --AscoraLime: #70e591;
    --IconCustomTickThin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238 238' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M12 138.5L80.3 215s18.7-39.9 61.9-100.2c16.4-22.9 59.5-73.1 83.8-90.2-61.3 24-155.7 143.9-155.7 143.9l-58.3-30z' fill-rule='evenodd' stroke='%23000'/%3E%3C/svg%3E");
    --svg-gear-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 238.3' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M456.6 207.8a329 329 0 0 1 41.4 9 271 271 0 0 1 2 21.5h-85.3c-2.3-32-13.8-62.5-33.2-88a165 165 0 0 0-296.4 87.9H1l-1-.5 2-22 41-6.7c1-5.3 2.4-10.6 3.8-15.8l5-15.5-30.4-29.4a282 282 0 0 1 9.8-19.7L72 137l9.2-13.4L91.5 111a332 332 0 0 1-17.8-38.5A288 288 0 0 1 90 57.8c12 7 23.6 14.4 34.8 22.6l13.5-9c4.6-3 9.4-5.5 14-8a331 331 0 0 1-2.6-42.2l20.5-8 24.3 33.7c5.2-1.5 10.5-2.6 16-3.7a175 175 0 0 1 16.1-2.4L239.4.3h22L272 40.4l16 2.3 16 3.5a333 333 0 0 1 26.5-33 244 244 0 0 1 20.5 8 379 379 0 0 1-4.8 41.3l14.2 8 13.5 9a335 335 0 0 1 36.7-21.3l16.2 15c-5.7 12.6-12.2 25-19.3 36.8l10.3 12.6c3.2 4.4 6.4 8.8 9.4 13.3l41.8-6.5 9.8 19.8-31.3 27.3 5.2 15.4 3.8 15.8z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
}

p, a, ul, li, table, td, th, label, .btn {
    font-family: 'Open Sans', sans-serif;
}

/* color font awesome icons*/
.c_red {color:#f44336}
.c_green {color:#43a047}
.c_blue {color:#2196f3}
.c_blue_02 {color:#0288d1}
.c_dark_blue {color:#01579b}
.c_navy {color:#3f51b5}
.c_orange {color:#ffc107}
.c_purple {color:#673ab7}
.c_cyan {color:#0097a7}
.c_lightgreen {color:#009688}
.c_deeporange {color:#ff5722}
.c_lime {color:#a4c400}
.c_emerald {color:#008a00}
.c_teal {color:#00aba9}
.c_cobalt {color:#0050ef}
.c_indigo {color:#6a00ff}
.c_violet {color:#aa00ff}
.c_pink {color:#f472d0}
.c_magenta {color:#d80073}
.c_crimson {color:#a20025}
.c_amber {color:#f0a30a}
.c_brown {color:#825a2c}
.c_olive {color:#6d8764}
.c_steel {color:#647687}
.c_mauve{color:#76608a}
.c_sienna {color:#a0522d}

.btn-orange {
    color: #fff;
    background-color: #FFC100;
    border-color: #FFC100;
    font-weight: 600
}
.btn-orange:hover, .btn-orange:active {color: #fff; background-color: #FFC100; border-color: #FFC100}

.btn-orange-2 {color: #fff;background-color: #ffb62e; border-color: #ffb62e; font-weight:600; padding: 8px 20px;}
.btn-orange-2:hover, .btn-orange:active {color: #fff; background-color: #ffb62e; border-color: #ffb62e; padding: 8px 20px;}


/*Bootstrap Styles*/
.font-weight-bold {font-weight:600!important}

/*background colours*/
.bg-blue-02 {background-color:#0288d1}
.bg-blue-03 {background: rgba(2,136,209,.10);} /*Transparent Blue, Light Blue*/

.divider_blue {background: #136cbf; width:200px; height:2px}
.divider_triangle{
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-top: 15px solid #ADD5F7;
}
/******************/
/* Shared         */
/******************/

.offset-sticky {height: 65px;}

.field-validation-error {
    color: #b94a48;
    font-size: 14px;
    font-family: 'Open Sans',sans-serif;
}

.signup_now h1{font-size:48px;font-family: 'Open Sans Condensed',sans-serif;font-weight: 300;color: #5c6e86;}
.signup_now p{font-size:20px;color: #5c6e86;}
.signup_now .btn-primary{padding: 12px 25px;}

.get_ascora_menu {background-color: #f5f5f5 !important;}
.get_ascora_menu .logo {height: 50px;width: auto;}
.get_ascora_menu.sticky {position: fixed;top: 0;left: 0;right: 0;z-index: 1030;}

.btn-primary{
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-weight: 600;
    background-color: #0288d1!important;
    color: #ffffff!important;
    text-decoration: none;
    text-align: center;
    border: 0px;
    display: inline-block;
    padding: 8px 20px;
}

.btn-primary:hover {background-color: #03a9f4!important;}

.img-fluid {width:100%; height:auto}
.img-cover {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.w-10pc {width:10%}
.w-20pc {width:20%}
.w-30pc {width:30%}
.w-40pc {width:40%}
.w-50pc {width:50%}
.w-60pc {width:60%}
.w-70pc {width:70%}
.w-80pc {width:80%}
.w-90pc {width:90%}
.w-100pc {width:100%}

.rounded {border-radius: .5rem !important;}

.img_filter_blur_1 {-webkit-filter: blur(1px);filter: blur(1px);}
.img_filter_blur_2 {-webkit-filter: blur(2px);filter: blur(2px);}
.img_filter_blur_3 {-webkit-filter: blur(3px);filter: blur(3px);}
.img_filter_blur_4 {-webkit-filter: blur(4px);filter: blur(4px);}
.img_filter_blur_5 {-webkit-filter: blur(5px);filter: blur(5px);}

.img_filter_saturate_1 {-webkit-filter: saturate(1);filter: saturate(1);}
.img_filter_saturate_2 {-webkit-filter: saturate(2);filter: saturate(2);}
.img_filter_saturate_3 {-webkit-filter: saturate(3);filter: saturate(3);}
.img_filter_saturate_4 {-webkit-filter: saturate(4);filter: saturate(4);}
.img_filter_saturate_5 {-webkit-filter: saturate(5);filter: saturate(5);}

/*.hue {-webkit-animation: hue 5s infinite;}
.blur {-webkit-animation: blur 5s infinite;}

@-webkit-keyframes blur {
  0%, 100%  { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(10px); }
}
@-webkit-keyframes hue {
  0%, 100%  { -webkit-filter: hue-rotate(0deg); }
  50% { -webkit-filter: hue-rotate(180deg); }
}*/

.img_overlay_laptop {position:relative;}
.img_overlay_laptop .image{display:block; width:100%; height:auto}
.img_overlay_laptop .overlay{position:absolute; top:5.5%; right:15.5%; bottom:12.8%; left:15.8%}

.img_overlay_card {position:relative;}
.img_overlay_card .image{display:block; width:100%; height:auto}
.img_overlay_card .overlay{position:absolute; top:0; right:0; bottom:0; left:0}

.position-relative {position:relative}
.position-absolute {position:absolute}

/*****************************/
/* Shared - Custom Max Width */
/*****************************/

.max-width-custom-1 {max-width: 1400px;}
.max-width-custom-2 {max-width: 1200px;}
.max-width-custom-3 {max-width: 800px;}
.max-width-custom-4 {max-width: 1600px;}

.w-70 {width: 70% !important}

/* helpers */
.fit-cover {object-fit: cover;}
.fit-contain {object-fit: contain;}

/*******************/
/* Main Layout     */
/*******************/

.main_layout .section_footer_bottom h3{font-family: "Open Sans",sans-serif;font-size: 22px;font-weight: 400;text-align: center;margin-bottom: 0px;color: #5c6e86;}
.main_layout .section_footer_bottom p {font-size: 16px;color: #5c6e86;margin:0px;}
.main_layout .section_footer_bottom .address {font-size: 12px;}
.main_layout .section_footer_bottom .img_ascora {width:70%; height:auto}
.main_layout .section_footer_bottom .asc_logo_512 {width:80%}
.main_layout .section_footer_bottom .footer_copyright {font-size: 12px;color: #595959;text-align: center;}

.main_layout .section_footer_top h4{color: #01579b;font-family: "Open Sans",sans-serif;font-size: 22px;font-weight: 600;margin-bottom: 5px;}
.main_layout .section_footer_top ul{margin-left: 0px;padding-left: 0px;}
.main_layout .section_footer_top ul li {list-style: none;color: #607d8b;font-family: "Open Sans",sans-serif;font-size: 18px;line-height: 30px;font-weight: 300;}

/*******************/
/* Business Growth */
/*******************/

.business_growth_layout {}
.business_growth_layout p{font-size:1.2em; line-height:1.6em;}

.business_growth_layout .title-1 {font-size:28px; margin-bottom:20px; font-weight:400!important;}
.business_growth_layout .lead-1 {font-size:1rem; font-weight:300; line-height:1.6em}

/*.business_growth_layout .icon_right {
    color: #60a3d7;
    opacity:0.2;
    position: absolute;
    right: 10%;
    bottom: 12%;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    font-size:15em
}

.business_growth_layout .icon_left {
    color: #60a3d7;
    opacity:0.2;
    position: absolute;
    right: auto;
    bottom: 12%;
    left: 10%;
    font-size:15em;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}*/

.business_growth_layout .icon_right {
    color: #60a3d7;
    opacity:0.1;
    position: absolute;
    top: calc(50% - 75px);
    right:10%;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    font-size:150px;
}

.business_growth_layout .icon_left {
    color: #60a3d7;
    opacity:0.1;
    position: absolute;
    top: calc(50% - 100px);
    left:10%;
    font-size:200px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}


.business_growth_layout .btn-primary{
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-weight: 600;
    background-color: #0288d1!important;
    color: #ffffff!important;
    text-decoration: none;
    text-align: center;
    border: 0px;
    display: inline-block;
    padding: 8px 20px;
}

.business_growth_layout .btn-primary:hover {background-color: #03a9f4!important;} 
.business_growth_layout .offset_sticky {margin-top: 65px;}
.business_growth_layout .marketing .featurette {min-height:300px}

.business_growth_layout .marketing .list_themed li{font-size:1.1em;}
.business_growth_layout .marketing .list_themed li i{color:#03a9f4;font-size:2em;}

.business_growth_layout .marketing .feature_set {}
.business_growth_layout .marketing .feature_set h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 26px;
    color: #01579b;
}

.business_growth_layout .marketing .card {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #6c7e8e;
}

.business_growth_layout .marketing .card h3 {
    font-size: 1.8em;
    line-height: 26px;
    color: #01579b;
}

.business_growth_layout .marketing .card p {
    font-size: 1.1em;
    line-height: 1.6em;
}

.business_growth_layout .marketing .card a {
}

.business_growth_layout .media .icon{
    padding: .66667rem;
    border-radius: .35rem;
    background: #0288d1 !important;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    min-width: 53px;
}

/**********************/
/* Overlay for Banner */
/**********************/

.bg-overlay-primary:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18,131,218,.85);
    z-index: 2;
}

.bg-overlay-white:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,.85);
    z-index: 2;
}

.bg-overlay:after {content: " "; position:absolute; width:100%; height:100%; top:0; left:0; bottom:0; right:0; z-index: 2;}

.fade-white:after {background: linear-gradient(-90deg,#f8f9fa 25%,rgba(255,255,255,0) 100%);}
.fade-white-50pc:after {background: linear-gradient(-90deg,#f8f9fa 50%,rgba(255,255,255,0) 200%);}

.intro-content {position:relative;z-index:100;color:#343a40; font-weight:600}
.intro-content p {font-size:1.8em;line-height:1.5em; font-weight:400; color:#5c6e86}
.intro-content h1 {font-size:2.8em; font-weight:600;}

/************************/
/* Banner Custom Styles */
/************************/

.banner-01 .img-cover {object-position: -400px -310px;}
.banner-02 .img-cover {object-position: -1000px center; max-width:2000px; min-width:1400px}
.banner-03 .img-cover {}

.banner-01 .intro-content {}
.banner-01 .intro-content p{}
.banner-01 .intro-content h1{}

/*Business Growth*/
.banner-02 .intro-content {}
.banner-02 .intro-content p {font-size:1.7em;line-height:1.5em; font-weight:400; color:#5c6e86}
.banner-02 .intro-content h1 {font-size:2.8em; font-weight:600;}

/*Case Studies Richards Lock n Safe*/
.banner-03 img{width:50%}
.banner-03 .intro-content {color:#343a40; font-weight:600}
.banner-03 .intro-content p {font-size:1.8em;line-height:1.5em; font-weight:400; color:#5c6e86}
.banner-03 .intro-content h1 {font-size:2.8em; font-weight:600;}

/****************/
/* Case Studies */
/****************/
.case_studies_layout h3 {}
.case_studies_layout p{font-size:1.2em; line-height:1.6em;}
.case_studies_layout .offset_sticky {margin-top: 65px;}

.case_studies_layout .cases {}
.case_studies_layout .cases h1{color:#0288d1}
.case_studies_layout .cases h3{color:#0288d1}

/******************/
/* Landing Short  */
/******************/

.landing_short .offset_sticky {margin-top: 65px;}
.landing_short .marketing p{
    font-family: "Open Sans",sans-serif;
    font-weight: 300;
    font-size:1.2rem; 
    line-height:1.6em
}

.landing_short .marketing_list {
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-size:1.2rem; 
    line-height:2em
}

.landing_short .marketing_list .fas{
    color:#0288d1!important;
}

/******************/
/*  Tracking      */
/******************/
.tracking_layout h1, h2, h3, h4 {
    font-weight: 600;
}

.tracking_layout h3 {
    font-size: 1.8em;
    line-height: 26px;
    color: #01579b;
    font-weight: 600;
}

.tracking_layout h1 {
    font-size: 2.8em;
    font-weight: 600;
}

.tracking_layout p {
    font-size: 1.1em;
    line-height: 1.6em;
    font-weight: 400;
    color: #6c7e8e;
}

.tracking_layout ul {
    font-size: 1.1em;
    line-height: 1.6em;
    font-weight: 400;
    color: #6c7e8e;
}

.tracking_layout ul li{
    margin-bottom:5px;
}

/******************/
/* Video Player  */
/******************/

.video_container {
    display:inline-block;
    position: relative;
    text-align: center;
    color: white;
    cursor:pointer;
    padding:8px;
}

/* Bottom left text */
.video_container .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.video_container .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.video_container .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.video_container .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.video_container .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video_container p.overlay_text {
    color:#ffffff; 
    font-size:20px;
    font-weight:bold;
}

.video_container .tint {
    background-color:#1c1c1c;
    opacity:0.2;
    position: absolute;
    top:0; right:0; bottom:0; left:0
}

.video_container:hover .tint {
    opacity:0.3;
}

.video_container .overlay_playbtn {
    font-size:100px;
    color:#ffffff;
    z-index:1000;
}

.video_container img {
    max-width:500px; width:100%; height:auto; padding:0px;
}


/* Video Thumbnails  */
.tutorial_content .section_video {}
.tutorial_content .section_video .video_header h2{color: #01579b;font-family: "Open Sans",sans-serif;font-size: 30px;font-weight: 400;line-height: 36px;margin-bottom: 20px;margin-top: 20px;}
.tutorial_content .section_video .video_header p{color: #607d8b;font-family: "Open Sans",sans-serif;font-size: 20px;font-weight: 400;line-height: 30px;}
.tutorial_content .section_video [class^=col] {padding-left:10px; padding-right:10px;}
.tutorial_content .section_video .video_thumbnail{position:relative; width:100%; height:auto; border-radius:6px; overflow:hidden}
.tutorial_content .section_video .video_thumbnail::after {background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;content: "";height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
.tutorial_content .section_video .video_thumbnail .video_title {position:absolute; top:0px; padding:10px; width:100%; background: rgba(33, 150, 243, 0.8) none repeat scroll 0 0; text-align:center; color:#ffffff; font-size:26px; z-index:20}
.tutorial_content .section_video .video_thumbnail .thumb_img {display: block; height: auto; width: 100%;}
.tutorial_content .section_video .video_thumbnail .play_button {position:absolute; left:50%; top:50%; font-size:80px; color:#ffffff; margin-left: -30px; margin-top: -40px; z-index:10; cursor:pointer}

.zoom_play_button:hover .play_button{
  animation: zoomAnimFrames linear 0.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: zoomAnimFrames linear 0.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: zoomAnimFrames linear 0.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: zoomAnimFrames linear 0.4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: zoomAnimFrames linear 0.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes zoomAnimFrames{
  0% {transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {transform:  scaleX(1.00) scaleY(1.00) ;}
  100% {transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-moz-keyframes zoomAnimFrames{
  0% {-moz-transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {-moz-transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {-moz-transform:  scaleX(1.00) scaleY(1.00) ;}
  100% {-moz-transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-webkit-keyframes zoomAnimFrames {
  0% {-webkit-transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {-webkit-transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {-webkit-transform:  scaleX(1.00) scaleY(1.00) ;}
  100% {-webkit-transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-o-keyframes zoomAnimFrames {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    -o-transform:  scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes zoomAnimFrames {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    -ms-transform:  scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

/* Login Page */

.ribbon-2 {
    --f: 10px; /* control the folded part*/
    --r: 20px; /* control the ribbon shape */
    --t: 14px; /* the top offset */

    position: absolute;
    inset: var(--t) 30px auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: polygon( 0 0, 100% 0, calc(100% - var(--r)) calc(50% - var(--f)/2), 100% calc(100% - var(--f)), 0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
    background: #00629e;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

.ribbon-2 h1 {font-family: 'Open Sans Condensed',sans-serif;font-size: 26px;}

.ribbon-offset {height: 50px;}

.section-ascora-banner-blue {
    font-family: 'Open Sans Condensed',sans-serif;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    background-image: url(/assets/img/bg_wave_metro.png);
    background-size: cover;
    background-attachment: fixed;
}

.section-ascora-banner-blue h1 {
    font-family: 'Open Sans Condensed',sans-serif;
    color: #fff;
    margin: 20px 0 0 0;
    font-size: 48px;
    line-height: 48px;
    font-weight: 300;
}

.section-ascora-banner-blue h2 {
    font-family: 'Open Sans Condensed',sans-serif;
    color: #fff;
    margin: 15px 0 0 0;
    font-size: 30px;
    font-weight: 300;
}

.section-ascora-banner-blue .bg_gear {
    background-image: url(/assets/img/bg_gear_opacity_30.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    height: 220px;
}

.section-ascora-banner-blue .svg-gear-half {
    background-image: var(--svg-gear-half);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: -10%;
    margin-left: auto;
    margin-right: auto;
    width: 460px;
    height: 215px;
    top: 82px;
    opacity:0.3;
}

.section-ascora-banner-blue .container {min-height: 150px;}

.section-ascora-login {font-family: 'Open Sans',sans-serif;}

.section-ascora-login .carousel-login {}
.section-ascora-login .carousel-login .card {
    min-height: 550px;
    background-color: #199ae7;
    border: 2px solid #004b8d;
    border-radius: 0px;
    font-size: 18px;
    color: #ffffff;
}

.section-ascora-login .carousel-login .card ul {font-size: 14px; line-height:1.4}
.section-ascora-login .carousel-login .card ul li {margin-bottom:5px;}


.section-ascora-login .carousel-login .card.card-groundplan p{font-size:30px;font-family: 'Open Sans Condensed',sans-serif;}
.section-ascora-login .carousel-login .card.card-groundplan img {width: 260px;height: auto;}


.section-ascora-login .card-login .input-group-text{min-width:40px}

.btn_metro_login, .btn_metro_login:link, .btn_metro_login:focus, .btn_metro_login:active {
    background-color: #0288d1 !important;
    font-size: 16px;
    font-family: "Open Sans",sans-serif;
    font-weight: 600;
    color: #fff !important;
    text-transform: uppercase;
    border-radius: 0px
}

.btn_metro_login:hover {background-color: #03a9f4 !important;}

/************/
/*  Shared  */
/************/
.br-hide-mobile br{display: none;}

/*********************/
/* Reece maX - Steps */
/*********************/
.wrapper-reecemax .section-reecemax-steps {padding-top:50px; padding-bottom:50px;}

.wrapper-reecemax .section-reecemax-steps h1.banner-title{
    --minFontSize: 32px;
    --maxFontSize: 46px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.2;
    color:var(--AscoraOrangeLight);
    font-weight: 600;
}

.wrapper-reecemax .section-reecemax-steps h2.banner-title{
    --minFontSize: 24px;
    --maxFontSize: 24px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1;
    color:var(--AscoraDark);
}

.wrapper-reecemax .section-reecemax-steps .banner-description {
     --minFontSize: 16px;
    --maxFontSize: 16px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.5;
}

.wrapper-reecemax .section-reecemax-steps .icon-single {font-size:52px; line-height:1}
.wrapper-reecemax .section-reecemax-steps .icon-single i{color:var(--MaterialAmber)}

.wrapper-reecemax .section-reecemax-steps .icon-multi {}
.wrapper-reecemax .section-reecemax-steps .icon-multi .fa-stack i:first-child{color: var(--AscoraOrangeLight)}
.wrapper-reecemax .section-reecemax-steps .icon-multi .fa-stack i:last-child{color:var(--MaterialAmber)}


/*************/
/* Reece maX */
/*************/
.wrapper-reecemax .btn-get-ascora-orange,
.wrapper-reecemax .btn-get-ascora-orange:link,
.wrapper-reecemax .btn-get-ascora-orange:focus,
.wrapper-reecemax .btn-get-ascora-orange:active {
    border: 0px;
    border-radius: 0px;
    padding: 10px 25px;
    background-color: var(--BtnBookOrangeDefault) !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: .25rem;
}

.wrapper-reecemax .btn-get-ascora-orange:hover {
    background-color: var(--BtnBookOrangeHover) !important;
}

.wrapper-reecemax .btn-get-ascora-blue,
.wrapper-reecemax .btn-get-ascora-blue:link,
.wrapper-reecemax .btn-get-ascora-blue:focus,
.wrapper-reecemax .btn-get-ascora-blue:active {
    border: 0px;
    border-radius: 0px;
    padding: 10px 25px;
    background-color: #0288d1 !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: .25rem;
}

.wrapper-reecemax .btn-get-ascora-blue:hover {
    background-color: #03a9f4 !important;
}

/*********************/
/* reecemax banner 1 */
/*********************/

.wrapper-reecemax .section-banner-reecemax-1 .tint-gradient {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5)25%, rgba(0, 0, 0, 0.6));
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.wrapper-reecemax .section-banner-reecemax-1 .container {
    z-index: 2;
}

.wrapper-reecemax .section-banner-reecemax-1 {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapper-reecemax .section-banner-reecemax-1 .btn-banner{
    font-size:20px;
    padding:15px 80px;
    font-weight:bold;
}

.wrapper-reecemax .section-banner-reecemax-1 .bg-img-reecemax-1{
    background-image: url(/assets/img/banner-maX-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.wrapper-reecemax .section-banner-reecemax-1 .banner-title {
    --minFontSize: 36px;
    --maxFontSize: 120px;
    --scaler: 6vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.15;
    color: #ffffff;
    font-weight: 600;
}

.wrapper-reecemax .section-banner-reecemax-1 .banner-description {
    --minFontSize: 24px;
    --maxFontSize: 42px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.2;
    color: #ffffff;
    font-style: italic;
    font-weight: 600;
}

/*********************/
/* reecemax banner 2 */
/*********************/
.wrapper-reecemax .section-banner-reecemax-2{
    background-color:var(--AscoraOrangeLight);
}

.wrapper-reecemax .section-banner-reecemax-2 .btn-banner {
    font-size: 20px;
    padding: 15px 80px;
    font-weight: bold;
}

.wrapper-reecemax .section-banner-reecemax-2 .content-right{
    padding:50px 15px;
}

.wrapper-reecemax .section-banner-reecemax-2 .bg-img-reecemax-2 {
    background-image: url(/assets/img/banner-maX-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.wrapper-reecemax .section-banner-reecemax-2 .banner-title {
    --minFontSize: 32px;
    --maxFontSize: 46px;
    --scaler: 5vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.1;
    color: var(--AscoraBlue2);
    font-weight: bold;
}

.wrapper-reecemax .section-banner-reecemax-2 .banner-description {
    --minFontSize: 16px;
    --maxFontSize: 16px;
    --scaler: 5vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.1;
    color: var(--AscoraBlue2);
    font-weight: bold;
}

.wrapper-reecemax .section-banner-automate {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--AscoraBlue2);
}

.wrapper-reecemax .section-banner-automate .banner-title {
    --minFontSize: 32px;
    --maxFontSize: 46px;
    --scaler: 5vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.1;
    color: var(--AscoraOrangeLight);
    font-weight: 600;
}

.wrapper-reecemax .section-banner-automate .banner-description {
    --minFontSize: 16px;
    --maxFontSize: 22px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.3;
    font-weight: 600;
}

.wrapper-reecemax .section-banner-features {
    background-color: var(--MaterialLightBlueGrey);
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapper-reecemax .section-banner-features .icon-multi i:first-child{
    color: #43a047;
}

.wrapper-reecemax .section-banner-features .banner-description{
    --minFontSize: 16px;
    --maxFontSize: 22px;
    --scaler: 5vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.3;
    color: var(--MaterialBlack);
    font-weight: bold;
}

/*************/
/* Ezzybills */
/*************/

.section-ezzybills-plus .badge-plus {
    font-size: 20px;
    background-color: #b5cfe1;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    right: -20px;
    display: flex;
    font-weight: 600;
    z-index: 100;
}

.section-ezzybills-plus .badge-plus i{
    color:#ffffff;
    margin: auto;
}

.wrapper-ezzybills {
    font-family: 'Open Sans',sans-serif;
}

.wrapper-ezzybills .btn-get-ascora-orange, 
.wrapper-ezzybills .btn-get-ascora-orange:link, 
.wrapper-ezzybills .btn-get-ascora-orange:focus, 
.wrapper-ezzybills .btn-get-ascora-orange:active {
    border: 0px;
    border-radius: 0px;
    padding: 10px 25px;
    background-color: var(--BtnBookOrangeDefault) !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: .25rem;
}

.wrapper-ezzybills .btn-get-ascora-orange:hover {
    background-color: var(--BtnBookOrangeHover) !important;
}

/*ezzy banner 1*/

.wrapper-ezzybills .section-banner-ezzybills-1 .tint-gradient{
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5)25%, rgba(0, 0, 0, 0.6));
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}

.wrapper-ezzybills .section-banner-ezzybills-1 .container{
    z-index:2;
}

.wrapper-ezzybills .section-banner-ezzybills-1 {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapper-ezzybills .section-banner-ezzybills-1 .btn-banner{
    font-size:20px;
    padding:15px 80px;
    font-weight:bold;
}

.wrapper-ezzybills .section-banner-ezzybills-1 .bg-img-ezzy-1{
    background-image: url(/assets/img/banner-ezzybills-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.wrapper-ezzybills .section-banner-ezzybills-1 .banner-title {
    --minFontSize: 36px;
    --maxFontSize: 120px;
    --scaler: 6vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.15;
    color:#ffffff;
    font-weight:600;
}

.wrapper-ezzybills .section-banner-ezzybills-1 .banner-description {
    --minFontSize: 24px;
    --maxFontSize: 42px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.2;
    color:#ffffff;
    font-style:italic;
    font-weight:600;
}

/*ezzy banner 2*/

.wrapper-ezzybills .section-banner-ezzybills-2 .tint-gradient{
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5)25%, rgba(0, 0, 0, 0.6));
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}

.wrapper-ezzybills .section-banner-ezzybills-2 {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapper-ezzybills .section-banner-ezzybills-2 .container{
    z-index:2;
}

.wrapper-ezzybills .section-banner-ezzybills-2 .btn-banner{
    font-size:20px;
    padding:15px 80px;
    font-weight:bold;
}

.wrapper-ezzybills .section-banner-ezzybills-2 .bg-img-ezzy-1{
    background-image: url(/assets/img/banner-ezzybills-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.wrapper-ezzybills .section-banner-ezzybills-2 .banner-title {
    --minFontSize: 32px;
    --maxFontSize: 60px;
    --scaler: 6vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.1;
    color:#ffffff;
    font-weight:600;
}

.wrapper-ezzybills .section-banner-ezzybills-2 .banner-description {
    --minFontSize: 24px;
    --maxFontSize: 26px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.2;
    color:#ffffff;
    font-style:italic;
    font-weight:600;
}

/*ezzy bills steps*/

.wrapper-ezzybills .section-ezzybills-steps{
    background-color: #2a73ba;
    padding: 50px 0;
}

.wrapper-ezzybills .section-ezzybills-steps h1 {
    --minFontSize: 22px;
    --maxFontSize: 24px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.5;
}

.wrapper-ezzybills .section-ezzybills-steps h2 {
    --minFontSize: 18px;
    --maxFontSize: 20px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.5;
}

.wrapper-ezzybills .section-ezzybills-steps p {
    --minFontSize: 16px;
    --maxFontSize: 16px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.5;
}

/*ezzy bills time*/

.section-banner-time {
    margin-top: 50px;
    margin-bottom: 50px
}

.section-banner-time .banner-title {
    --minFontSize: 26px;
    --maxFontSize: 46px;
    --scaler: 4vw;
    --calcSize: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-size: var(--calcSize);
    line-height: 1.2;
    color:#ffc000;
    font-style:italic;
    font-weight:600;
}

@media (max-width: 767px) {
    .offset-sticky {height: 55px;}

    .section-ascora-banner-blue h1 {font-size: 38px;line-height: 1;}
    .section-ascora-banner-blue h2 {font-size: 22px;line-height: 1;}
    .section-ascora-banner-blue .container {margin-left: 15px;margin-right: 15px;}
}


/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    .wrapper-reecemax .section-banner-reecemax-2 .btn-banner {
        font-size: 26px;
        padding: 22px 60px;
        font-weight: bold;
    }

    .wrapper-ezzybills .section-banner-ezzybills-1 .btn-banner,
    .wrapper-ezzybills .section-banner-ezzybills-2 .btn-banner,
    .wrapper-reecemax .section-banner-reecemax-1 .btn-banner {
        font-size: 30px;
        padding: 30px 80px;
        font-weight: bold;
    }

    .wrapper-reecemax .section-banner-features {
        background-color: var(--MaterialLightBlueGrey);
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .wrapper-reecemax .section-banner-automate {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .wrapper-reecemax .section-reecemax-steps {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .wrapper-ezzybills .section-banner-time {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .wrapper-ezzybills .section-ezzybills-steps {
        padding: 100px 0;
    }

    .wrapper-ezzybills .section-banner-ezzybills-1 .tint-gradient,
    .wrapper-ezzybills .section-banner-ezzybills-2 .tint-gradient, 
    .wrapper-reecemax .section-banner-reecemax-1 .tint-gradient 
    {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.2)25%, rgba(0, 0, 0, 0.3));
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    .wrapper-ezzybills .section-banner-ezzybills-1,
    .wrapper-reecemax .section-banner-reecemax-1 {
        min-height: 950px;
        padding-top: 200px;
    }

    .wrapper-ezzybills .section-banner-ezzybills-2 {
        min-height: 1200px;
        padding-top: 250px;
    }

    .br-hide-mobile br {display: block;}

    .wrapper-reecemax .section-banner-reecemax-1 .banner-title,
    .wrapper-ezzybills .section-banner-ezzybills-1 .banner-title {
        line-height: 1.0;
    }

    .wrapper-reecemax .section-banner-automate .banner-title {
        line-height: 1.1;
    }

    .wrapper-reecemax .section-banner-reecemax-2 .content-right {
        padding: 100px;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

@media (min-width: 1500px) {
}