@font-face {
	font-family: 'RalewayRegular';
	src: url('fonts/RalewayRegular.eot');
	src: url('fonts/RalewayRegular.eot') format('embedded-opentype'),
	url('fonts/RalewayRegular.woff2') format('woff2'),
	url('fonts/RalewayRegular.woff') format('woff'),
	url('fonts/RalewayRegular.ttf') format('truetype'),
	url('fonts/RalewayRegular.svg#RalewayRegular') format('svg');
}
@font-face {
	font-family: 'RalewayBold';
	src: url('fonts/RalewayBold.eot');
	src: url('fonts/RalewayBold.eot') format('embedded-opentype'),
	url('fonts/RalewayBold.woff2') format('woff2'),
	url('fonts/RalewayBold.woff') format('woff'),
	url('fonts/RalewayBold.ttf') format('truetype'),
	url('fonts/RalewayBold.svg#RalewayBold') format('svg');
}
@font-face {
	font-family: 'RalewayMedium';
	src: url('fonts/RalewayMedium.eot');
	src: url('fonts/RalewayMedium.eot') format('embedded-opentype'),
	url('fonts/RalewayMedium.woff2') format('woff2'),
	url('fonts/RalewayMedium.woff') format('woff'),
	url('fonts/RalewayMedium.ttf') format('truetype'),
	url('fonts/RalewayMedium.svg#RalewayMedium') format('svg');
}

@font-face {
	font-family: 'RalewaySemiBold';
	src: url('fonts/RalewaySemiBold.eot');
	src: url('fonts/RalewaySemiBold.eot') format('embedded-opentype'),
	url('fonts/RalewaySemiBold.ttf') format('truetype')
}
@font-face {
	font-family: 'Kimberley';
	src: url('fonts/kimbalt.ttf');
}

@font-face {
	font-family: 'KimberleyBold';
	src: url('fonts/kimberleybl.ttf');
}
.scaled-container {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
body {
	font-family: 'RalewayRegular' !important;
	-moz-font-feature-settings:"lnum" 1; 
	-moz-font-feature-settings:"lnum=1"; 
	-ms-font-feature-settings:"lnum" 1; 
	-o-font-feature-settings:"lnum" 1; 
	-webkit-font-feature-settings:"lnum" 1; 
	font-feature-settings:"lnum" 1;
}
.fixed-span {
	display: inline-block;
	width: 50px;
}
a:hover{text-decoration: none;}
.font-bold {font-family: 'RalewayBold'}
.font-medium {font-family: 'RalewayMedium'}
.font-semibold {font-family: 'RalewaySemiBold'}

.text-min{font-size: 10px}
.text-xxs{font-size: 12px}
.text-xs{font-size: 14px}
.text-normal{font-size: 18px}
.text-sm{font-size: 20px}
.text-md{font-size: 22px}
.text-lg{font-size: 25px}
.text-xlg{font-size: 35px}

.font-blue {color: #070A2D !important}
.font-gray {color: #7C7C7C !important}
.font-orange {color: #1f2937 !important}
.font-white {color: white !important}
.font-black {color: black !important}

.top-buffer5{margin-top: 5px}
.top-buffer10{margin-top: 10px}
.top-buffer15{margin-top: 15px}
.top-buffer20{margin-top: 20px}
.top-buffer25{margin-top: 25px}
.top-buffer30{margin-top: 30px}
.top-buffer40{margin-top: 40px}
.top-buffer50{margin-top: 50px}
.top-buffer80{margin-top: 80px}
.top-buffer100{margin-top: 100px}
.text-center{text-align: center;}
.no-pad{padding:0px !important;}
.bg-orange{background-color: #1f2937 !important;}
.bg-gray{background-color: #DDD;}
.bg-white{background-color: #FFF;}
.pointer{cursor: pointer;}

.no-marg{margin:0px !important;}
.nine-marg{margin: 9px 0 0 0 !important;}
.eighteen-marg{margin:18px 0 0 0 !important;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.cont-img {
  min-height: 80px;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #e5e7eb;
}
.cont-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.fa-facebook-square {color: #3b5998;}
.fa-twitter-square {color: #55acee;}
.fa-linkedin-square {color: #0976b4;}
.fa-whatsapp {color: #128c7e;}
.fa-email {color: #DDD;}

.play-btn {
	background: transparent;
	border: 1px solid #d1d5db;
	color: white;
	border-radius: 8px;
	width: 170px;
	margin: 10px 10px 10px 0px;
	padding: 5px;
}
.creator-background {
  position:'relative';
  left: '0';
  right: '0';
  background-image: linear-gradient(#A1A3FF, #5557D2);
}
.custom-hr {
	border-top: 2px solid lightgray !important;
	width: 90% !important;
}

.row .mrow {
	display: flex;
	flex-wrap: wrap;
}

.column {
	flex: 25%;
	max-width: 25%;
	padding: 0px 10px 0px 0px;
}
.column p {
	margin: 0;
}
.column-img {
	border-radius: 10px;
  min-height: 170px;
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}
.ep-column-img {
	border-radius: 10px;
  min-height: 60px;
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}

.img-container {
	width: 100%;
  min-height: 200px;
  position: relative;
  background: #FFF;
  border-radius: 10px;
}

.c-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.c-img:hover {
  opacity: 0.2;
  box-shadow: 0px 0px 6px 0px #2f2f2f;
}

.hover-play {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.hover-play:hover:before {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 95%;
  position: absolute;
  top: 8px;
  z-index: 998;
  right: 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 6px 0px #2f2f2f;
}
.hover-play:hover:after {
  /*content: "\f144";*/
  display: block;
  width: 100%;
  height: 95%;
  position: absolute;
  top: 8px;
  z-index: 999;
  right: 0;
  border: none;
  border-radius: 10px;
}

@-webkit-keyframes fadeInImg {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeInImg {
  from {opacity: 0.2;}
  to {opacity: 1;}
}
.img-loading {
   opacity: 0;
   width: 100%;
   height: auto;
}
.img-loaded {
   animation: fadeInImg cubic-bezier(0.23, 1, 0.32, 1) 1;
   position: relative;
   opacity: 0;
   animation-fill-mode: forwards;
   animation-duration: 0.7s;
   animation-delay: 0.1s;
}
.side-box{
	background-color: #F4F4F4;
	border-radius: 10px;
	margin-top: 8px;
}
.creator-img {
  border-radius:50%;
  /* max-width:90%; */
  width: 200px;
  height: 200px;
  position:absolute;
  top:60px;
  transition: all 0.3s ease;
}

i.custom {
	display: inline-block;
	border-radius: 60px;
	box-shadow: 0px 0px 2px #888;
	background-color: #070A2D;
	padding: 0.5em 0.6em;
}

.mplayer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 75px;
	background-color: #07152f;
	border-bottom: none;
	border-radius: 10px;
}

.range {
  -webkit-appearance: none;
  vertical-align: middle;
  outline: none;
  border: none;
  background: none;
}

.range::-webkit-slider-runnable-track {
  background-color: #d7dbdd;
  height: 3px;
  border-radius: 3px;
  border: 0px solid transparent;
}

.range::-ms-track {
  color: transparent;
  border: none;
  background: none;
  height: 6px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  border-radius: 100%;
  background-color: #FF6C00;
  height: 12px;
  width: 12px;
  margin-top: -5px;
}

/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #FF6C00; 
}
input[type="range"]::-moz-range-track {  
  background-color: #d7dbdd;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #FF6C00; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #d7dbdd;
}

@media screen and (max-width: 1024px) {
  .creator-img {
    top: 80px !important;
  }
}

/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 800px) {
	.column {
		flex: 33.3333334%;
		max-width: 33.3333334%;
	}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 600px) {
	.column {
		flex: 50%;
		max-width: 50%;
	}
  .creator-img {
    top: 60px !important;
  }
  .creator-background {
    height: 230px !important;
  }
}

/* Responsive layout - makes a one column-layout instead of four columns */
@media screen and (max-width: 375px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
  .creator-img {
    top: 50px !important;
  }
  .creator-background {
    height: 200px !important;
  }
}

@media screen and (max-width: 320px) {
  .creator-img {
    top: 50px !important;
  }
}

@media screen and (max-width: 767px){
  .mobile-center {text-align: center;}
}

@media screen and (min-width: 767px){
  .desktop-column-img {
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  .desktop-top30 {
    top: 30%;
  }
  .padding36-desktop {
    padding: 0px 36px !important;
  }
  .desktop-padding-right-0 {
    padding-right: 0px !important;
  }
}
.padding36-desktop {
  padding: 0px;
}
/*custom react-player css*/
/*
.app {
  margin: auto;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-align: center;
}

.section {
  display: inline-block;
  max-width: 480px;
  margin: 20px;
  text-align: left;
  vertical-align: top;
}

.player-wrapper {
  width: 480px;
  height: 270px;
}

.react-player {
  margin-bottom: 10px;
  background: rgba(0, 0, 0, .1);
}

.faded {
  color: rgba(0, 0, 0, .5);
}

.footer {
  margin: 20px;
}

body {
  margin-right: 10px;
  margin-left: 10px;
  font-size: 14px;
  line-height: 1.4;
}

em {
  font-style: italic;
}

body,
h1,
h2,
h3 {
  font-weight: 300;
  margin-bottom: 1em;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; margin-top: 1em; }

table,
progress {
  width: 100%;
}

th,
td,
[type=text],
textarea {
  margin-right: 5px;
  padding: 3px 6px;
}

th {
  width: 10%;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

[type=text],
textarea {
  width: 200px;
  padding: 5px;
  border: 1px solid darken(#eee, 20);
  border-radius: 3px;
  outline: 0;

  &:focus {
    border-color: darken(#eee, 30);
    box-shadow: 0 0 5px #eee;
  }
}

textarea {
  height: 100px;
  font-family: monospace;
  vertical-align: bottom;
}
*/
button {
	background-color: transparent;
	border: none;
  transition: all 0.4s ease;
}
button:focus{outline: none;}

.hover-orange:hover {
  background-color: #FF6C00;
  color: #FFF !important;
}

.hover-bold:hover {
  font-weight: bold;
  opacity: 0.9;
}

.selected-btn:focus{color: #FF6C00 !important;}
.selected-btn:hover{color: #FF6C00 !important;}
.selected-btn:active{color: #FF6C00 !important;}
.cbutton {
  margin: 3px;
  padding: 6px 12px;
  border: 0;
  border-radius: 3px;
  outline: 0;
  background-color: #eee;

  &:focus {  background: darken(#eee, 5); }
  &:hover {  background: darken(#eee, 10); }
  &:active { background: darken(#eee, 15); }
}

.popup-content {
  width: 300px !important;
  text-align: center;
  border-radius: 10px;
}

/* src/index.css */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}