/*
Template Name: TuneHill - Music Band Template
Author: Codiov
Version: 1.0
*/

/***********************************
*********TABLE OF CONTENT***********
1. Base CSS
2. Global CSS
3. Header Section CSS
4. Mobile Menu  CSS
5. Home Slider Section CSS
6. Latest Album CSS
7. Biography Section CSS
8. Discography Section CSS
9. Band Member Section CSS
10. Upcoming Tour Section CSS
11. Gallery Section CSS
12. Latest Blog Section CSS
13. Contact Section CSS
14. Contact Address Section CSS
15. Footer Section CSS
16. Preloader Section CSS
17. Single Blog Page CSS
***********************************/

@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

/* Base CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
a, a:hover {
    text-decoration: none;
    color: #ea5252;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px;
}

input:focus, textarea:focus, button:focus {
    outline: none;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 26px;
    font-size: 15px;
    font-weight: 400;
    color: #222;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 40px;
    font-weight: 600;
}
h2 {
    font-size: 35px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}

p {
    margin-bottom: 10px;
}

/* Global CSS */
.section-padding {
    padding: 80px 0;
}
.grey-bg {
    background-color: #F6F6F6;
}
.section-title {
    margin-bottom: 35px;
}
.section-title h2 {
    display: inline;
}
.section-title h2 i {
    padding-right: 10px;
    color: #ea5252;
}
.regular-btn {
    font-size: 16px;
    background: #ea5252;
    border-radius: 3px;
    display: block;
    text-align: center;
    color: #FFF;
    margin: 15px 0;
    padding: 10px 20px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: 0;
    display: inline-block;
}
.regular-btn:hover {
    background-color: #dc3545;
    color: #FFF;
}
.band-member, .tour-latest-one, .latest-album-thumb, .biography-image, .single-album, .tour-block, .gallery-image, .latest-single-blog {
    border: 5px solid #DDD;
    border-radius: 3px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    text-align: center;
    overflow: hidden;
}
.single-album:hover, .band-member:hover, .biography-image:hover, .tour-latest-one:hover, .latest-album-thumb:hover, .tour-block:hover, .gallery-image:hover, .latest-single-blog:hover {
    border: 5px solid #ea5252;
}

.banner-section {
    background: url(../uploads/imgs/banner.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    height: 350px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.banner-section::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}
.banner-section h2 {
    color: #FFF;
    margin: 0;
}

/* Header Section CSS */
.header-section {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 80px;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.logo a {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 3px;
}
.logo a span {
    color: #ea5252;
}
nav.mainmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.mainmenu ul li {
    display: inline-block;
    margin-left: 15px;
}
nav.mainmenu ul li a {
    color: #FFF;
    display: block;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 16px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    position: relative;
}
nav.mainmenu ul li a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #ea5252;
    left: 0;
    bottom: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
nav.mainmenu ul li a:hover {
    color: #ea5252;
}
nav.mainmenu ul li a:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.fixedMenu-bg {
    background-color: #222;
}
/* Mobile Menu  CSS */
.mobile-menu-btn {
    display: none;
}
.mobile-menu-btn {
    cursor: pointer;
}
.btn-line {
    width: 28px;
    height: 3px;
    margin-bottom: 5px;
    background: #FFF;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.mobile-menu-btn:hover .btn-line {
    background: #ea5252;
}
.btn-line:last-child {
    margin-bottom: 0;
}
.mobile-menu-wrap {
    position: fixed;
    right: -1000px;
    width: 250px;
    background: #222;
    top: 0;
    height: 100%;
    z-index: 9999;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
span#close-btn {
    position: absolute;
    color: #FFF;
    font-size: 28px;
    cursor: pointer;
    right: 20px;
    top: 7px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
span#close-btn i {
    font-weight: 400px;
}
span#close-btn:hover {
    color: #ea5252;
}
nav.mobileMenu ul {
    margin: 0;
    padding: 20px;
    padding-top: 40px;
    list-style: none;
}
nav.mobileMenu ul li {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #777;
}
nav.mobileMenu ul li:last-child {
    border-bottom: 0px solid #777;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
nav.mobileMenu ul li a {
    color: #FFF;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
nav.mobileMenu ul li a:hover {
    color: #ea5252;
}

/* Home Slider Section CSS */
.home-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: #222;
}
.home-slide:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}
.home-slide-1 {
    background-image: url('../uploads/imgs/slider-3.jpeg');
}
.home-slide-2 {
    background-image: url('../uploads/imgs/slider-4.jpeg');
}
.home-slide-caption {
    color: #FFF;
}
.home-slide-caption h1 {
    text-transform: capitalize;
}
.home-slide-caption h5 {
    margin: 0;
}
.home-slide-caption p {
    margin-bottom: 0;
}

/* Latest Album CSS */
.latest-album-thumb {
    overflow: hidden;
    background-image: url( '../uploads/imgs/latest-album.jpeg' );
    background-size: cover;
    background-position: center center;
}
.latest-album-meta span {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    border-bottom: 1px solid #ea5252;
}
.latest-album-meta span:last-child {
    border: 0;
}
.latest-album-info a {
    margin-bottom: 0;
}
.latest-album-info a i {
    padding-right: 10px;
}

/* Biography Section CSS */


/* Discography Section CSS */
.album-cover {
    position: relative;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.album-cover:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.album-meta {
    position: absolute;
    left: 0;
    top: -350px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.album-meta h4 {
    color: #FFF;
}
.album-meta h4 i {
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.album-meta h4:hover i {
    padding-left: 5px;
}
.album-meta h4:hover {
    color: #ea5252;
}
.single-album:hover .album-meta {
    top: 0;
}
.single-album:hover .album-cover:before {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* Band Member Section CSS */
.band-member h4 {
    margin: 15px 0;
}
.band-member h4 span {
    display: block;
    font-size: 18px;
    color: #ea5252;
    font-weight: 400;
}
.member-img {
    position: relative;
}
.member-social-profile {
    position: absolute;
    bottom: 15px;
    left: -900px;
    width: 100%;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.member-social-profile a {
    color: #FFF;
    background: #ea5252;
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    margin: 0 5px;
    border-radius: 40px;
}
.band-member:hover .member-social-profile {
    left: 0px;
}
/* Upcoming Tour Section CSS */
.tour-latest-one {
    text-align: inherit;
}

.latest-tour-meta {
    padding: 10px 25px 0 25px;
}
.latest-tour-meta span, .tour-block span {
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDD;
}
.latest-tour-meta span:last-child, .tour-block span:last-child {
    margin-bottom: 0;
}
.latest-tour-meta span i, .tour-block span i {
    padding-right: 7px;
    font-weight: 600;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.tour-latest-one:hover span i, .tour-block:hover span i {
    color: #ea5252;
}
.tour-block {
    padding: 15px;
    text-align: inherit;
    margin-bottom: 25px;
}
.tour-block span {
    margin-bottom: 5px;
    font-size: 18px;
}
.tour-latest-one a {
    margin: 15px auto;
    width: 100%;
}
/* Gallery Section CSS */
.gallery-image {
    margin-bottom: 25px;
    overflow: hidden;
}
.gallery-image img {
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.gallery-image:hover img {
    -webkit-transform: scale(1.3) rotate(10deg);
    transform: scale(1.3) rotate(10deg);
}

/* Latest Blog Section CSS */
.s-img {
    position: relative;
}
.latest-blog-heading {
    position: absolute;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    height: 20%;
    width: 100%;
    bottom: 0;
    display: grid;
    place-content: center;
}
.latest-blog-heading h4 {
    margin: 0;
}
.latest-blog-heading h4 a {
    color: #FFF;
    transition: 0.4s;
}
.latest-blog-heading h4 a:hover {
    color: #ea5252;
}

rock-salt {
    font-family: 'Rock Salt', cursive !important;
}

/* Contact Section CSS */
.contact-section {
    background: url(../uploads/imgs/contact.jpeg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
}
.contact-section:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.contact-form form input, .contact-form form textarea {
    border: 0;
    background: transparent;
    width: 100%;
    border-bottom: 1px solid #FFF;
    padding: 10px;
    color: #FFF;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.contact-form p:last-child {
    margin: 0;
}
.contact-form form input::-webkit-input-placeholder, .contact-form form textarea::-webkit-input-placeholder {
    color: #FFF;
}
.contact-form form input::-moz-placeholder, .contact-form form textarea::-moz-placeholder {
    color: #FFF;
}
.contact-form form input:-ms-input-placeholder, .contact-form form textarea:-ms-input-placeholder {
    color: #FFF;
}
.contact-form form input::placeholder, .contact-form form textarea::placeholder {
    color: #FFF;
}
.contact-form form input:focus, .contact-form form textarea:focus, .contact-form form input:hover, .contact-form form textarea:hover {
    border-bottom: 1px solid #ea5252;
}
.contact-form form button i {
    padding-left: 10px;
}
.contact-form form button {
    margin: 0 auto;
    margin-top: 15px;
    cursor: pointer;
    display: block;
}
.form-message.error {
    color: #FF6666;
    font-size: 18px;
}
.form-message.success {
    color: lightgreen;
    font-size: 18px;
}

/* Contact Address Section CSS */
.contact-details {
    padding: 15px;
    border-radius: 3px;
}
.contact-details i {
    background: #ea5252 none repeat scroll 0 0;
    border-radius: 100px;
    font-size: 35px;
    height: 60px;
    left: 19px;
    line-height: 60px;
    margin-top: -30px;
    position: absolute;
    text-align: center;
    top: 50%;
    color: #FFF;
    width: 60px;
}
.contact-body-text {
    padding-left: 70px;
}
.contact-body-text h4 {
    margin-bottom: 0px;
}

/* Footer Section CSS */
.footer-section {
    background: #222;
    color: #FFF;
    padding: 50px 0;
}
.social-icons {
    margin-bottom: 15px;
}
.social-icons a {
    color: #FFF;
    font-size: 24px;
    margin: 0 10px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.social-icons a:hover {
    color: #ea5252;
}

/* Preloader Section CSS */
.tunehill-preloader {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ea5252;
    width: 100%;
    height: 100%;
    z-index: 999999;
}
.tunehill-preloader .spinner {
    position: absolute;
    margin: 0;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -25px;
}
.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #FFF;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}


/* Single Blog Page CSS */
.single-post-thumb {
    margin: 25px 0;
    height: 400px;
    background-size: cover;
    background-position: center;
}
.single-post header h2 {
    margin: 0;
}
.entry-meta a, .entry-footer a {
    color: inherit;
    margin-right: 15px;
    font-size: 16px;
}
.entry-meta a i, .entry-footer a i {
    color: #ea5252;
    padding-right: 5px;
}
article ul {
    margin-left: 45px;
}