body {font-family: Verdana, Arial, Helvetica, sans-serif;}
.opacity-1 {opacity: 0.1 !important;}
.opacity-2 {opacity: 0.2 !important;}
.opacity-3 {opacity: 0.3 !important;}
.opacity-4 {opacity: 0.4 !important;}
.opacity-5 {opacity: 0.5 !important;}
.opacity-6 {opacity: 0.6 !important;}
.opacity-7 {opacity: 0.7 !important;}
.opacity-8 {opacity: 0.8 !important;}
.opacity-9 {opacity: 0.9 !important;}
.title-line {
    background-color: #E3E3E3;
    border-color: #ff1949;
    border-style: solid;
    height: 5px;
    width: 90%;
    position: absolute;
    border-width: 0px 0px 0px 200px;
}

 #wrapper {
    overflow-x: hidden;
 }
#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}
.border-left-primary{border-left:.25rem solid #4e73df!important}.border-bottom-primary{border-bottom:.25rem solid #4e73df!important}.border-left-secondary{border-left:.25rem solid #858796!important}.border-bottom-secondary{border-bottom:.25rem solid #858796!important}.border-left-success{border-left:.25rem solid #1cc88a!important}.border-bottom-success{border-bottom:.25rem solid #1cc88a!important}.border-left-info{border-left:.25rem solid #36b9cc!important}.border-bottom-info{border-bottom:.25rem solid #36b9cc!important}.border-left-warning{border-left:.25rem solid #f6c23e!important}.border-bottom-warning{border-bottom:.25rem solid #f6c23e!important}.border-left-danger{border-left:.25rem solid #e74a3b!important}.border-bottom-danger{border-bottom:.25rem solid #e74a3b!important}.border-left-light{border-left:.25rem solid #f8f9fc!important}.border-bottom-light{border-bottom:.25rem solid #f8f9fc!important}.border-left-dark{border-left:.25rem solid #5a5c69!important}.border-bottom-dark{border-bottom:.25rem solid #5a5c69!important}

.zoom_box {padding: 50px;background-color: green;transition: transform .2s; /* Animation */margin: 0 auto;}
.zoom_box:hover{transform: scale(0.9);box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}
.parallax { min-height: 200px;  background-attachment: fixed;background-position: center; background-repeat: no-repeat;background-size: cover; filter: opacity(60%);}

.letter-spacing--1{letter-spacing:-1px;}.letter-spacing-1{letter-spacing:1px;}.letter-spacing-2{letter-spacing:2px;}.letter-spacing-3{letter-spacing:3px;}.letter-spacing-4{letter-spacing:4px;}.letter-spacing-4{letter-spacing:5px;}
@media screen and (max-width: 500px) 
{
.overlap-to-top {position:relative; top:-30px; border-radius:20px 20px 0px 0px; box-shadow:0px 0px 5px; }
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
/* Style the back side */
.flip-card-back {background-color: dodgerblue;color: white;transform: rotateY(180deg);}
/*--------Scroll To Top----------*/
#myBtn{display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding:5px;border-radius:50%;}
#myBtn:hover{ background-color: #009900;}

/*Zoomon and out animation */
.flow-animate{width:45px;height:45px;background:#ff0000;position:relative;color:green; border-radius:50%;text-align: center; z-index: 99999999;}
.flow-animate:after{-webkit-animation: zoomin 2s ease-in infinite;animation: zoomin 2s ease-in infinite; transition: all .0s ease-in-out;width:45px;height:45px;position: absolute;top: 0;left: 0;content: '';display: block;z-index: -1;background:red; border-radius:50%;}
@-webkit-keyframes zoomin {
   0% {transform: scale(1);opacity: 0.8;}
   50% {transform: scale(1.5); opacity: 0;}
   100% {transform: scale(1); opacity: 0;}}
 @keyframes zoomin {
   0% {transform: scale(1); opacity: 0.8;}
   50% {transform: scale(1.5); opacity: 0;}
   100% {transform: scale(1); opacity: 0;}} /*End of Zoom in Keyframes */
 /* Zoom out Keyframes */
 @-webkit-keyframes zoomout {
   0% {transform: scale(1); opacity: 0;}
   50% {transform: scale(0.67); opacity: 0.5;}
   100% {transform: scale(1); opacity: 1;}}
 @keyframes zoomout {
   0% {transform: scale(1); opacity: 0;}
   50% {transform: scale(0.67); opacity: 0.5;}
   100% {transform: scale(1); opacity: 1;}}/*End of Zoom out Keyframes */
 /*Style for the text*/
.flow-animate a{
	text-decoration:none;
}
.flow-animate span{
	font-size: 30px;
}

.theme-l5 {color:#000 !important; background-color:#faf1f3 !important}
    .theme-l4 {color:#000 !important; background-color:#eecfd6 !important}
    .theme-l3 {color:#000 !important; background-color:#dea0ac !important}
    .theme-l2 {color:#fff !important; background-color:#cd7083 !important}
    .theme-l1 {color:#fff !important; background-color:#bb425a !important}
    .theme-d1 {color:#fff !important; background-color:#7e2c3c !important}
    .theme-d2 {color:#fff !important; background-color:#702736 !important}
    .theme-d3 {color:#fff !important; background-color:#62222f !important}
    .theme-d4 {color:#fff !important; background-color:#541d28 !important}
    .theme-d5 {color:#fff !important; background-color:#461922 !important}
    
    .theme-light {color:#000 !important; background-color:#faf1f3 !important}
    .theme-dark {color:#fff !important; background-color:#461922 !important}
    .theme-action {color:#fff !important; background-color:#461922 !important}
    
    .theme {color:#fff !important; background-color:#8c3143 !important}
    .text-theme {color:#8c3143 !important}
    .border-theme {border-color:#8c3143 !important}
    
    .hover-theme:hover {color:#fff !important; background-color:#8c3143 !important}
    .hover-text-theme:hover {color:#8c3143 !important}
    .hover-border-theme:hover {border-color:#8c3143 !important}
    .blink {
      animation: blinker 1.2s linear infinite;
      color: red;          /* optional: set default color */
      font-weight: bold;   /* optional */
    }
    
    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }