/******************************************************************
  Template Name: DJoz
  Description:  DJoz Music HTML Template
  Author: Colorlib
  Author URI: https://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Track Section
7.  Countdown Section
8.  Team Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

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

/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Now Regular";
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Rajdhani", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Now Regular";
	color: #444444;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.section-title.center-title {
	text-align: center;
}

.section-title h2 {
	font-size: 42px;
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
}

.section-title h1 {
	font-size: 100px;
	color: #f2f2f2;
	font-family: "Rockville Solid Regular";
	position: absolute;
	left: 0;
	top: -45px;
	width: 100%;
	z-index: -1;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 15px;
	text-transform: uppercase;
	padding: 14px 25px 12px;
	color: #ffffff;
	background: #5c00ce;
	letter-spacing: 2px;
}

.primary-btn.border-btn {
	background: transparent;
	border: 2px solid #5c00ce;
	color: #111111;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	background: #5c00ce;
	font-weight: 700;
	letter-spacing: 2px;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px;
	width: 100%;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/*---------------------
  Header
-----------------------*/

.header {
	background: rgba(42, 1, 74, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9;
}

.header.header--normal {
	position: relative;
	background: #290849;
}

.header__logo {
	padding: 20px 0 25px;
}

.header__logo a {
	display: inline-block;
}

.header__nav {
	text-align: right;
}

.header__menu {
	padding: 31px 0 27px;
	display: inline-block;
	margin-right: 45px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 45px;
	position: relative;
}

.header__menu ul li.active a:after {
	opacity: 1;
}

.header__menu ul li:hover a:after {
	opacity: 1;
}

.header__menu ul li:hover .dropdown {
	top: 34px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 150px;
	background: #111111;
	text-align: left;
	padding: 2px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 400;
	padding: 8px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	text-transform: uppercase;
	color: #ffffff;
	display: block;
	padding: 6px 0;
	position: relative;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #ffffff;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	opacity: 0;
}

.header__right__social {
	display: inline-block;
}

.header__right__social a {
	display: inline-block;
	font-size: 16px;
	color: #ffffff;
	margin-right: 16px;
}

.header__right__social a:last-child {
	margin-right: 0;
}

.slicknav_menu {
	display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero {
	padding-top: 400px;
	padding-bottom: 295px;
	position: relative;
}

.hero__text {
	text-align: center;
}

.hero__text span {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 6px;
}

.hero__text h1 {
	font-size: 110px;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 20px;
	margin-top: 22px;
}

.hero__text p {
	color: #ffffff;
	margin-bottom: 20px;
}

.hero__text .play-btn {
	font-size: 26px;
	color: #5c00ce;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hero__text .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.hero__text .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.linear__icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -16px;
	-webkit-animation: mymove 0.5s infinite alternate;
	animation: mymove 0.5s infinite alternate;
}

.linear__icon i {
	font-size: 50px;
	color: #5c00ce;
}

@-webkit-keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

@keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

/*---------------------
  Events
-----------------------*/

.event {
	padding-bottom: 60px;
}

.event .section-title {
	margin-bottom: 10px;
	position: relative;
}

.event .section-title:after {
	position: absolute;
	right: 46px;
	top: 25px;
	height: 2px;
	width: 775px;
	background: rgba(225, 225, 225, 0.3);
	content: "";
	z-index: -1;
}

.event__slider .col-lg-4 {
	max-width: 100%;
}

.event__slider.owl-carousel .owl-stage-outer {
	padding-top: 30px;
	padding-bottom: 40px;
}

.event__slider.owl-carousel .owl-nav {
	position: absolute;
	right: 15px;
	top: -50px;
}

.event__slider.owl-carousel .owl-nav button {
	font-size: 22px;
	color: #111111;
	opacity: 0.5;
	margin-right: 10px;
}

.event__slider.owl-carousel .owl-nav button:last-child {
	margin-right: 0;
}

.event__item {
	-webkit-box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
}

.event__item__pic {
	height: 360px;
	position: relative;
}

.event__item__pic .tag-date {
	position: absolute;
	left: 0;
	bottom: -21px;
	width: 100%;
	text-align: center;
}

.event__item__pic .tag-date span {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	background: #5c00ce;
	padding: 12px 8px 9px 20px;
}

.event__item__text {
	text-align: center;
	padding: 45px 10px 25px;
}

.event__item__text h4 {
	font-size: 26px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 10px;
}

.event__item__text p {
	color: #888888;
	margin-bottom: 0;
}

.event__item__text p i {
	color: #5c00ce;
	margin-right: 8px;
	font-size: 17px;
}

/*---------------------
  Track
-----------------------*/

.track {
	padding-top: 120px;
	padding-bottom: 40px;
	overflow: hidden;
}

.track .section-title {
	margin-bottom: 105px;
}

.track__content {
	height: 502px;
	overflow-y: auto;
}

.track__all {
	text-align: right;
	margin-bottom: 100px;
}

.jp-play {
	position: relative;
	height: 50px;
	width: 50px;
	background: transparent;
	border: 2px solid #e1e1e1;
	border-radius: 50%;
}

.jp-play:after {
	position: absolute;
	display: block;
	left: 17px;
	top: 12px;
	width: 16px;
	height: 20px;
	background: url(../img/play-default.png);
	content: "";
}

.jp-state-playing .jp-play {
	background: #5c00ce !important;
	border-color: #5c00ce !important;
}

.jp-state-playing .jp-play:after {
	background: url(../img/pause.png) !important;
	left: 15px;
	top: 12px;
}

.jp-audio .jp-play:focus {
	background: #5c00ce !important;
	border-color: #5c00ce !important;
}

.jp-audio .jp-play:focus:after {
	background: url(../img/play.png);
}

.jp-seek-bar>div {
	height: 5px;
	background: #e1e1e1;
	cursor: pointer;
	width: 245px;
}

.player_bars {
	width: 350px;
	display: table;
	padding-left: 50px;
	position: relative;
	padding-top: 25px;
	float: left;
	margin-right: 30px;
}

.jp-play-bar {
	position: relative;
	height: 100%;
	background: #5c00ce;
	overflow: visible !important;
}

.jp-current-time {
	font-size: 15px;
	color: #111111;
	position: absolute;
	left: -50px;
	top: -9px;
}

.jp-duration {
	font-size: 15px;
	color: #111111;
	position: absolute;
	right: 0;
	top: 16px;
}

.player_controls_box {
	width: 50px;
	float: left;
	margin-right: 20px;
}

.jp-mute {
	font-size: 18px;
	border: none;
	background: none;
	color: #111111;
	position: absolute;
	left: 0;
	top: 13px;
}

.jp-volume-bar {
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	cursor: pointer;
}

.jp-volume-bar-value {
	background: #5c00ce;
	height: 100%;
}

.jp-volume-controls {
	position: relative;
	width: 95px;
	float: left;
	padding-left: 30px;
	padding-top: 25px;
}

.single_player_container {
	overflow: hidden;
	margin-bottom: 40px;
}

.single_player_container:last-child {
	margin-bottom: 0;
}

.single_player_container h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.track__pic {
	position: relative;
	z-index: 1;
}

.track__pic:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	content: "";
	z-index: -1;
}

.track__pic img {
	position: relative;
	top: -50px;
	width: calc(100% - 40px);
	margin-left: 40px;
	height: 502px;
}

/*---------------------
  Youtube
-----------------------*/

.youtube {
	padding-bottom: 50px;
}

.youtube .section-title {
	text-align: center;
}

.youtube .section-title h1 {
	font-size: 90px;
}

.youtube__item {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-bottom: 30px;
}

.youtube__item:hover {
	-webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.youtube__item__pic {
	height: 240px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.youtube__item__pic .play-btn {
	font-size: 16px;
	color: #5c00ce;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: inline-block;
	line-height: 60px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.youtube__item__pic .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.youtube__item__pic .play-btn:after {
	position: absolute;
	left: 10px;
	top: 10px;
	height: 40px;
	width: 40px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.youtube__item__text {
	padding: 25px 30px 20px 20px;
	background: #ffffff;
}

.youtube__item__text h4 {
	font-size: 26px;
	color: #111111;
	line-height: 34px;
	font-weight: 700;
}

/*---------------------
  Countdown
-----------------------*/

.countdown {
	padding-bottom: 560px;
}

.countdown.countdown--page {
	padding-top: 150px;
	padding-bottom: 150px;
}

.countdown__text {
	text-align: center;
	margin-bottom: 36px;
}

.countdown__text h1 {
	font-size: 90px;
	color: #ffffff;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 25px;
}

.countdown__text h4 {
	font-size: 26px;
	font-family: "Now Regular";
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.countdown__timer {
	text-align: center;
	margin-bottom: 30px;
}

.countdown__item {
	display: inline-block;
	margin-right: 80px;
	margin-bottom: 30px;
}

.countdown__item:last-child {
	margin-right: 0;
}

.countdown__item span {
	font-size: 90px;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	color: #ffffff;
	display: block;
	line-height: 100px;
}

.countdown__item p {
	color: #ffffff;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 0;
}

.buy__tickets {
	text-align: center;
}

/*---------------------
  Discography
-----------------------*/

.discography {
	padding-bottom: 40px;
	padding-top: 120px;
	overflow: hidden;
}

.discography .section-title {
	margin-bottom: 90px;
}

.discography__item {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
}

.discography__item__pic img {
	min-width: 100%;
}

.discography__item__text {
	padding: 25px 30px 35px;
	text-align: center;
}

.discography__item__text span {
	font-size: 18px;
	color: #5c00ce;
	font-weight: 700;
}

.discography__item__text h4 {
	font-size: 22px;
	text-transform: uppercase;
	color: #111111;
	margin-top: 10px;
	margin-bottom: 25px;
}

.discography__item__text a {
	display: inline-block;
	margin-right: 10px;
}

.discography__item__text a:last-child {
	margin-right: 0;
}

.pagination__links {
	text-align: center;
	padding-top: 10px;
}

.pagination__links.blog__pagination {
	text-align: left;
}

.pagination__links a {
	display: inline-block;
	font-size: 15px;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #f2f2f2;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 6px;
	margin-bottom: 5px;
	padding: 14px 22px 12px;
}

.pagination__links a:last-child {
	margin-right: 0;
}

.pagination__links a:hover {
	background: #290849;
	color: #ffffff;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	padding-top: 300px;
	padding-bottom: 60px;
	margin-top: -547px;
	height: 549px;
}

.footer.footer--normal {
	margin-top: 0;
}

.footer__address {
	margin-bottom: 50px;
}

.footer__address ul li {
	list-style: none;
	padding-left: 70px;
	position: relative;
	margin-bottom: 30px;
}

.footer__address ul li:last-child {
	margin-bottom: 0;
}

.footer__address ul li i {
	font-size: 18px;
	color: #5c00ce;
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}

.footer__address ul li p {
	color: #ffffff;
	opacity: 0.7;
	margin-bottom: 8px;
}

.footer__address ul li h6 {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}

.footer__social {
	text-align: center;
	position: relative;
	margin-bottom: 50px;
}

.footer__social::before {
	position: absolute;
	left: -46px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social::after {
	position: absolute;
	right: -50px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social h2 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 25px;
}

.footer__social .footer__social__links a {
	font-size: 18px;
	color: #5c00ce;
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	margin-right: 10px;
}

.footer__social .footer__social__links a:last-child {
	margin-right: 0;
}

.footer__newslatter {
	margin-bottom: 50px;
}

.footer__newslatter h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 30px;
}

.footer__newslatter form {
	position: relative;
}

.footer__newslatter form input {
	height: 50px;
	font-size: 15px;
	color: #ffffff;
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 20px;
}

.footer__newslatter form input::-webkit-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-moz-placeholder {
	color: #ffffff;
}

.footer__newslatter form input:-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::placeholder {
	color: #ffffff;
}

.footer__newslatter form button {
	font-size: 18px;
	color: #5c00ce;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 0 16px;
	background: #ffffff;
	border: none;
}

.footer__copyright__text {
	text-align: center;
}

.footer__copyright__text p {
	color: #999999;
}

.footer__copyright__text a {
	color: #999999;
	text-decoration: underline;
}

.footer__copyright__text a:hover {
	color: #5c00ce;
}

.footer__copyright__text i {
	color: #c11;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 35px;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #111111;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "|";
	color: #888888;
}

.breadcrumb__links a i {
	margin-right: 5px;
}

.breadcrumb__links span {
	font-size: 15px;
	color: #888888;
	display: inline-block;
}

/*---------------------
  About
-----------------------*/

.about {
	padding-top: 0;
}

.about.about--page {
	padding-top: 80px;
	padding-bottom: 80px;
}

.about.about--page .section-title {
	margin-bottom: 28px;
}

.about.about--page .section-title h2 {
	line-height: 55px;
}

.about.about--page .about__text {
	padding-top: 15px;
}

.about.about--page .about__text p {
	color: #111111;
}

.about__text {
	padding-top: 110px;
}

.about__text p {
	margin-bottom: 35px;
}

/*---------------------
  Skills
-----------------------*/

.skills {
	padding-bottom: 0;
	padding-top: 80px;
}

.skills__content {
	background: #5c00ce;
	height: 500px;
	padding: 100px 70px 60px;
}

.skills__content .section-title h2 {
	color: #ffffff;
}

.skills__content .section-title h1 {
	color: #ffffff;
	opacity: 0.1;
	text-align: center;
}

.skills__content p {
	color: #ffffff;
	margin-bottom: 32px;
}

.skill__bar__item {
	margin-bottom: 20px;
}

.skill__bar__item p {
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 10px;
}

.skill__bar__item .barfiller {
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	margin-bottom: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.skill__bar__item .barfiller .tip {
	margin-top: -32px;
	padding: 0;
	font-size: 15px;
	color: #fff;
	background: transparent;
}

.skill__bar__item .barfiller .tip:after {
	display: none;
}

.skills__video {
	height: 500px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.skills__video .play-btn {
	font-size: 26px;
	color: #5c00ce;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(117, 31, 221, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.skills__video .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.skills__video .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

/*---------------------
  About Pic
-----------------------*/

.about-pic {
	overflow: hidden;
}

.about-pic .container-fluid {
	padding-right: 0;
}

.about-pic img {
	min-width: 100%;
	margin-bottom: 10px;
	padding-right: 10px;
}

/*---------------------
  About Services
-----------------------*/

.about-services {
	padding-bottom: 50px;
}

.about-services .section-title {
	margin-bottom: 60px;
}

.about__services__item {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.about__services__item:hover {
	-webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.about__services__item__pic {
	height: 240px;
	position: relative;
}

.about__services__item__pic .icon {
	height: 50px;
	width: 50px;
	background: #5c00ce;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -25px;
}

.about__services__item__text {
	text-align: center;
	padding: 50px 10px 30px;
}

.about__services__item__text h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 12px;
}

.about__services__item__text p {
	margin-bottom: 0;
}

/*---------------------
  Feature
-----------------------*/

.feature {
	padding-bottom: 70px;
}

.feature.feature--about .section-title span {
	color: #0071e4;
}

.feature.feature--about .feature__item {
	background: #f5f5f5;
}

.feature.feature--about .feature__item h5 {
	color: #111111;
}

.feature__text {
	padding-top: 80px;
}

.feature__text .section-title {
	margin-bottom: 20px;
}

.feature__text p {
	margin-bottom: 26px;
}

.feature__item {
	background: #0c2b4b;
	text-align: center;
	padding: 40px 10px 35px;
	margin-bottom: 30px;
}

.feature__item.right-column {
	margin-top: 120px;
}

.feature__item h5 {
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 25px;
}

/*---------------------
  Services
-----------------------*/

.services {
	overflow: hidden;
}

.services__left {
	height: 640px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.services__left .play-btn {
	font-size: 26px;
	color: #ffffff;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: -webkit-gradient(linear, left top, right top, from(rgba(127, 0, 173, 0.3)), to(rgba(93, 0, 206, 0.3)));
	background: -o-linear-gradient(left, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	background: linear-gradient(to right, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.services__left .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.services__left .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: -webkit-gradient(linear, left top, right top, from(#7E00AD), to(#5C00CE));
	background: -o-linear-gradient(left, #7E00AD, #5C00CE);
	background: linear-gradient(to right, #7E00AD, #5C00CE);
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.services__list {
	margin: 0;
}

.service__item {
	background: #5c00ce;
	height: 320px;
	padding: 70px 40px 40px 70px;
}

.service__item.deep-bg {
	background: #5400BC;
}

.service__item h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 10px;
}

.service__item p {
	color: #ffffff;
	margin-bottom: 0;
}

/*---------------------
  Tours
-----------------------*/

.tours {
	padding-top: 150px;
	padding-bottom: 60px;
}

.tours__item__text {
	padding-right: 30px;
	margin-bottom: 100px;
}

.tours__item__text.tours__item__text--right {
	padding-left: 30px;
	padding-right: 0;
}

.tours__item__text h2 {
	font-size: 42px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.tours__item__text .tours__text__widget {
	overflow: hidden;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 38px;
}

.tours__item__text .tours__text__widget ul {
	float: left;
}

.tours__item__text .tours__text__widget ul li {
	list-style: none;
	font-size: 15px;
	color: #111111;
	padding-left: 35px;
	position: relative;
	margin-bottom: 10px;
}

.tours__item__text .tours__text__widget ul li:last-child {
	margin-bottom: 0;
}

.tours__item__text .tours__text__widget ul li i {
	color: #5c00ce;
	position: absolute;
	left: 0;
	top: 3px;
}

.tours__item__text .tours__text__widget ul li span {
	display: inline-block;
	padding-right: 8px;
	position: relative;
	margin-right: 5px;
}

.tours__item__text .tours__text__widget ul li span:last-child {
	padding-right: 0;
	margin-right: 0;
}

.tours__item__text .tours__text__widget ul li span:last-child:after {
	display: none;
}

.tours__item__text .tours__text__widget ul li span:after {
	position: absolute;
	right: 0;
	top: 0;
	content: "|";
}

.tours__item__text .tours__text__widget .price {
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
	display: inline-block;
	padding: 14px 25px 12px 30px;
	background: #5c00ce;
	float: right;
}

.tours__item__text .tours__text__desc {
	padding-top: 40px;
	margin-bottom: 65px;
}

.tours__item__text .tours__text__desc p {
	color: #111111;
	margin-bottom: 20px;
}

.tours__item__text .tours__text__desc p:last-child {
	margin-bottom: 0;
}

.tours__item__pic {
	position: relative;
	z-index: 1;
	padding-right: 50px;
	margin-bottom: 110px;
	padding-left: 30px;
}

.tours__item__pic.tours__item__pic--left {
	padding-left: 50px;
	padding-right: 0;
}

.tours__item__pic.tours__item__pic--left:after {
	left: 0;
}

.tours__item__pic.tours__item__pic--last {
	margin-bottom: 0;
}

.tours__item__pic:after {
	position: absolute;
	left: 50px;
	top: -50px;
	width: calc(100% - 50px);
	height: 100%;
	border: 20px solid rgba(9, 53, 247, 0.1);
	content: "";
	z-index: -1;
}

.tours__item__pic img {
	min-width: 100%;
}

/*---------------------
  Videos
-----------------------*/

.videos {
	padding-bottom: 90px;
}

.videos .section-title {
	margin-bottom: 70px;
}

.videos__large__item {
	height: 585px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 30px;
}

.videos__large__item .play-btn {
	height: 50px;
	width: 50px;
	background: #5c00ce;
	border-radius: 50%;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__large__item__text {
	background: rgba(7, 14, 38, 0.7);
	padding: 25px 30px 25px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.videos__large__item__text h4 {
	color: #ffffff;
	font-weight: 700;
}

.videos__large__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: #ffffff;
	position: relative;
}

.videos__large__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #ffffff;
	content: "";
}

.videos__large__item__text ul li:last-child {
	margin-right: 0;
}

.videos__large__item__text ul li:last-child:after {
	display: none;
}

.videos__item__pic {
	height: 180px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.videos__item__pic .play-btn {
	height: 40px;
	width: 40px;
	background: #5c00ce;
	border-radius: 50%;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__item__text {
	padding-top: 20px;
}

.videos__item__text h5 {
	color: #111111;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 5px;
}

.videos__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: #5c00ce;
	position: relative;
}

.videos__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #888888;
	content: "";
}

.videos__item__text ul li:last-child {
	margin-right: 0;
	color: #888888;
}

.videos__item__text ul li:last-child:after {
	display: none;
}

.videos__slider .col-lg-3 {
	max-width: 100%;
}

.videos__slider.owl-carousel .owl-nav button {
	font-size: 18px;
	color: #888888;
	height: 50px;
	width: 25px;
	background: #ffffff;
	line-height: 50px;
	position: absolute;
	left: 15px;
	top: 22%;
}

.videos__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 15px;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-bottom: 60px;
}

.blog .section-title {
	margin-bottom: 80px;
}

.blog__large {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__large__pic {
	height: 370px;
	position: relative;
}

.blog__large__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__large__text {
	background: #ffffff;
	text-align: center;
	padding: 30px 40px 0;
}

.blog__large__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__large__text h4 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__large__text p {
	margin-bottom: 40px;
}

.blog__large__widget {
	border-top: 1px solid #f2f2f2;
	padding: 15px 0 20px;
	text-align: left;
	margin: 0 30px;
}

.blog__large__widget .right__widget {
	text-align: right;
}

.blog__large__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__large__widget ul li span {
	color: #111111;
}

.blog__large__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__large__widget ul li:last-child {
	margin-right: 0;
}

.blog__large__widget ul li:last-child:after {
	display: none;
}

.blog__item {
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__item__pic img {
	min-width: 100%;
}

.blog__item__text {
	text-align: center;
	background: #ffffff;
	padding: 20px 20px 25px;
}

.blog__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__item__text h5 {
	color: #111111;
	font-weight: 700;
	line-height: 26px;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 12px;
}

.blog__item__text ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__item__text ul li span {
	color: #111111;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

.blog__item__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__item {
	text-align: center;
	margin-bottom: 65px;
}

.blog__sidebar__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__item form input {
	height: 50px;
	font-size: 15px;
	color: #444444;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 20px;
}

.blog__sidebar__item form input::-webkit-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-moz-placeholder {
	color: #444444;
}

.blog__sidebar__item form input:-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::placeholder {
	color: #444444;
}

.blog__sidebar__title {
	text-align: center;
	margin-bottom: 35px;
}

.blog__sidebar__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
}

.blog__sidebar__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__sidebar__social a {
	display: inline-block;
	font-size: 18px;
	color: #111111;
	width: 50px;
	height: 50px;
	background: #f2f2f2;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	margin-right: 6px;
	margin-bottom: 5px;
}

.blog__sidebar__social a:last-child {
	margin-right: 6px;
}

.recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
	text-align: left;
}

.recent__item__pic {
	float: left;
	margin-right: 25px;
}

.recent__item__text {
	overflow: hidden;
}

.recent__item__text h6 {
	color: #111111;
	line-height: 21px;
	font-weight: 700;
}

.recent__item__text span {
	font-size: 13px;
	color: #888888;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-bottom: 60px;
	padding-top: 70px;
}

.blog__details__item {
	margin-bottom: 32px;
}

.blog__details__item__pic {
	height: 385px;
	position: relative;
}

.blog__details__item__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__details__item__text {
	background: #ffffff;
	padding-top: 30px;
}

.blog__details__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__details__item__text h3 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__details__item__text p {
	margin-bottom: 40px;
}

.blog__details__item__widget {
	border-top: 1px solid #f2f2f2;
	padding-top: 15px;
	text-align: left;
}

.blog__details__item__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__details__item__widget ul li span {
	color: #111111;
}

.blog__details__item__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__details__item__widget ul li:last-child {
	margin-right: 0;
}

.blog__details__item__widget ul li:last-child:after {
	display: none;
}

.blog__details__desc {
	margin-bottom: 54px;
}

.blog__details__desc p {
	margin-bottom: 20px;
}

.blog__details__desc p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	border: 1px solid #e1e1e1;
	padding: 35px 40px 35px 40px;
	position: relative;
	margin-bottom: 35px;
}

.blog__details__quote p {
	font-size: 18px;
	color: #111111;
	line-height: 31px;
}

.blog__details__quote h6 {
	font-size: 15px;
	color: #888888;
	text-transform: uppercase;
}

.blog__details__quote i {
	font-size: 36px;
	color: #5c00ce;
	position: absolute;
	right: 40px;
	bottom: 35px;
}

.blog__details__tags {
	padding-top: 20px;
	margin-bottom: 60px;
}

.blog__details__tags a {
	display: inline-block;
	font-size: 15px;
	color: #444444;
	padding: 12px 20px 10px;
	background: #f5f5f5;
	margin-right: 10px;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__option {
	margin-bottom: 60px;
}

.blog__option__btn {
	display: block;
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next {
	text-align: right;
}

.blog__option__btn.blog__option__btn--next .option__btn__name i {
	margin-right: 0;
	margin-left: 6px;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item {
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item .blog__option__btn__pic {
	float: right;
	margin-right: 0;
	margin-left: 30px;
}

.blog__option__btn .option__btn__name {
	font-size: 15px;
	color: #444444;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.blog__option__btn .option__btn__name i {
	font-size: 18px;
	font-weight: 700;
	margin-right: 6px;
}

.blog__option__btn__pic {
	float: left;
	margin-right: 26px;
}

.blog__option__btn__text {
	overflow: hidden;
}

.blog__option__btn__text h6 {
	color: #111111;
	font-weight: 700;
	line-height: 21px;
}

.blog__option__btn__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__services {
	margin-bottom: 30px;
}

.blog__details__services__title,
.blog__details__form__title {
	text-align: center;
	margin-bottom: 30px;
}

.blog__details__services__title h4,
.blog__details__form__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
	font-size: 26px;
}

.blog__details__services__title h4::before,
.blog__details__form__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__details__services__item {
	-webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	margin-bottom: 30px;
}

.blog__details__services__item__pic img {
	min-width: 100%;
}

.blog__details__services__item__text {
	padding: 15px 20px 10px;
}

.blog__details__services__item__text h6 a {
	font-size: 17px;
	color: #111111;
	font-weight: 700;
	line-height: 22px;
}

.blog__details__services__item__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__form form .input__list,
.contact__form form .input__list {
	margin-right: -20px;
	overflow: hidden;
}

.blog__details__form form .input__list input,
.contact__form form .input__list input {
	height: 50px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: calc(33.33% - 20px);
	margin-bottom: 20px;
	margin-right: 16px;
}

.blog__details__form form .input__list input::-webkit-input-placeholder,
.contact__form form .input__list input::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-moz-placeholder,
.contact__form form .input__list input::-moz-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input:-ms-input-placeholder,
.contact__form form .input__list input:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-ms-input-placeholder,
.contact__form form .input__list input::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::placeholder,
.contact__form form .input__list input::placeholder {
	color: #666666;
}

.blog__details__form form textarea,
.contact__form form textarea {
	height: 120px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	padding-top: 12px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 14px;
	resize: none;
}

.blog__details__form form textarea::-webkit-input-placeholder,
.contact__form form textarea::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-moz-placeholder,
.contact__form form textarea::-moz-placeholder {
	color: #666666;
}

.blog__details__form form textarea:-ms-input-placeholder,
.contact__form form textarea:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-ms-input-placeholder,
.contact__form form textarea::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::placeholder,
.contact__form form textarea::placeholder {
	color: #666666;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 585px;
	margin-top: 60px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact {
	padding-top: 70px;
	padding-bottom: 50px;
}

.contact__address .section-title {
	margin-bottom: 10px;
}

.contact__address .section-title h2 {
	text-transform: none;
}

.contact__address p {
	margin-bottom: 34px;
}

.contact__address ul li {
	list-style: none;
	padding-left: 100px;
	position: relative;
	margin-bottom: 30px;
}

.contact__address ul li:last-child {
	margin-bottom: 0;
}

.contact__address ul li i {
	font-size: 30px;
	height: 70px;
	width: 70px;
	background: #f5f5f5;
	border-radius: 50%;
	line-height: 70px;
	text-align: center;
	color: #5c00ce;
	position: absolute;
	left: 0;
	top: -4px;
}

.contact__address ul li h5 {
	font-size: 20px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 10px;
}

.contact__address ul li p {
	margin-bottom: 0;
}

.contact__address ul li span {
	font-size: 15px;
	color: #111111;
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.contact__address ul li span:after {
	position: absolute;
	right: -20px;
	top: -1px;
	content: ".";
	font-size: 39px;
	line-height: 0;
	border-radius: 50%;
}

.contact__address ul li span:last-child {
	margin-right: 0;
}

.contact__address ul li span:last-child:after {
	display: none;
}

.contact__form .section-title {
	margin-bottom: 10px;
}

.contact__form .section-title h2 {
	text-transform: none;
}

.contact__form p {
	margin-bottom: 34px;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 18px;
	}
	.header__menu {
		margin-right: 30px;
	}
	.service__item {
		padding: 40px 30px 30px 40px;
	}
	.skills__content {
		padding: 60px 40px 40px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header__right__social {
		display: none;
	}
	.header__menu {
		margin-right: 0;
	}
	.header__menu ul li {
		margin-right: 15px;
	}
	.event .section-title:after {
		width: 560px;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track__pic img {
		height: auto;
	}
	.footer {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 776px;
	}
	.footer {
		margin-top: -740px;
		background-position: top 0 left 19%;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.hero {
		padding-top: 190px;
		padding-bottom: 200px;
	}
	.event .section-title:after {
		display: none;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track .p-0 {
		padding: 0 15px !important;
	}
	.track__pic img {
		height: auto;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer {
		height: auto;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.player_bars {
		width: 240px;
		margin-right: 20px;
	}
	.jp-seek-bar>div {
		width: 140px;
	}
	.countdown__item {
		margin-right: 0;
		margin-bottom: 30px;
		width: 50%;
		float: left;
	}
	.footer__social {
		text-align: left;
	}
	.skills__content {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.blog__large__widget ul {
		text-align: center;
	}
	.blog__large__widget .right__widget {
		text-align: center;
	}
	.blog__option__btn {
		margin-bottom: 30px;
	}
	.blog__details__form form .input__list,
	.contact__form form .input__list {
		margin-right: 0;
		overflow: visible;
	}
	.blog__details__form form .input__list input,
	.contact__form form .input__list input {
		width: 100%;
		margin-right: 0;
	}
	.header__nav {
		display: none;
	}
	.header .container {
		position: relative;
	}
	.slicknav_btn {
		position: absolute;
		right: 15px;
		top: 25px;
		margin: 0;
		border-radius: 0;
		padding: 12px 15px;
		float: none;
		background: #5c00ce;
	}
	.slicknav_nav {
		position: absolute;
		left: 0;
		top: 90px;
		background: #222;
		width: 100%;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		display: block;
	}
	.slicknav_nav ul {
		margin: 0;
		padding: 5px 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 10px 28px;
		margin: 0;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: #5c00ce;
		color: #ffffff;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: #5c00ce;
		color: #ffffff;
	}
	.service__item {
		height: auto;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 940px;
	}
	.footer {
		margin-top: -940px;
		background-position: top 0 left 19%;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.section-title h1 {
		top: -40px;
		font-size: 79px;
		line-height: 0.8;
	}
	.hero__text h1 {
		font-size: 70px;
	}
	.videos {
		padding-bottom: 0;
	}
	.countdown__text h1 {
		font-size: 50px;
	}
	.single_player_container h4 {
		font-size: 16px;
	}
	.player_bars {
		width: 150px;
		margin-right: 10px;
	}
	.player_controls_box {
		margin-right: 10px;
	}
	.jp-volume-controls {
		width: 68px;
		padding-left: 23px;
	}
	.jp-volume-bar {
		width: 42px;
	}
	.jp-seek-bar>div {
		width: 55px;
	}
	.service__item {
		height: auto;
		padding: 40px 40px 40px 40px;
	}
	.skills__content {
		height: auto;
		padding: 80px 25px 40px;
	}
	.tours__item__text .tours__text__widget ul {
		float: none;
		margin-bottom: 30px;
	}
	.tours__item__text .tours__text__widget .price {
		float: none;
	}
	.tours__item__pic {
		padding-left: 0;
	}
	.tours__item__text.tours__item__text--right {
		padding-left: 0;
	}
	.blog__large__text {
		padding: 30px 20px 0;
	}
	.blog__large__widget {
		margin: 0;
	}
	.blog__details__tags a {
		margin-bottom: 10px;
	}
	.countdown {
		padding-bottom: 980px;
	}
	.footer {
		margin-top: -970px;
		background-position: top 0 left 19%;
	}
}
/* Estilos del Botón Flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
	left: auto;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Asegura que esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Para una animación suave al pasar el mouse */
}

/* Efecto al pasar el cursor */
.whatsapp-flotante:hover {
    transform: scale(1.1); /* Lo hace un poco más grande */
    background-color: #1ebe57; /* Un verde un poco más oscuro */
}

/* El tamaño del icono SVG interno */
.whatsapp-icono {
    width: 35px;
    height: 35px;
    fill: currentColor;
}

/* Ajuste para pantallas de celulares */
@media screen and (max-width: 768px) {
    .whatsapp-flotante {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-icono {
        width: 28px;
        height: 28px;
    }
}
/* --- BARRA DEL REPRODUCTOR (Diseño Definitivo) --- */
.reproductor-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    border-top: 1px solid #222;
    z-index: 990; /* Un poco menor al WhatsApp que debe tener 1000 */
    padding: 8px 30px; /* 30px de margen en los lados para que respire */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- LADO IZQUIERDO: Nombre y En Vivo --- */
.reproductor-lado.izq {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea los textos a la izquierda */
    text-align: right;
	padding-right: 20px; /* Da un pequeño respiro para que no toque literalmente el botón de Play */
    padding-left: 0px;
    gap: 4px;
}

/* --- CENTRO: El Audio --- */
.reproductor-centro {
    width: 40%;
    display: flex;
    justify-content: center;
}

.audio-fijo {
    width: 100%;
    max-width: 650px;
    height: 40px;
}

/* --- LADO DERECHO: Géneros Musicales --- */
.reproductor-lado.der {
    width: 35%;
    display: flex;
	justify-content: center;
    flex-direction: column;
    align-items: flex-start; /* CLAVE 1: Mueve todo el bloque hacia la izquierda (cerca del reproductor) */
    text-align: left; /* CLAVE 2: Alinea los textos a la izquierda para que se lean de forma natural */
    padding-left: 20px; /* Da una separación de 30px para que no choque con el reproductor */
    padding-right: 20px; /* Ya no necesitamos el espacio gigante a la derecha */
	position: relative; /* Necesario para que la animación se posicione bien */
    animation: resplandor-musical 3s infinite alternate ease-in-out;
}
/* La animación que crea un halo sutil detrás del reproductor */
@keyframes resplandor-musical {
    0% { filter: drop-shadow(0px 0px 5px rgba(255, 59, 59, 0.1)); }
    50% { filter: drop-shadow(0px 0px 15px rgba(255, 59, 59, 0.3)); }
    100% { filter: drop-shadow(0px 0px 5px rgba(255, 59, 59, 0.1)); }
}
/* --- TEXTOS --- */
.dj-nombre {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
}

.dj-generos {
    color: #777;
    font-size: 10px; /* Letra un poco más pequeña para que quepa bien */
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.6; /* Mejora la lectura si se divide en dos líneas (como en tu foto) */
	max-width: none;
}

/* --- BOTÓN EN VIVO AHORA --- */
.envivo-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(60, 10, 10, 0.4);
    border: 1px solid #b32424;
    border-radius: 50px;
    padding: 3px 12px 3px 5px;
    margin-top: 3px;
}

.envivo-circulo-fondo {
    width: 16px;
    height: 16px;
    background-color: rgba(180, 20, 20, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
}

.envivo-punto {
    width: 6px;
    height: 6px;
    background-color: #ff3b3b;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 59, 59, 0.8);
    animation: latido-streaming 1.5s infinite ease-in-out;
}

.envivo-texto {
    color: #ff4d4d;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1px;
}
/* --- ESTILIZACIÓN DEL REPRODUCTOR (Filtros de Color) --- */
.audio-fijo {
    width: 100%;
    max-width: 650px;
    height: 40px;
    outline: none;
    
    /* El truco mágico: Invierte los colores nativos y los ajusta a tonos oscuros */
    filter: invert(90%) hue-rotate(180deg) brightness(1.2) contrast(1.1);
    
    /* Le da bordes más redondeados */
    border-radius: 30px;
    
    /* Una sombra suave para que resalte sobre el fondo negro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    
    /* Transición suave para cuando pasen el mouse */
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por encima del reproductor */
.audio-fijo:hover {
    filter: invert(100%) hue-rotate(180deg) brightness(1.3) contrast(1.2);
    box-shadow: 0 6px 20px rgba(180, 20, 20, 0.4); /* Resplandor sutilmente rojo (combina con el botón En Vivo) */
    transform: translateY(-2px); /* Lo levanta un poquito al apuntarlo */
}
/* --- Animación de Latido para el Logo --- */
.logo-animado {
    animation: latido-logo 2s infinite ease-in-out;
    transform-origin: center center;
	max-width: 130px; /* Controla el ancho del logo */
    height: auto; /* Mantiene la proporción para que no se deforme */
}

@keyframes latido-logo {
    0% { transform: scale(1); filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0)); }
    50% { transform: scale(1.08); filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.4)); } /* Crece un 8% y emite un leve brillo */
    100% { transform: scale(1); filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0)); }
}
.logo-animado:hover {
    filter: drop-shadow(0px 0px 12px rgba(138, 43, 226, 0.8)); /* Brillo púrpura que combina con tu fondo */
    transition: filter 0.3s ease;
    cursor: pointer;
}
/* =========================================
   REDES SOCIALES: TAMAÑO Y COLORES
   ========================================= */

/* 1. Tamaño y separación base (Para que no se vean pequeños) */
.header__right__social a,
.header__right__social a i,
.header__nav .social a i {
    font-size: 24px !important; 
    margin-left: 15px !important;
    color: #ffffff;
    transition: all 0.3s ease;
    display: inline-block;
}

/* 2. Efecto de salto al pasar el mouse */
.header__right__social a:hover i,
.header__nav .social a:hover i {
    transform: scale(1.3) translateY(-2px);
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));
}

/* 3. Colores Oficiales al pasar el mouse */
.header__right__social a:hover .fa-facebook,
.header__right__social a:hover .fa-facebook-f,
.header__nav .social a:hover .fa-facebook {
    color: #1877F2 !important;
}

.header__right__social a:hover .fa-twitter,
.header__nav .social a:hover .fa-twitter {
    color: #1DA1F2 !important;
}

.header__right__social a:hover .fa-instagram,
.header__nav .social a:hover .fa-instagram {
    color: #E1306C !important;
}

.header__right__social a:hover .fa-youtube,
.header__right__social a:hover .fa-youtube-play,
.header__nav .social a:hover .fa-youtube {
    color: #FF0000 !important;
}
html { scroll-behavior: smooth; }
/* --- Corrección: Marca de Agua detrás del texto --- */
.section-title h1 {
    position: absolute;
    left: 0;
    top: -20px; /* Ajusta la altura si es necesario */
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0.05); /* Hace el texto muy tenue */
    font-size: 100px; /* Tamaño del texto de agua */
    font-weight: 700;
    text-transform: uppercase;
    z-index: 0; /* Lo manda al fondo */
    pointer-events: none; /* Evita que el usuario lo seleccione por error */
}

/* Asegura que el texto real esté siempre al frente */
.section-title h2,
.about__text p,
.about__text h1 {
    position: relative;
    z-index: 2; /* Lo trae al frente */
}
/* =========================================
   ESTILOS DEL CALENDARIO / AGENDA
   ========================================= */

.agenda {
    /* Aseguramos que el fondo se fusione con tu tema */
    background-color: transparent; 
}

.calendar-container {
    background-color: #1a1a24; /* El color oscuro del panel */
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra para darle profundidad */
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    color: #fff;
}

.calendar-month-year {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.calendar-nav {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease;
    outline: none;
}

.calendar-nav:hover {
    color: #fff;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px; /* Separación entre los cuadros */
}

.calendar-days div {
    background-color: #2a2a36; /* Color gris oscuro de los cuadros */
    color: #ddd;
    border-radius: 8px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.calendar-days div.empty {
    background-color: transparent; /* Cuadros invisibles para alinear los días */
}

.calendar-days div.day {
    cursor: pointer;
}

/* Efecto al pasar el mouse por un día disponible */
.calendar-days div.day:hover {
    background-color: #5b2fa8; /* Morado que combina con el tema BGMusic */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(91, 47, 168, 0.4);
}

/* Diseño para los días que ya tienes contratados */
.calendar-days div.booked {
    background-color: #b32424; /* Rojo para destacar que está ocupado */
    color: #fff;
    font-weight: bold;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}

/* Adaptación para celulares */
@media screen and (max-width: 768px) {
    .calendar-container {
        padding: 20px;
    }
    .calendar-days div {
        height: 45px;
        font-size: 14px;
    }
    .calendar-weekdays {
        font-size: 10px;
    }
}
/* =========================================
   BOTÓN VOLVER ARRIBA
   ========================================= */
.volver-arriba {
    position: fixed;
    bottom: 95px; /* Lo ubica justo encima del botón de WhatsApp */
    right: 25px; /* Alineado a la derecha */
    width: 45px;
    height: 45px;
    background-color: #5b2fa8; /* Morado estilo BGMusic */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 995; /* Para que flote sobre el fondo, pero debajo de menús modales */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    opacity: 0; /* Oculto por defecto */
    visibility: hidden; 
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Efecto al pasar el mouse */
.volver-arriba:hover {
    background-color: #9b51e0;
    color: #ffffff;
    transform: translateY(-3px); /* Pequeño salto hacia arriba */
    box-shadow: 0 6px 15px rgba(155, 81, 224, 0.4);
}

/* Esta clase se activará automáticamente al bajar la página */
.volver-arriba.mostrar {
    opacity: 1;
    visibility: visible;
}
/* =========================================
   AJUSTES DE ESPACIOS: SECCIÓN ACERCA
   ========================================= */

/* 1. Reduce el espacio blanco gigante de arriba y abajo */
#acerca {
    padding-top: 60px !important; 
    padding-bottom: 50px !important; 
}

/* 2. Acerca el párrafo al título "DJ BRYAN GONZALEZ" */
#acerca .section-title {
    margin-bottom: 15px !important; 
}

#acerca .section-title h1 {
    margin-top: 0 !important;
}

/* 3. Ajusta el espacio entre el texto y el botón morado */
#acerca .about__text p {
    margin-top: 0;
    margin-bottom: 25px;
}
/* =========================================
   AJUSTES DE ESPACIOS: SECCIÓN AGENDA
   ========================================= */

#agenda {
    padding-top: 50px !important; 
    padding-bottom: 0px !important; /* Reducido a cero para matar el espacio extra */
}

#agenda .section-title {
    margin-bottom: 30px !important; 
}
/* =========================================
   EFECTO TRANSPARENCIA (OVERLAY): GALERÍA VISUAL
   ========================================= */
#videos {
    /* El linear-gradient es la capa semi-transparente. Los números (25, 0, 50) son el tono morado oscuro y el 0.85 es la opacidad */
    /* Asegúrate de cambiar 'img/ruta-de-tu-imagen.jpg' por una imagen real de tu carpeta img */
	/* Fíjate en los ../ antes de img para que encuentre la carpeta correctamente */
    background: linear-gradient(rgba(25, 0, 50, 0.85), rgba(25, 0, 50, 0.85)), url('../img/ddj1000srt.jpg') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important; /* Este es el efecto Parallax que lo hace ver moderno */
    
    padding-top: 80px !important;
    padding-bottom: 50px !important; 
    margin-bottom: 0px !important;
}

/* Forzamos a quitar el margen de las cajas de video */
#videos .youtube__item {
    margin-bottom: 0px !important; 
}

/* Volvemos a poner las letras en blanco para que brillen sobre el fondo oscuro */
#videos .section-title h2,
#videos .youtube__item__text h4 {
    color: #ffffff !important; 
}

/* Mantenemos transparente el fondo de los textos de los videos */
#videos .youtube__item__text {
    background-color: transparent !important;
}
/* =========================================
   AJUSTE DE ESPACIO: GALERÍA Y FOOTER
   ========================================= */
#videos {
    padding-bottom: 80px !important; /* Le devolvemos un espacio normal a la foto */
}

/* Quitamos el margen negativo para que no se monte */
#videos + * {
    margin-top: 0px !important; 
    position: static !important; 
}