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

	Theme Name: Gone Elvis Band
	Front-end developer: Suman Shrestha
	Author Design: Suman Shrestha
	Author URI: http://www.goneelvisband.com/
	Date: 12/28/2023

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

#fonts

-----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* -----------------------------------------

#basic styles

-----------------------------------------*/
body{background:#000;font-size:16px;line-height:160%; font-family: 'Poppins', sans-serif; font-weight:400;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;overflow-x:hidden;top:0!important}

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

#typography

-----------------------------------------*/
h1,h2,h3,h4,h5,h6{color:#111;font-weight:normal;margin-bottom:30px;line-height:1.2}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
h1{font-size:36px}
h2{font-size:38px}
h3{font-size:28px}
h4{font-size:21px}
h5{font-size:16px}
h6{font-size:14px}
.header{font-size:28px;color:#1c1d28;margin-bottom:30px}
.subheader{font-size:24px; font-weight: 700; color:#1c1d28;margin-bottom:25px; display: block;}
p{margin:0 0 30px 0}
em{font-style:italic}
strong,b{font-weight:bold}
small{font-size:80%}
hr{border:solid #ccc;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}

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

#links

-----------------------------------------*/
a,a:visited{text-decoration:underline;
-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease;
-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;transition:background .3s ease}
p a,p a:visited{line-height:inherit}

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

#lists

-----------------------------------------*/
ul,ol{margin-bottom:20px;margin-left:10px}
ul{list-style:disc}
ol{list-style:decimal}
ul ul,ul ol,
ol ol,ol ul{margin:4px 0 5px 30px}
ul ul li,ul ol li,
ol ol li,ol ul li{margin-bottom:6px}
li{line-height:1.3;margin-bottom:7px}
li p{line-height:1.3}

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

#images

-----------------------------------------*/
img{max-width:100%;height:auto}
a img{border:none}

.alignleft{float:left;clear:left;margin:0 20px 20px}
.alignright{float:right;margin:0 0 20px 20px}
.alignnone{margin:0 auto 20px;display:block}
img[align="right"],
img[style*="float: right"],
img[style*="float:right"]{
  margin: 0 0 20px 20px;
}
img[align="left"],
img[style*="float: left"],
img[style*="float:left"]{
  margin: 0 20px 20px 0;
}

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

#buttons

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

.btn a,
.btn span{text-decoration:none;color:#fff}

.btn,
.button,
input[type="submit"],
input[type="button"]{background: none; padding: 14px 30px; border-radius: 0px;color:#fff;border:2px solid #f26c4f;display:inline-block;font-size:18px;font-weight:400; text-decoration:none; text-transform: capitalize; cursor:pointer;line-height:150%;vertical-align:top;transition:all .3s}

a.button:hover,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;background:#f26c4f;color:#fff; text-decoration: none;}

.button:active,
a.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active{-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;background:#f26c4f;color:#fff}

button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0}

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

#forms

-----------------------------------------*/
form{margin-bottom:30px}
fieldset{margin-bottom:30px}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select{border:1px solid #e9eaec;padding:10px 14px;outline:none;font-size:13px;color:#777;margin:0;display:inline-block;background:#fff;border-radius:0;box-shadow:none}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus{color:#63686c;border:1px solid #0F95E9}
label,
legend{display:block;font-weight:bold;font-size:13px}
input[type="checkbox"]{display:inline}
label span,
legend span{font-weight:normal;font-size:13px;color:#444}
.form-control:focus{border-color:inherit;-webkit-box-shadow:none;box-shadow:none}
::-webkit-input-placeholder{color:#587186}
:-moz-placeholder{color:#587186}
::-moz-placeholder{color:#587186}
:-ms-input-placeholder{color:#587186}
.gsc-control-cse *{box-sizing:content-box}

.title2 {color: #fff; font-size: 40px; text-transform: uppercase; font-weight: 700; text-align: center; position: relative; padding: 70px 0 0; margin: 0 0 55px;}
.title2::before {position: absolute; top:0; left: 50%; transform: translateX(-50%); content: ''; background: url(images/ico.png); width: 53px; height: 53px;}
.title2 span {display: inline-block; border-bottom: 3px solid #ff3d33; position: relative;}
.title2 span::after {content:"\f0dd"; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #ff3d33; font-family: 'Fontawesome';} 


header {position: fixed; width: 100%; z-index: 9999;}  
header .navbar-brand {margin: 0; padding: 5px 0 0;}
header .navbar-expand-md .navbar-nav .nav-link {color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 500;}
header .navbar-expand-md .navbar-nav .nav-link:hover, header .navbar-expand-md .navbar-nav .nav-item.active .nav-link {color: #ff3d33;}
header .nav-item {margin: 0 10px;}

#header.header {background: rgba(0, 0, 0, 0.70);}
#header.header .navbar-brand {width: 100px; transition: ease-in-out;}
#header.header .navbar-brand img {max-width: 100%;}

a.getBtn {background: #ff3d33; border-radius: 25px; color: #fff; text-transform: capitalize; font-size: 14px; padding: 10px 15px; text-decoration: none; font-weight: 600;} 
a.getBtn:hover {background: #fff; color: #ff3d33;}

.spot {position: fixed; bottom: 75px; right: 25px; z-index: 9999;}

/* Carousel */
.sliderCol #carousel-1::before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.70); z-index: 1;}
.sliderCol #carouselExampleCaptions {height: 100vh; position: relative; background: #000;}
.sliderCol #carousel-1 .carousel-inner .carousel-item {height: 100vh; background-position: center !important;}
.carousel-caption {position: absolute; z-index: 99; top: 55%; transform: translateY(-50%); left: 0; right: 0; text-align: left;}
.carousel-caption h1 {color: #fff; font-weight: 700; text-transform: uppercase; font-size: 70px; position: relative;}
.carousel-caption h1 span {display: block; font-size: 50px;}
.carousel-caption h1::before {content: ''; background: url('images/ico.png'); position: absolute; top: -30px; left: 25px; width: 53px; height: 53px;}
.carousel-caption p {font-size: 20px; line-height: 30px;}
.carousel-control-next, .carousel-control-prev {z-index: 99;}
.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {background: none;}

/* About Band */
.about {text-align: center; position: relative; padding: 150px 0; background: url(images/about-bg.png) no-repeat bottom center; background-size: 100%; z-index: 1;}
.about::before {background: rgba(0, 0, 0, 0.8); content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}

.chordPop {display: none;}
.chordPop h2 {font-size: 20px; margin: 0 0 5px; font-weight: 700;}
.chordPop h3 {font-size: 16px; margin: 0 0 5px;}
.chordPop pre {color: #000; line-height: 16px;}  

.bandPop {display: none;}
.bandPop h5 {text-transform: capitalize; color: #f26c4f; font-size: 32px; font-weight: 700; margin: 0;}
.bandPop h6 {margin: 0 0 20px; font-size: 18px; color: #000; text-transform: capitalize; font-weight: 400;}
.bandPop p {color: #000;}
.about p b {text-decoration: underline;}
.bandPop .socials {display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 0 25px;}
.bandPop .socials a {width: 30px; height: 30px; color: #000; border: 1px solid #000; border-radius: 50%; margin: 0 10px 0 0; text-align: center; line-height: 32px;}
.bandPop .socials a:hover {color: #fff; border: 1px solid #f26c4f; background: #f26c4f;}
 
/* Band Member */
.bandMember {position: relative; padding: 80px 0 150px; background: url(images/band-bg.png) no-repeat top center; background-size: 100%;}
.bandMember::before {background: rgba(0, 0, 0, 0.9); content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.bandMember .title2 {margin: 0 0 70px;}
.bandBx {height: 450px; position: relative; text-decoration: none; display: block; transition: transform .2s; }
.bandBx .bandImg {width: 100%; height: 100%; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); display: block; background-position: top center; background-size: cover;}
.bandBx:hover .bandImg {-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */ filter: grayscale(0);}
.bandBx .bandInfo {position: absolute; bottom: 0; left: 0; right: 0; background: #ff3d33; text-align: center; padding: 20px 10px;}
.bandBx:hover {transform: scale(1.03);}
.bandBx .bandInfo h6 {margin: 0; text-decoration: none; text-transform: uppercase; color: #fff; font-size: 16px;}
.bandBx .bandInfo em {color: #fff; font-size: 14px;}
.bandBx .socials {display: flex; justify-content: center; align-items: center; margin: 0;}
.bandBx .socials a {width: 30px; height: 30px; color: #fff; border: 1px solid #fff; border-radius: 50%; margin: 0 10px 0 0; text-align: center; line-height: 32px;}
.bandBx .socials a:hover {color: #000; border: 1px solid #000;}

/* Testimonials */
.testimonials {padding: 150px 0; background: url(images/testimonials-bg.jpg) no-repeat center; background-size: cover; text-align: center; position: relative;}
.testimonials::before {background: rgba(0, 0, 0, 0.8); content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.testimonials p {font-size: 18px; line-height: 30px; font-weight: 400; color: #fff;}
.testimonials strong {display: block; text-align: center; padding: 0 0 5px;}
.testimonials em {font-size: 16px; font-style: italic; display: block; color: #f26c4f;}
.testimonials .carousel-control-next-icon, .testimonials .carousel-control-prev-icon {width: 20px; height: 26px; background-color: #000;}
.testimonials .carousel-control-prev {background: none; content:"\f104"; color: #000; font-family: Fontawesome;}
.testimonials .carousel-control-next {background: none; content:"\f104"; color: #000; font-family: Fontawesome;}

/* Upcoming and Video Column */
.upEventCol {position: relative; padding: 50px 0;}
.title3 {color: #fff; text-transform: capitalize; font-weight: 600; font-size: 30px; position: relative; padding: 10px 0 0 70px;}
.title3::before {content: ''; background: url(images/ico.png); width: 53px; height: 53px; background-size: contain; position: absolute; top: 0; left: 0;}
.eventBx {display: flex; justify-content: space-between; align-items: stretch; background: #1c1c1c; border-top: 1px solid #ff3d33; margin: 0 0 15px;}
.eventBx .date {width: 120px; background: #ff3d33; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 24px; flex-direction: column; font-size: 28px; font-weight: 600;} 
.eventBx .date span {padding: 0 0 5px;}
.eventBx .eventInfo {width: calc(100% - 120px); padding: 15px;}
.eventBx .eventInfo h4 {color: #fff; font-size: 16px; font-weight: 500; margin: 0;}
.eventBx .eventInfo span {color: #ff3d33; font-size: 14px; display: block; margin: 0;}
.eventBx .eventInfo em {display: block; font-size: 14px;}
.upEventCol iframe {width: 100% !important; height: 380px !important;}

/* Footer */
.footer {border-top: 1px solid #fff; padding: 10px 0; position: relative;}
.footer h4 {text-transform: capitalize; color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 5px;}
.footer .num {display: inline-block; color: #ff3d33; text-decoration: none;}
.footer .num:hover {color: #fff;}
.footer .num i {color: #fff;}
.socialbtn {display: flex; justify-content: flex-end; align-items: center;}
.socialbtn a {display: inline-block; width: 30px; height: 30px; border: 1px solid #fff; line-height: 30px; text-align: center; color: #fff; border-radius: 50%; margin: 0 0 0 8px;}
.socialbtn a:hover {color: #000; border: 1px solid #fff; background: #fff;}

@media only screen and (max-width:991px) {
  header .nav-item {margin: 0;}
    .eventBx .date {width: 90px;}
    .eventBx .eventInfo {width: calc(100% - 90px);}
    .title3 {font-size: 22px; padding: 0 0 0 55px;}
    .title3::before {width: 40px; height: 40px;}
    .bandBx {margin: 0 0 30px;}
}

@media only screen and (max-width:767px) {
    header {position: relative;}
    .navbar-toggler {background: #ccc;}
    /* .navbar-toggler-icon {background: url('images/bar.png') no-repeat center;} */
    #header.header {background: none !important;}
    #header .navbar-brand {width: 100px;}
    .navbar-nav {margin-top: 15px;}
    header .nav-item {margin: 0;}
    .sliderCol #carousel-1 .carousel-inner .carousel-item {height: 70vh;}
    .carousel-caption h1 {font-size: 50px;}
    .carousel-caption h1 span {font-size: 24px;}
    .carousel-caption h1::before {top: -44px; left: 12px;}
    .carousel-caption p {font-size: 16px; line-height: 24px;}
    .title3 {margin: 30px 0;}
    .title2 {font-size: 32px;}
    .eventBx:last-child {margin-bottom: 45px;}
    .bandPop h5 {margin: 25px 0 0; font-size: 24px;}
    .bandPop h6 {margin: 0 0 10px;}
    .bandPop .socials {margin: 0 0 10px;}
    .bandPop p {font-size: 14px; line-height: 20px;}
}

@media only screen and (max-width:576px) {
  #header .navbar-brand {width: 70px;}
  .carousel-caption {top: 40%;}
  .footer {margin-top: 90px;}
  .spot {bottom: 125px; width: 100%; left: 0; right: 0; padding: 0 15px;}
  .spot iframe {width: 100% !important;}
    .footer .row {display: block; text-align: center;}
    .footer .col {width: 100% !important;}
    .footer .text-end {text-align: center !important;}
    .footer .socialbtn {justify-content: center;}
    .footer .socialbtn a {margin: 0 5px;}
    .footer h4 {margin-top: 10px;}
}