/*!
 * Start Bootstrap - Creative v5.0.2 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
 */body,html{
     width:100%;height:100%;
}
 body{
     font-family: 'robotoregular', Arial, sans-serif;
     font-size:14px;
        background: url('../img/homebg3.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
 }
 hr{
     max-width:50px;border-width:3px;border-color:#018CB9
 }
 hr.gold{
     border-color:#FFDF00
 }
 a{
     color:#018CB9;-webkit-transition:all .2s;transition:all .2s
 }
 a:hover{
     color:#018CB9
 }h1,h2,h3,h4,h5,h6{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.bg-primary{background-color:#018CB9!important}.bg-dark{background-color:#212529!important}.text-faded{color:rgba(255,255,255,.7)}section{padding:8rem 0}.section-heading{margin-top:0}::-moz-selection{color:#fff;background:#212529;text-shadow:none}::selection{color:#fff;background:#212529;text-shadow:none}img::-moz-selection{color:#fff;background:0 0}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}
 

 #mainNav{
     background-color:#024b78;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-transition:all .2s;transition:all .2s
 }
 #mainNav .navbar-brand
 {font-weight:700;color:#018CB9;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#018CB9}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{font-size:1rem;font-weight:600;color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#ffdf00}#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#ffdf00 !important;background-color:transparent}#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}
 @media (min-width:992px){
     #mainNav{
         border-color:transparent;background-color:#024b78;
     }#mainNav .navbar-brand{color:rgba(255,255,255,.7)}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#ffdf00}
     
     #mainNav.navbar-shrink {
    background-color: #024b78;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #F05F40;
  }
  #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
    color: #f05f40;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link {
    color: #fff;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #fff;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: #ffdf00;
  }
     
 }

 #mainnav2{
     background-color:#FFDF00;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-transition:all .2s;transition:all .2s
 }
 #mainnav2 .navbar-brand
 {font-weight:700;color:#018CB9;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}#mainnav2 .navbar-brand:focus,#mainnav2 .navbar-brand:hover{color:#018CB9}#mainnav2 .navbar-nav>li.nav-item>a.nav-link,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus{font-size:.9rem;font-weight:700;color:#212529}#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:hover{color:#018CB9}#mainnav2 .navbar-nav>li.nav-item>a.nav-link.active,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#018CB9 !important;background-color:transparent}#mainnav2 .navbar-nav>li.nav-item>a.nav-link.active:hover,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}
 @media (min-width:992px){
     #mainnav2{
         border-color:transparent;background-color:#018CB9;
     }#mainnav2 .navbar-brand{color:rgba(255,255,255,.7)}#mainnav2 .navbar-brand:focus,#mainnav2 .navbar-brand:hover{color:#fff}#mainnav2 .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}#mainnav2 .navbar-nav>li.nav-item>a.nav-link,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus{color:#fff}#mainnav2 .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainnav2 .navbar-nav>li.nav-item>a.nav-link:hover{color:#6ddbff}}

header.masthead{padding-top:10rem;padding-bottom:calc(10rem - 56px);background-image:url(../img/headerpolarinkblue1366.png);background-position:center center;background-size:cover}
header.masthead hr{margin-top:30px;margin-bottom:30px}
header.masthead h1{font-size:2rem}
header.masthead p{font-weight:300}
@media (min-width:768px){header.masthead p{font-size:1.15rem}}

@media (min-width:992px){header.masthead{height:100vh;min-height:650px;padding-top:0;padding-bottom:0}
header.masthead h1{font-size:3rem}}

@media (min-width:1200px){header.masthead h1{font-size:4rem}}

.service-box{max-width:400px}
.portfolio-box{position:relative;display:block;max-width:650px;margin:0 auto}
.portfolio-box .portfolio-box-caption{position:absolute;bottom:0;display:block;width:100%;height:100%;text-align:center;opacity:0;color:#fff;background:rgba(1,140,185,1);-webkit-transition:all .2s;transition:all .2s}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{padding:0 15px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:14px;font-weight:600;text-transform:uppercase}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:18px}
.portfolio-box:hover .portfolio-box-caption{opacity:0.8}
.portfolio-box:focus{outline:0}

@media (min-width:768px){
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:16px}
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:22px}
}


.text-primary{color:#018CB9!important}
.text-primary2{color:#FFDF00!important}
.text-primary3{color:#024b78!important}

    .btn{font-weight:700;text-transform:uppercase;border:none;border-radius:300px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.btn-xl{padding:1rem 2rem}

    .btn-primary{background-color:#018CB9;border-color:#018CB9}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#018CB9;background-color:#FFDF00!important}.btn-primary:active,.btn-primary:focus{-webkit-box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important;box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important}

    .btn-primary2{background-color:#FFDF00;border-color:#018CB9;color:#000;}.btn-primary2:active,.btn-primary2:focus,.btn-primary2:hover{color:#fff;background-color:#018cb9!important}.btn-primary2:active,.btn-primary2:focus{-webkit-box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important;box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important}
    
    .btn-primary3{background-color:#024b78;border-color:#FFDF00;color:#fff!important;}.btn-primary3:active,.btn-primary3:focus,.btn-primary3:hover{color:#024b78!important;background-color:#FFDF00!important}.btn-primary3:active,.btn-primary3:focus{-webkit-box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important;box-shadow:0 0 0 .2rem rgba(1,140,185,1)!important}
    
    .dropdown:hover .dropdown-menu {
    display: block ;
    margin-top: 0px ; 

 }
    
    .dropdown-item{font-size:0.9rem;font-weight:400;COLOR:#024b78}.dropdown-item:hover,.dropdown-item:active,.dropdown-item:focus{COLOR:#fff!important;background-color:#024b78!important;}
    
    
    .btn-square{border-radius:0px !important; display: block;width: 100%;}
    
    .btn-trapezoid{
        clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    }
    .btn-trapezoid-reverse-mid{
        clip-path: polygon(15% 100%, 85% 100%, 100% 0, 0 0);
    }
    .btn-trapezoid-left{
        clip-path: polygon(0 100%, 100% 100%, 85% 0, 0 0);
    }
    .btn-trapezoid-reverse-right{
        clip-path: polygon(15% 100%, 100% 100%, 100% 0, 0 0);
    }
    /* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 1080px) {
  .btn-text-responsive {
    font-size: 1.25vw !important;
  }
}


    
    .btn-hover {
    color: #fff;
    cursor: pointer;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 0px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    color: #fff;
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
    color: #fff;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(to right, #FFDF00, #ff9a44, #ef9d43, #FFDF00);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-9v2 {
    background-image: linear-gradient(to right, #25aae1, #024b78, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-9v2a {
    background-image: linear-gradient(to right, #024b78, #25aae1, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
.btn-hover.color-12 {
        background-image: linear-gradient(to right, #024b78, #4481eb, #018cb9, #3f86ed); box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-13 {
    background-image: linear-gradient(to right, #ffdf00, #f5ce62, #f5ce62, #ffdf00);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-14 {
    background-image: linear-gradient(to right, #e3e3e3, #485563, #f5ce62, #ffdf00);
}
.btn-hover.color-15 {
    background-image: linear-gradient(to right, #024b78, #018cb9, #018cb9, #3f86ed);
}
.btn-hover.color-15a {
    background-image: linear-gradient(to right, #018cb9, #024b78, #024b78, #3f86ed);
}


    
.dynafont {
	font-size: 16px !important;
	
}

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 90%;
  z-index:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 4px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;	
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #018CB9;
  color:#FFDF00;
}

.facebook {
  background: #3B5998;
  color: white;
}


.youtube {
  background: #bb0000;
  color: white;
}

/* CLAIMS */
.claims-bar {
  position: fixed;
  top: 55%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.claims-bar button {
  display: block;
  text-align: center;
  padding: 4px;
  transition: all 0.3s ease;
  background-color: #018cb9;
  color: white;
  font-size: 16px;
}

.claims-button {
  background: #FFDF00;
  color: #018cb9;
  border: none;
  font-size: 20px !important;
}

.claims-bar button:hover {
  background-color: #FFDF00;
  color:#018cb9;
}

/* The side navigation menu */
.sidenav {
  height: 43%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index:1; /* Stay on top */
  top: 34%; /* Stay at the top */
  left: 0;
  background-color: white; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden; /* Disable vertical scroll */
  transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */
  background-image: url('../img/homebg.jpg');
}

/* The navigation menu links */
.sidenav a {
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: block;
  transition: 0.5s;
  transform: translate(0%, 180%);	
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #018CB9;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  z-index:5;
  top: -40%;
  right: 25px;
  font-size: 36px;
  margin-left: 70px;
  color: #018cb9;
}

.sidenav .closebtn:hover {
  color: #FFDF00;
}

/* FEEDBACK */
.feedback-bar {
  position: fixed;
  top: 55%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.feedback-bar a {
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 4px;
  transition: all 0.3s ease;
  background-color: #018cb9;
  color: white;
  font-size: 16px;
}

.feedback-button {
  background: #FFDF00;
  color: #018cb9;
  border: none;
  font-size: 20px !important;
}

.feedback-bar a:hover {
  background-color: #02C4FF;
  color: white;
}
.feedback-button a:hover {
  background-color: #02C4FF;
  color: white;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 375px) {
  
	.sidenav {
		padding-top:150px;
		
	}
	
	.sidenav .closebtn {
		top:100px;
		
	}
	
	
}
	

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
.loader {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
}

.loader > img {
    width: 100px;
}

.loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.thumb {
    height: 100px;
    border: 1px solid black;
    margin: 10px;
}


.preloader-1 {
  margin: 100px auto 0;
  width: 310px;
}


.loaderdiv {
  color: cadetblue;
  text-transform: uppercase;
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 17px;
  letter-spacing: 1px;
	text-align: center;
	
}

.preloader-1 .line {
  width: 10px;
  height: 50px;
  background: #E1E117;
  margin: 0 10px;
  display: inline-block;
  animation: opacity-1 1000ms infinite ease-in-out;
	
}



.preloader-1 .line-1, .preloader-2 .line-1 { animation-delay: 800ms; }
.preloader-1 .line-2, .preloader-2 .line-2 { animation-delay: 600ms; }
.preloader-1 .line-3, .preloader-2 .line-3 { animation-delay: 400ms; }
.preloader-1 .line-4, .preloader-2 .line-4 { animation-delay: 200ms; }
.preloader-1 .line-6, .preloader-2 .line-6 { animation-delay: 200ms; }
.preloader-1 .line-7, .preloader-2 .line-7 { animation-delay: 400ms; }
.preloader-1 .line-8, .preloader-2 .line-8 { animation-delay: 600ms; }
.preloader-1 .line-9, .preloader-2 .line-9 { animation-delay: 800ms; }

@keyframes opacity-1 { 
  0% { 
    opacity: 1;
  }
  50% { 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }  
}

@keyframes opacity-2 { 
  0% { 
    opacity: 1;
    height: 15px;
  }
  50% { 
    opacity: 0;
    height: 12px;
  }
  100% { 
    opacity: 1;
    height: 15px;
  }  
}	  

/* Carousel */

.carousel-inner > .carousel-item > img {
  min-width: 100%;
  width: 100%;
}



#carousel-example-generic {

    width: 100%;
}

#carousel-custom {

    width: 100%;
}
#carousel-custom .carousel-indicators {
    padding-bottom:50px;
    margin: 20px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: #018cb9;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 5px !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}

/* Carousel End */
/* Youtube Carousel */
#ytCarousel {
     background-color: black;
  margin-left: 35px;
  margin-right: 35px;
 margin: 5px
}
#ytprev {
  margin-left: -59px;
}

#ytnext {
  margin-right: -59px;
}
/* Youtube Carousel End */

/* fancybox */
 a[data-fancybox] img {
  cursor: zoom-in;
}

.fancybox__backdrop::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  filter: blur(2px);
  left: 50%;
  top: 50%;
  transform: scale(11);
  opacity: 0.7;
  background-image: var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.fancybox__container {
  --fancybox-bg: #e3e3e3;

  --fancybox-thumbs-width: 48px;
  --fancybox-thumbs-ratio: 1;

  --carousel-button-bg: rgb(91 78 76 / 74%);

  --carousel-button-svg-width: 24px;
  --carousel-button-svg-height: 24px;

  --carousel-button-svg-stroke-width: 2.5;
}

.fancybox__nav {
  --carousel-button-svg-width: 24px;
  --carousel-button-svg-height: 24px;
}

.fancybox__nav .carousel__button.is-prev {
  left: 20px;
}

.fancybox__nav .carousel__button.is-next {
  right: 20px;
}

.carousel__button.is-close {
  right: auto;
  top: 20px;
  left: 20px;
}

.fancybox__slide {
  padding: 8px 88px;
}

/* Thumbnails */
.fancybox__thumbs .carousel__slide {
  padding: 8px 8px 16px 8px;
}

.is-nav-selected::after {
  display: none;
}

.fancybox__thumb {
  border-radius: 6px;
  opacity: 0.4;
}

.fancybox__thumb:hover,
.is-nav-selected .fancybox__thumb {
  border-radius: 6px;
  opacity: 1;
}

.is-nav-selected .fancybox__thumb::after {
  display: none;
}

img.fancybox-btn {

    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}

.gallery-transition {
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

/* checkout */
/*floating cart button */
   .expand_button{

            position: fixed;
            bottom: 94px;
            right: 24px;
            z-index: 1099;
         }
    
       .e-button{

    position: relative;
    float: left;
    overflow: hidden;
    max-width: 60px;
    max-height: 60px;
    padding: 12px 12px;
    border-radius: 30px;
    font-size: 24px;

    -webkit-transition: max-width 0.3s ease-in-out;
    -moz-transition: max-width 0.3s ease-in-out;
    -o-transition: max-width 0.3s ease-in-out;
    transition: max-width 0.3s linear;
}
.e-button-text{
    display:block;
    white-space:nowrap;

}

.e-button:hover{

    max-width: 480px;
}
        
.e-badge{

 position: absolute; 
 top: -6px;
 right: -6px;
 font-size: 16px;
}        
/* sidebar */

.bs-canvas-overlay {
   		opacity: 0;
		z-index: -1;
	}
	
	.bs-canvas-overlay.show {
   		opacity: 0.85;
		z-index: 1100;
	}
	
	.bs-canvas-overlay, .bs-canvas {
		transition: all .4s ease-out;
		-webkit-transition: all .4s ease-out;
		-moz-transition: all .4s ease-out;
		-ms-transition: all .4s ease-out;
	}
	
	.bs-canvas {
		top: 0;
		z-index: 1110;
		overflow-x: hidden;
		overflow-y: auto;
		width: 330px;		

	}
	
	.bs-canvas-left {
		left: 0;
		margin-left: -330px;
	}
	
	.bs-canvas-right {
		right: 0;
		margin-right: -330px;
	}