@charset "UTF-8";
/*===================================================*/
/*VARIABLE DECLARATION*/
/*===================================================*/
/*===================================================*/
/*Color Variables*/
/*===================================================*/
/*===================================================*/
/*Card Parameter Variables*/
/*===================================================*/
/*===================================================*/
/*Padding Variables*/
/*===================================================*/
/*===================================================*/
/*Margin  Variables*/
/*===================================================*/
/*===================================================*/
/*Extras*/
/*===================================================*/
/*===================================================*/
/*END OF VARIABLE DECLARATION*/
/*===================================================*/
/*===================================================*/
/*Design Principles Yocket
=====================================================
*/
/*---------------------------------------------------*/
/* Table of Contents 
-----------------------------------------------------
  1.Typography
  2.Scrollbar and overflow styling
  3.Button Styling
  4.Card Styling
  5.Badges Colors
  6.Image Filters
  7.Horizontal Scroll Flexbox
  8.Accordion
  9.Padding Classes
  10.Margin Classes 
  11.Background Color Classes (.bg-* = * is the color)
  12.Font Color Classes (.* = * is the color)
  13.Label Classes
  14.Extra Classes

=====================================================*/
html {
  overflow: scroll;
  overflow-x: hidden;
}

/*===================================================*/
/*  1.Typography*/
/*===================================================*/
h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 30px;
}

h3,
.h3 {
  font-size: 24px;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 14px;
}

h6,
.h6 {
  font-size: 12px;
}

p {
  font-size: 18px;
}

/*===================================================*/
/*  2.Scrollbar and overflow styling*/
/*===================================================*/
::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
  display: none;
}

/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

/*===================================================*/
/*  3.Button styling*/
/*===================================================*/
.btn {
  padding: 10px 30px;
  border-radius: 0px;
  font-size: 15px;
}

.btn-inverted {
  color: #000;
  padding: 5px 25px;
  border-radius: 0px;
  font-size: 15px;
  background: #fff;
  border: 3px solid #ff9800;
}

.btn:hover {
  background: #fff;
  color: #ff9800;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  border: 2px solid #ff9800;
}

.btn-primary:hover {
  background: #fff;
  color: #ff9800;
  transition: all 0.2s ease-in-out;
  border: 2px solid #ff9800;
}

a .btn-primary:active,a .btn-primary:active,a .btn-primary:visited {
  background-color: #ff9800;
  border: 2px solid #ff9800;
}

.btn-info {

}

.btn-info:hover {
  background: #fff;
  color: #000;
  transition: all 0.2s ease-in-out;
}

a .btn-info:active,a .btn-info:active,a .btn-info:visited {
  background-color: #2196f3;
  border: 2px solid #2196f3;
}

.btn-warning {
  border: 2px solid #ffd54f;
}

.btn-warning:hover {
  background: #fff;
  color: #ffd54f;
  transition: all 0.2s ease-in-out;
  border: 2px solid #ffd54f;
}

a .btn-warning:active,a .btn-warning:active,a .btn-warning:visited {
  background-color: #ffd54f;
  border: 2px solid #ffd54f;
}

.btn-success {
  border: 2px solid #8bc34a;
}

.btn-success:hover {
  background: #fff;
  color: #8bc34a;
  transition: all 0.2s ease-in-out;
  border: 2px solid #8bc34a;
}

a .btn-success:active,a .btn-success:active,a .btn-success:visited {
  background-color: #8bc34a;
  border: 2px solid #8bc34a;
}

.rounded {
  border-radius: 30px;
}

.btn-danger {
  border: 2px solid #ff5722;
}

.btn-danger:hover {
  background: #fff;
  color: #ff5722;
  transition: all 0.2s ease-in-out;
  border: 2px solid #ff5722;
}

a .btn-danger:active,a .btn-danger:active,a .btn-danger:visited {
  background-color: #ff5722;
  border: 2px solid #ff5722;
}

.btn-teal {
  border: 2px solid #009688;
}

.btn-teal:hover {
  background: #fff;
  color: #009688;
  transition: all 0.2s ease-in-out;
  border: 2px solid #009688;
}

a .btn-teal:active,a .btn-teal:active, a .btn-teal:visited {
  background-color: #009688;
  border: 2px solid #009688;
}

.btn-purple {
  border: 2px solid #9c27b0;
}

.btn-purple:hover {
  background: #fff;
  color: #9c27b0;
  transition: all 0.2s ease-in-out;
  border: 2px solid #9c27b0;
}

a .btn-purple:active,a .btn-purple:active, a .btn-purple:visited {
  background-color: #9c27b0;
  border: 2px solid #9c27b0;
}

.btn-link{
  border: 0px !important;
}

/*===================================================*/
/*  4.Card styling */
/*===================================================*/
.card {
  display: block;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.25s;
}

.card-horizontal .img-card {
  padding: 0px;
  margin: 0px;
}

.card-horizontal .card-content {
  padding: 12px;
}

.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.img-card {
  height: 200px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  display: block;
  overflow: hidden;
}

.img-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all 0.25s ease;
}

.card-content {
  padding: 15px;
  text-align: left;
}

.card-title {
  margin-top: 0px;
  font-weight: 700;
  font-size: 1.65em;
}

.card-title a {
  color: #000;
  text-decoration: none !important;
}

.card-read-more {
  border-top: 1px solid #D4D4D4;
}

.card-read-more a {
  text-decoration: none !important;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/*small card*/
.card-vsmall {
  min-height: 150px !important;
}

.card-small {
  /* min-height: 300px !important; */
}

.card-large {
  min-height: 500px !important;
}

.card-small .img-card {
  height: auto;
}

.card-small .card-title {
  margin-top: 0px;
  font-weight: 700;
  font-size: 1.45em;
}

.card .badge {
  position: absolute;
  border-radius: 0px;
  padding: 10px 35px;
  margin-top: 10px;
}

/*===================================================*/
/*  5.Badges Colors */
/*===================================================*/
.badge-primary {
  color: #fff;
  background: #ff9800;
}

.badge-info {
  color: #fff;
  background: #ff9800;
}

.badge-danger {
  color: #fff;
  background: #ff5722;
}

.badge-success {
  color: #fff;
  background: #8bc34a;
}

.badge-warning {
  color: #fff;
  background: #ffd54f;
}

.badge-teal {
  color: #fff;
  background: #009688;
}

.badge-purple {
  color: #fff;
  background: #9c27b0;
}

/*===================================================*/
/*  6.Image filters */
/*===================================================*/
.bg-grayscale {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.bg-blur {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

.bg-dark {
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
}

/*===================================================*/
/*  7.Horizontal Scroll Container (Flexbox) */
/*===================================================*/
.scrolling-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scrolling-wrapper .card-vsmall {
  flex: 0 0 auto;
}

.scrolling-wrapper .card-small {
  flex: 0 0 auto;
}

.scrolling-wrapper .card-large {
  flex: 0 0 auto;
}

/*===================================================*/
/*  8.Accordian */
/*===================================================*/
.wrap {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 8px 10px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.accordion .panel {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}

.accordion .panel:last-child {
  border-bottom: none;
}

.accordion .panel-group > .panel:first-child .panel-heading {
  border-radius: 4px 4px 0 0;
}

.accordion .panel-group .panel {
  border-radius: 0;
}

.accordion .panel-group .panel + .panel {
  margin-top: 0;
}

.accordion-success .panel-heading {
  background-color: #fff;
  color: #000;
}

.accordion .panel-heading {
  background-color: #ff9800;
  border-radius: 0;
  border: none;
  color: #fff;
  padding: 5px 10px;
}

.accordion .panel-title a {
  display: block;
  color: #fff;
  padding: 15px;
  position: relative;
  font-size: 18px;
  font-weight: 500;
}

.accordion .panel-body {
  background: #fff;
}

.accordion .panel:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}

.accordion .panel:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  transition: border-radius 0.3s linear 0.2s;
}

.accordion .panel:last-child .panel-heading.active {
  border-radius: 0;
  transition: border-radius linear 0s;
}

/* #bs-collapse icon scale option */
.accordion .panel-heading a:before {
  content: "";
  position: absolute;
  font-family: "Material Icons";
  right: 5px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.accordion .panel-heading.active a:before {
  content: " ";
  transition: all 0.5s;
  transform: scale(0);
}

.accordion #bs-collapse .panel-heading a:after {
  content: " ";
  font-size: 24px;
  position: absolute;
  font-family: "Material Icons";
  right: 5px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

.accordion #bs-collapse .panel-heading.active a:after {
  content: "";
  transform: scale(1);
  transition: all 0.5s;
}

/* #accordion rotate icon option */
.accordion #accordion .panel-heading a:before {
  content: "※";
  font-size: 24px;
  position: absolute;
  font-family: "Material Icons";
  right: 5px;
  top: 10px;
  transform: rotate(180deg);
  transition: all 0.5s;
}

.accordion #accordion .panel-heading.active a:before {
  transform: rotate(0deg);
  transition: all 0.5s;
}

/*===================================================*/
/*  9.Padding Classes */
/*===================================================*/
.pad {
  padding: 10px;
}

.pad-2x {
  padding: 20px;
}

.pad-4x {
  padding: 40px;
}

/*===================================================*/
/*  10.Margin Classes */
/*===================================================*/
.mar {
  margin: 10px;
}

.mar-2x {
  margin: 20px;
}

.mar-4x {
  margin: 40px;
}

/*===================================================*/
/*  11.Background Color Classes */
/*===================================================*/
.bg-red {
  background: #f44336;
  color: #fff;
}

.bg-pink {
  background: #e91e63;
  color: #fff;
}

.bg-purple {
  background: #9c27b0;
  color: #fff;
}

.bg-deepPurple {
  background: #673ab7;
  color: #fff;
}

.bg-indigo {
  background: #3f51b5;
  color: #fff;
}

.bg-blue {
  background: #2196f3;
  color: #fff;
}

.bg-lightBlue {
  background: #03a9f4;
  color: #fff;
}

.bg-cyan {
  background: #00bcd4;
  color: #fff;
}

.bg-teal {
  background: #009688;
  color: #fff;
}

.bg-green {
  background: #4caf50;
  color: #fff;
}

.bg-lightGreen {
  background: #8bc34a;
  color: #fff;
}

.bg-lime {
  background: #cddc39;
  color: #fff;
}

.bg-yellow {
  background: #ffeb3b;
  color: #fff;
}

.bg-amber {
  background: #ffc107;
  color: #fff;
}

.bg-orange {
  background: #ff9800;
  color: #fff;
}

.bg-brown {
  background: #795548;
  color: #fff;
}

.bg-gray {
  background: #9e9e9e;
  color: #fff;
}

/*===================================================*/
/*  12.Font Color Classes */
/*===================================================*/
.red {
  color: #f44336;
}

.pink {
  color: #e91e63;
}

.purple {
  color: #9c27b0;
}

.deepPurple {
  color: #673ab7;
}

.indigo {
  color: #3f51b5;
}

.blue {
  color: #2196f3;
}

.lightBlue {
  color: #03a9f4;
}

.cyan {
  color: #00bcd4;
}

.teal {
  color: #009688;
}

.green {
  color: #4caf50;
}

.lightGreen {
  color: #8bc34a;
}

.lime {
  color: #cddc39;
}

.yellow {
  color: #ffeb3b;
}

.amber {
  color: #ffc107;
}

.orange {
  color: #ff9800;
}

.brown {
  color: #795548;
}

.gray {
  color: #9e9e9e;
}

/*===================================================*/
/*  13.Label Classes */
/*===================================================*/
.label {
  font-size: 14px;
  padding: 2.5px 15px;
}

.label-default {
  color: #fff;
  background: #bdbdbd;
}

.label-primary {
  color: #fff;
  background: #ff9800;
}

.label-info {
  color: #fff;
  background: #2196f3;
}

.label-danger {
  color: #fff;
  background: #ff5722;
}

.label-warning {
  color: #fff;
  background: #ffd54f;
}

.label-success {
  color: #fff;
  background: #8bc34a;
}

.label-teal {
  color: #fff;
  background: #009688;
}

/*===================================================*/
/*  14.Extra Classes */
/*===================================================*/
.center {
  margin: 0 auto;
}

/*===================================================*/
/*  15.Lazy load image css */
/*===================================================*/
img{
  background: white;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px; 
  display: inline-block;
  position: relative; 
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeholderShimmer;
  -webkit-animation-timing-function: linear;
}

.img-loader{
  -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
  animation-play-state: paused;
}

@-webkit-keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  
  100% {
    background-position: 468px 0; 
  }
}


.wrap-element{
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  }
  .wrapped-iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  }