@charset "UTF-8";
/*
Theme Name: Julio Botti
Theme URI: https://www.juliobotti.com
Author: Admerasia
Author URI: https://www.admerasia.com
Description: Julio Botti Website theme created by Admerasia team is a stunningly looking theme.
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.0
*/

/* * {
  box-sizing: border-box;
} */

html {
  font-size: 16px;
}

body {
  color: #000;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

a,
a:hover {
  text-decoration: none;
  color: inherit;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
  color: #f05f40;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  color: #000;
}

h2 {
  font-size: 4.6rem;
}

h1.hero-title {
  font-size: 4rem;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
  color: inherit;
}

.btn {
  text-transform: capitalize;
  font-weight: 600;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
  background-color: #155555 !important;
}

.btn-primary {
  background-color: #000;
  border-color: #000;
}

.btn-xl {
  padding: 1rem 2.5rem;
  min-width: 168px;
}

.grey-text {
  color: #7d7a7a;
}

.site-logo {
  max-height: 56px;
}

.w-50-90 {
  width: 50%;
}

.menu-contact {
  color: #fff !important;
  padding: 0.3rem 1rem !important;
  margin-left: 1rem;
}

.menu-contact.current {
  color: #f05f40 !important;
}

.div-center {
  margin: 0 auto;
}

.bottom-img {
  display: none;
}

/** Home Page **/

.index-page {
  background-image: url(images/home/home-bg-no-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.jb-leaning {
  position: absolute;
  left: 160px;
  top: 120px;
}

.jb-leaning img {
  height: 90vh;
  min-height: 635px;
}

.castle-mountain {
  position: absolute;
  right: -7px;
  top: 300px;
}

.castle-mountain img {
  height: 80vh;
  min-height: 600px;
}

.index-page .about-julio {
  position: relative;
}

.index-page .carousel-cell {
  counter-increment: carousel-cell;
  /* max-height: 200px;
  width: auto; */
}

.flickity-prev-next-button {
  border-radius: inherit;
  background-color: #000;
}

.flickity-button:hover {
  background: #000;
}

.flickity-prev-next-button.next {
  right: -48px;
}

.flickity-prev-next-button.previous {
  left: -40px;
}

.flickity-prev-next-button .flickity-button-icon {
  color: #fff;
}

.tour {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 0rem;
  z-index: 2;
}

.tour .car,
.index-page .car {
  position: absolute;
  left: 0;
  top: 1160px;
}

.tour-list-home {
  z-index: 20;
}

.tour-list-home .row {
  min-height: 110px;
}

.music {
  padding-bottom: 0;
  padding-top: 0;
}

.music h4 {
  font-weight: 700;
}

.music .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
  max-width: 300px;
  height: auto;
}

.llama-fixed {
  position: relative;
  margin-left: calc(-18vw + 60px);
}

.more-julio {
  position: relative;
  padding-bottom: 0;
}

.index-page .pc-bottom-img {
  margin-top: -35rem;
}

/*** News Page **/

.news-page {
  background-image: url(images/news/news-bg-no-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.news-page header.masthead {
  padding-top: 8.7rem;
}

.julio-floating-newspaper {
  position: absolute;
  top: 30vh;
}

.news-frame {
  position: relative;
  background-image: url(images/news/news-frame.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 72vh;
  min-height: 500px;
}

.news-page .news-header {
  position: absolute;
  bottom: 265px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.swinger {
  position: absolute;
  left: 35vw;
}

.floating-cloud {
  position: absolute;
  right: -170px;
  top: 26rem;
}

.news-page .news {
  padding: 3rem 0 0;
  z-index: 3;
}

.news-item {
  min-height: 195px;
}

.news h3 {
  font-weight: 700;
}

.news .news-date {
  color: inherit;
  font-weight: 300;
}

.news-page .moon {
  *display: none;
  position: absolute;
  top: 85rem;
  left: 20rem;
}

.news-page .pc-bottom-img {
  margin-top: -25rem;
}

/** News Detail Page **/

.news-detail-page {
  background-image: url(images/news/news-detail-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

header.masthead.news-detail {
  padding-top: 10rem;
  height: inherit;
  min-height: inherit;
}

.news-content,
.news-content p,
header.masthead .news-content p {
  *padding: 2.5rem 0;
  *line-height: 1.9rem;
  line-height: 1.64rem;
}

.news-date {
  color: #d8d8d8;
}

.news-detail .news-title {
  font-size: 3.5rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.6rem 0.97rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.page-link {
  padding: 0.5rem 0.91rem;
  width: 38px;
  height: 38px;
  color: #000;
  background-color: transparent;
  border: 0;
}

.page-link.active {
  background-color: #000;
  color: #fff;
}

.news-detail-page .pc-bottom-img {
  margin-top: -5rem;
}

/*TOUR PAGE*/

.tour-page {
  background-image: url(images/tour/tour-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

header.masthead.tour-hero {
  padding-top: 10rem;
}

.tour-frame {
  position: relative;
  background-image: url(images/tour/tour-frame.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 130vh;
  min-height: 950px;
}

.tour-header {
  position: absolute;
  top: 198px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tour-car {
  position: absolute;
  bottom: 13rem;
  left: -2vw;
}

.tour-list {
  position: relative;
  padding: 5rem 0 0;
}

.tour-list h3 {
  font-weight: 700;
}

.floating-penguin {
  position: absolute;
  right: 300px;
  bottom: 26rem;
  z-index: -1;
}

.show-message {
  padding: 10rem 0 8rem;
}

.btn-rsvp-ticket {
  min-width: 103px;
}

.tour-page .pc-bottom-img {
  margin-top: -20rem;
}

.pc-bottom-img {
  margin-top: -180px;
}

/*MUSIC PAGE*/

.music-page {
  background-image: url(images/music/album-bg-wo-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

header.masthead.music-hero {
  padding-top: 10rem;
}

.music-frame {
  position: relative;
  background-image: url(images/music/music-frame.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 72vh;
  min-height: 500px;
}

.music-header {
  position: absolute;
  bottom: 260px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.music-page .jb-flowers {
  position: absolute;
}

.music-page .floating-disc {
  position: absolute;
  right: 200px;
  top: 23rem;
}

.album-list {
  padding: 10rem 0 0;
}

.album-list .portfolio-box {
  margin: 0 0;
  max-width: 300px;
}

.album-list .portfolio-box .portfolio-box-caption {
  background: #000;
}

.album-list h3 {
  font-weight: 700;
}

/*ALBUM PAGE*/

.album-page {
  background-image: url(images/music/music-bg-no-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.album-detail {
  padding: 13rem 0 0;
}

.album-detail h1,
.album-detail h4 {
  font-weight: 700;
}

.album-page .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
  max-width: 255px;
  height: auto;
}

.album-desc,
.album-desc p {
  font-size: 1.22rem;
  margin-bottom: 0.9rem;
}

.album-nav-left {
  text-align: left;
}

.album-nav-right {
  text-align: right;
}

/*CONTACT PAGE*/

.contact-page {
  background-image: url(images/contact/contact-bg-no-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

header.masthead.contact-hero {
  padding-top: 10rem;
}

.contact-frame {
  position: relative;
  background-image: url(images/contact/contact-frame.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 72vh;
  min-height: 500px;
}

.contact-header {
  position: absolute;
  bottom: 250px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.contact-page .jb-standing {
  position: absolute;
  right: 90px;
  top: 20px;
}

.contact-page .jb-cloud-below {
  position: absolute;
  right: 30px;
  bottom: -20px;
}

.contact {
  padding: 6rem 0 0;
}

.saxphone-float {
  position: absolute;
  right: -140px;
  top: 10rem;
}

.contact-page .bottom-cloud {
  position: absolute;
  bottom: 9rem;
}

.contact-presskit {
  width: 50%;
}

.w-90 {
  width: 90%;
}

.press-kit {
  position: relative;
  padding: 4rem 0 0;
}

.press-kit h2,
.contact h2 {
  font-weight: 600;
}

.contact-page .pc-bottom-img {
  margin-top: -100px;
}

/*ABOUT PAGE*/

.about-page {
  background-image: url(images/about/about-bg-no-bottom.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

header.masthead.about-hero {
  padding-top: 10rem;
}

.about-page .about-frame {
  position: relative;
  background-image: url(images/about/about-frame.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 72vh;
  min-height: 500px;
}

.about-page .about-header {
  position: absolute;
  bottom: 260px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.about-page .bio-title {
  font-size: 3rem;
}

.about-page .music-notes {
  position: absolute;
  left: -200px;
  top: 18rem;
}

.about-page .floating-rocks {
  position: absolute;
  left: -250px;
  top: 25rem;
}

.typewriter {
  position: absolute;
  right: 0;
  bottom: -3rem;
}

.flying-dolphin {
  position: relative;
  background-image: url(images/flying-dolphin.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0px top;
  height: 10rem;
  *animation: animate-h-move linear 10s infinite;
  *animation-direction: alternate;
  *animation-fill-mode: forwards;
  z-index: 20;
  *margin-bottom: 5rem;
}

@keyframes animate-h-move {
  from {
    background-position: 0px top;
  }
  to {
    background-position: 120% -10px;
  }
}

.timeline-container .timeline h2 {
  font-size: 1.7rem;
  padding-bottom: 0.3rem;
}

.timeline-container {
  width: 900px;
  padding: 0 0 5rem;
}

.timeline-fixed {
  position: fixed;
  left: 16.5rem;
  top: 5rem;
}

.forced-hidden {
  display: none !important;
}

.timeline-vertical .timeline-dots-wrap {
  *position: relative;
  *top: -40rem;
}

.timeline-small-box .timeline-list {
  width: 100%;
  height: 90vh;
  min-height: 620px;
}

.timeline h2 {
  font-weight: 700;
}

.timeline-small-box .box-item {
  float: left;
  height: 90vh;
  min-height: 620px;
  color: #000;
  text-align: center;
  padding-left: 3rem;
}

.timeline-vertical .timeline-dots {
  background: url("images/about/vertical-line.png") center repeat-y;
}

.timeline-vertical .timeline-dots div {
  /* div -> button */
  background: url("images/about/dot.png") center no-repeat;
  padding-left: 30px;
  color: transparent;
  height: 100%;
}

.timeline-vertical .timeline-dots li {
  *height: 55px;
  height: 48px;
}

.timeline-dots li.slide-active div {
  /* div -> button */
  background-image: url(images/about/music-note.png);
  background-size: contain;
  color: transparent;
  font-size: 25px;
  background-position: 20px -10px;
}

.timeline-mobile {
  display: none;
}

.album-thumb img {
  width: 150px;
  height: 150px;
}

.album-btn {
  max-width: 131px;
}

.about-page .pc-bottom-img {
  margin-top: -20px;
}

/** Footer **/

footer {
  background-color: #faba24;
  height: 62px;
}

.copyright {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.5px;
}