/******************************************************************
  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: 30px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 30px;
}

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: #07e3f5;
}

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

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

.footer {
  background-image: radial-gradient(circle at 10.08% 35.47%, #b797ff 0, #7076ff 25%, #0254e9 50%, #0033aa 75%, #001871 100%);
  padding-top: 20px;
  padding-bottom: 2px;
  margin-top: 1px;
}

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

/*.footer__address {
  margin-bottom: 50px;
}*/

.footer__address h4 {
    font-size: 26px;
    color: #ffffff;
    font-weight: 700;
}

.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: #0208fc;
  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;
}

.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: #0208fc;
  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: 45px;
  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: 30px;
  color: #0208fc;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 10px;
  background: #ffffff;
  border: none;
}

.footer__copyright__text {
  text-align: center;
}

.footer__copyright__text p {
  color: #fff;
}

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

.footer__copyright__text a:hover {
  color: #07e3f5;
}

.footer__copyright__text i {
  color: #c11;
}

/*--------------------------------- 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: 1px;
    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: 1px;
    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: 1px;
    background-position: top 0 left 19%;
  }
}