/*!
Theme Name: Gullf Job Central
Theme URI: http://gulfojbcentral.com/
Author: Basudev
Author URI: http://basudevkunwar.com.np/
Description: Job Website
Version: 1.2.0
Tested up to: 7.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gulfjob
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

gulfjob is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* WordPress Core
-------------------------------------------------------------- */

:root {
  --angle: 45deg;
  --opacity: 0.5;
}

.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

.sidebar.widget {
  background: #f2f2f2;
  border: 1px solid #ddd;
  padding: 10px 20px;
}
.sidebar.widget ul {
    margin: 0px;
    padding: 0;
    overflow: hidden;
}
.sidebar.widget ul li {
    overflow: hidden;
    font-size: 12px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 20px
}
.sidebar-thumb{
    float: left;
    overflow: hidden;
    margin-right: 15px;
}
.sidebar-thumb img{
  background: #fff;
  border: 1px dashed #e0e0e0;
  padding: 6px;
  height: 85px;
  width: 85px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
.sidebar-content h6{ 
	color: #300864;
    cursor: pointer;
    line-height: 24px;
}
.sidebar-content h6 a:hover{ 
  color: #2996bd;
}

.sidebar-content h6 a{ 
    color: #300864;
    outline: 0 none;
    text-decoration: none;
    font-weight: bold
}
.sidebar-meta{
  margin-top: 10px;
}
.sidebar-meta span{
  color: #2e2e2e;
}
.sidebar-meta span.time{
  margin-right: 10px;
}
.sidebar-meta span i{
  color: #2996bd
}

/* recent job home */ 

.bg-primary-medium {
  background-color: #ebedff !important;
}

section {
  padding: 30px 0;
  overflow: hidden;
  background: #fff;
  position: relative;
}

.section-heading3 {
  margin-bottom: 50px;
  text-align: center;
}
.section-heading3 h2 {
  position: relative;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  line-height: 30px;
  font-size: 30px;
  width: 50%;
  margin: 0 auto 15px;
}
.section-heading3 p {
  margin-bottom: 0;
  width: 50%;
  margin: 0 auto;
  font-size: 18px;
}
@media screen and (max-width: 1199px) {
  .section-heading3 h2 {
  width: 60%}
.section-heading3 p {
  width: 70%}
}@media screen and (max-width: 991px) {
  .section-heading3 {
  margin-bottom: 40px;
}
.section-heading3 h2{
  font-size: 28px;
  width: 70%}
.section-heading3 p {
  width: 90%}
}@media screen and (max-width: 767px) {
  .section-heading3 {
  margin-bottom: 30px;
}
.section-heading3 h2 {
  font-size: 26px;
  margin: 0 auto 10px;
  width: 90%}
.section-heading3 p {
  width: 100%;
  font-size: 16px;
}
}@media screen and (max-width: 575px) {
.section-heading3 h2 {
  width: 100%}
}.section-heading4 {
  margin-bottom: 50px;
  text-align: center;
}

.mt-n1-9 {
  margin-top: -1.9rem !important;
}

.mt-1-9{
  margin-top: 1.9rem;
}

.p-1-6 {
  padding: 1.6rem;
}

.border-color-extra-light-gray {
  border-color: #ededed !important;
}

.border-radius-5 {
  border-radius: 10px;
}

.recent-job-style2{
  color:red;
}

.recent-job-style2 .job-company-logo {
  width: 80px;
  height: 80px;
  text-align: center;
  border: 1px solid #fffbfb;
  padding: 1px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 0px 40px rgb(56 152 226 / 30%);
}

.recent-job-style2 .job-company-logo img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.recent-job-style2 .job-company-logo img:hover{
  -webkit-transform: scale(1.08);
      -ms-transform: scale(1.08);
          transform: scale(1.08);
}

.recent-job-style2 .job-company-logo.radius-10 {
  border-radius: 10px;
}
.recent-job-style2 .butn {
  max-width: 110px;
  width: 100%;
  text-align: center;
}
.recent-job-style2 .company-info {
  position: relative;
  font-size: 14px;
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
  background: rgba(38, 174, 97, 0.12);
  color: #26ae61;
}
.recent-job-style2 .company-info.radius-10 {
  border-radius: 10px;
}
.recent-job-style2 .job-favourite {
  display: inline-block;
  position: relative;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 2px solid #eeeeee;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 14px;
  color: #969696;
}
.recent-job-style2 .job-favourite:hover {
  color: #ffffff;
  background: #e74c3c;
  border: 2px solid #e74c3c;
}
@media screen and (max-width: 991px) {
  .recent-job-style2 .job-company-logo {
  margin: 0 auto 25px;
}
.recent-job-style2 .job-favourite {
  height: 35px;
  width: 35px;
  line-height: 34px;
}
}
@media screen and (max-width: 575px) {
  .recent-job-style2 .job-company-logo {
  width: 75px;
  height: 75px;
  margin: 0 auto 20px;
  padding: 1px;
}
}

.recent-job-style2 .company-info {
  margin-top: 8px;
}


.butn.butn-md {
  padding: 12px 17px !important;
}
.butn {
  background: #26ae61;
  cursor: pointer;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  line-height: 15px;
  padding: 15px 25px !important;
  border-radius: 10px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  transition: all linear 300ms;
  border: none;
}

.butn:hover, .butn:active, .butn:focus {
  color: #fff;
  background: #fe9703;
}

.ani-top-bottom {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: TopBottom;
  animation-timing-function: ease-in-out;
}

.right-5 {
  right: 5%;
  left: inherit;
}

.top-5 {
  top: 5%;
  bottom: inherit;
}

.ani-left-right {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: LeftRight;
  animation-timing-function: ease-in-out;
}

.bottom-n5 {
  bottom: -5%;
  top: inherit;
}

.left {
  left: 0;
}

.z-index-3 {
  z-index: 3;
}

@keyframes LeftRight {
  0% {
  transform: translate(0px,  0px);
}
65% {
  transform: translate(30px,  0);
}
100% {
  transform: translate(0px,  0px);
}
}

@keyframes TopBottom {
  0% {
  transform: translate(0px,  0px);
}
65% {
  transform: translate(0,  30px);
}
100% {
  transform: translate(0px,  0px);
}
}

/* News Ticker*/

.breaking-news-ticker{
  display: block;
  width: 100%;
  border: solid 1px #ce2525;
  background: #FFF;
  height: 40px;
  box-sizing: border-box;
  position: relative;
  line-height: 40px;
  overflow: hidden;
  border-radius: 2px;
  text-align: auto;
  font-size: 14px;
}
.breaking-news-ticker *{
  box-sizing: border-box;
}
.breaking-news-ticker.bn-fixed-top{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.breaking-news-ticker.bn-fixed-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}





/*********************************/
/*title styles start**************/
.bn-label{
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
  background-color: #ce2525;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  z-index: 3;
  padding: 0 15px;
  white-space: nowrap;
}
/*title styles end****************/



/*********************************/
/*news item style start **********/
.bn-news{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  right: 0;
  overflow: hidden;
}
.bn-news ul{
  display: block;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
}
.bn-news ul li{
  white-space: nowrap;
  overflow:hidden !important;
  text-overflow: ellipsis;
  text-decoration: none;
  -webkit-transition: color .2s linear;
  -moz-transition: color .2s linear;
  -o-transition: color .2s linear;
  transition: color .2s linear;
  position: absolute;
  width: 100%;
  display: none;
  color: #333;
}
.bn-news ul li a{
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  padding: 0 10px;
  color: #333;
  position: relative;
  display: block;
  overflow: hidden;
}
.bn-news ul li a:hover{
  color: #069;
}
.bn-loader-text{
  padding: 0 10px;
}
.bn-seperator{
  display: inline-block;
  float: left;
  margin-right: 15px;
  width: 30px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
.bn-seperator.bn-news-dot{
  margin-right: 0;
}
.bn-seperator.bn-news-dot:after{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  margin-top: -4px;
  left: 50%;
  margin-left: -4px;
}
.bn-prefix{
  color: #d65d7a;
  margin-right: 15px;
  padding-left: 10px;
}
.bn-positive{
  color: #0b8457;
  font-weight: bold;
}
.bn-negative{
  color: #dc2f2f;
  font-weight: bold;
}

.count{
  height: 25px;
  width: 25px !important;
  background: #015fa7;
  border-radius: 50%;
  line-height: 25px;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  margin-right: 8px;
  display: inline-block;
  text-align: center;
}
/*news item style end ************/



/*********************************/
/*controls style start ***********/
.bn-controls{
  width: auto;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bn-controls button{
  width: 30px;
  float: left;
  height: 100%;
  cursor: pointer;
  border:none;
  border-left: solid 1px #EEE;
  text-align: center;
  background-color: #f6f6f6;
  outline: none;
}
.bn-controls button:hover{
  background-color: #EEE;
}

.bn-arrow {
  margin: 0;
  display: inline-block;
  height: 8px;
  position: relative;
  width: 8px;
  top: -2px;
}
.bn-arrow::after {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-right-style: solid;
  border-right-width: 2px;
  content: '';
  display: inline-block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  width: 8px;
}
.bn-arrow.bn-next {
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  left:-3px;
}
.bn-arrow.bn-prev {
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 3px;
}
.bn-arrow::after{
  border-color: #999999;
}
.bn-arrow::before{
  background-color: #999999;
}
.bn-play{
  position: relative;
  background: #999999;
  width: 0;
  height: 12px;
  display: inline-block;
  margin-left: -5px;
}
.bn-play::after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #999999;
  border-width: 8px;
  margin-top: -8px;
}
.bn-pause{
  position: relative;
  width: 0;
  height: 14px;
  display: inline-block;
  top: 1px;
  left:-1px;
}
.bn-pause::before{
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  left: 3px;
  background-color: #999999;
}
.bn-pause::after{
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  left: -3px;
  background-color: #999999;
}
/*controls style end *************/
/*********************************/
.bn-direction-rtl{
  direction: rtl;
}
.bn-direction-rtl .bn-label{
  left: auto;
  right: 0;
}
.bn-direction-rtl .bn-controls{
  right: auto;
  left: 0;
}
.bn-direction-rtl .bn-seperator{
  margin-left: 15px;
  margin-right: 0;
  float: right;
}
.bn-direction-rtl .bn-prefix{
  margin-left: 15px;
  margin-right: 0;
  padding-left: 0;
  padding-right: 10px;
}
.bn-direction-rtl .bn-controls button{
  border-left: none;
  border-right: solid 1px #EEE;
}

.bn-effect-scroll .bn-news ul{
  display: block;
  width: 100%;
  position: relative;
}
.bn-effect-scroll .bn-news ul li{
  display: list-item;
  float: left;
  position: relative;
  width: auto;
}
.bn-effect-scroll.bn-direction-rtl .bn-news ul li{
  float: right;
}

/*Random Blog *************/
/*********************************/
.blog-side-bar .widget {
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #ededed;
  border-top: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-sidebar-title {
  background-color: #097aeb;
  padding: 15px 25px;
  color:#ededed;
  border: 1px solid #ededed;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.blog-side-bar .title-heading{
color:#fff;
font-weight: 700;
}

.foto img{
  max-width: 80px;
  height: 85px;
  vertical-align: top;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.blog-side-bar .foto img:hover {
-webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
        transform: scale(1.08);
}

.display-31 {
  font-size: 0.8rem;
}
/*====================
=======GDPR==========*/
#gdpr-cookie-message {
  position: fixed;
  right: 30px;
  bottom: 30px;
  max-width: 375px;
  background-color: var(--purple);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.25);
  margin-left: 30px;
  font-family: system-ui;
  z-index: 99999;
}
#gdpr-cookie-message h4 {
  color: var(--primary-color);
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
#gdpr-cookie-message h5 {
  color: var(--primary-color);
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
  color: white;
  font-size: 15px;
  line-height: 1.5em;
}
#gdpr-cookie-message p:last-child {
  margin-bottom: 0;
  text-align: right;
}
#gdpr-cookie-message li {
  width: 49%;
  display: inline-block;
}
#gdpr-cookie-message a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 1px dotted rgba(255,255,255,0.75);
  transition: all 0.3s ease-in;
}
#gdpr-cookie-message a:hover {
  color: white;
  border-bottom-color: var(--primary-color);
  transition: all 0.3s ease-in;
}
#gdpr-cookie-message button {
  border: none;
  background: var(--primary-color);
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  padding: 7px;
  border-radius: 3px;
  margin-left: 15px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:hover {
  background: white;
  color: var(--primary-color);
  transition: all 0.3s ease-in;
}
button#gdpr-cookie-advanced {
  background: white;
  color: var(--primary-color);
}
#gdpr-cookie-message button:disabled {
  opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
  float: none;
  margin-top: 0;
  margin-right: 5px;
}

/* Archive-list  */
.gulf-jobs-list-wrap {
  max-width: 910px;
  margin: 0px auto;
}

.gulf-jobs-list-wrap ul li {
  list-style: none;
}

.gulf-jobs-list-style1 {
  background-color: #fff;
  border: 10px;
  box-shadow: 0px 0px 25px rgba(56, 152, 226, 0.3);
  position: relative;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media (max-width: 767px) {
  .gulf-jobs-list-style1 {
    text-align: center;
    display: block;
    margin-bottom: 30px !important;
  }
}
.gulf-jobs-list-style1 .gulf-media {
  width: 130px;
  height: 130px;
  display: inline-block;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 40px rgba(56, 152, 226, 0.3);
  margin-right: 40px;
  position: absolute;
  bottom: -10px;
  line-height: 130px;
}
@media (max-width: 767px) {
  .gulf-jobs-list-style1 .gulf-media {
    position: inherit;
    bottom: inherit;
    margin-right: 0px;
    margin-bottom: 30px;
    line-height: 100px;
  }
}
.gulf-jobs-list-style1 .gulf-media img {
  width: 130px; 
  height: 130px; 
  border-radius: 10px;
  display: inline-block;
  transition: transform 1s;
  object-fit: cover;
}

.gulf-jobs-list-style1 .gulf-media img:hover{
  -webkit-transform: scale(1.08);
      -ms-transform: scale(1.08);
          transform: scale(1.08);
          
}

.gulf-jobs-list-style1 p {
  font-size: 14px;
}
.gulf-jobs-list-style1 .gulf-mid-content {
  padding-left: 180px;
}
@media (max-width: 767px) {
  .gulf-jobs-list-style1 .gulf-mid-content {
    padding-left: 0px;
  }
}

.gulf-jobs-list-style1 .gulf-mid-content .gulf-job-title{
    color: #300864;
    font-weight: 700;
    text-decoration: none;
    transition: all 1s;
}

.gulf-jobs-list-style1 .gulf-mid-content .gulf-job-title:hover{
    color: var(--primary-color);
    font-size: 17px;
    text-decoration: none;
   
}

.gulf-jobs-list-style1 .gulf-mid-content .gulf-job-websites {
  font-size: 14px;
}

.gulf-jobs-list-style1 .gulf-right-content {
  text-align: right;
  width: 178px;
}
@media (max-width: 767px) {
  .gulf-jobs-list-style1 .gulf-right-content {
    text-align: inherit;
    width: auto;
  }
}
.gulf-jobs-list-style1 .gulf-right-content .gulf-job-address {
  margin-bottom: 0px;
}
.gulf-jobs-list-style1 .gulf-right-content .gulf-jobs-amount {
  font-weight: 500;
  color: #046c38;
  margin: 20px 0px 10px 0px;
  font-size: 14px;
}


.gulf-jobs-list-style1 .gulf-right-content .gulf-jobs-browse  {
  font-weight: 600;
  font-size: 18px;
  transition: all 1s;
}

.gulf-jobs-list-style1 .gulf-right-content .gulf-jobs-browse:hover  {
  font-weight: 600;
  font-size: 18px;
  color: #300864;
}

.gulf-jobs-category span {
  color: #fff;
  border-radius: 5px;
  padding: 5px 12px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .gulf-jobs-category span {
    display: inline-block;
  }
}

.gulf-bg-sky {
    background-color: #2d9bb3;
}

/* Job Apply Button javascript support */
.clickit {
  -webkit-transition:all 500ms;
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  display: block;
}

.memory{
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  -moz-transform:     rotateY(180deg);
  -webkit-transform:  rotateY(180deg);
  -o-transform:       rotateY(180deg);
  -ms-transform:      rotateY(180deg);
  transform:          rotateY(180deg);
}

#lblCount{
  color:#ce2525;
  font-size: x-large;
  font-weight: 700;
}

/* -----------------------------------------------------
	Ranbow border
-------------------------------------------------------- */
.border-image-clip-path {
  margin: auto;
  border: 2px solid;
  border-image: linear-gradient(45deg, #fbb300, #ec0404, #7133d5, #399953, #4202f3) 1;
  clip-path: inset(0px round 10px);
  animation: huerotate 6s infinite linear;
  filter: hue-rotate(360deg);
}

@keyframes huerotate {
  0% {
      filter: hue-rotate(0deg);
  }
  100% {
      filter: hue-rorate(360deg);
  }
}

/* -----------------------------------------------------
	progress-bar
-------------------------------------------------------- */
.progress-bar {
  background-color: rgba(212, 208, 208, 0.6) !important;
  margin: 50px auto;
  border-radius: 5px;
  box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}

.stripes {
  background-size: 30px 30px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.stripes.animated {
  animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
  animation-duration: 1.25s;
}

.stripes.reverse {
  animation-direction: reverse;
}

.progress-bar-inner {
  width: 0%;
  transition: all .3s ease-in;
  height: 30px;
  background-color: green;
  border-radius: 50px;
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 0;
  }
}
/* @keyframes auto-progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}  */