/* This is the sustitution CSS file, essentially loading into the header.php that overrides the general style.css for the theme. Use this to add small CSS tweaks and code to do things / custom that you cannot find in the general themes section. */

h1 { /* overriding general h1 styles */
    font-family: "bookmania",serif !important;
    font-size:80px !important; /* use !important to go nuclear with your code, use mine not yours! */
    
}

h2, h3, h4, h5, h6, h7, h8, p {
    font-family: "proxima-nova",sans-serif !important;
}

h5 {
    font-size: 40px !important;
}

h6 {
    font-size: 40px !important;
    color: #f68f3d !important;
    text-align: center !important;
}
.h8 a {
    font-size: 25px !important;
    color: #f68f3d !important;
    text-align: center !important;
}
.page_main_title, .estp-tab-tooltip { /* breadcrumb */
    display: none !important;
}

.d-flex justify-content-between align-items-center mt-60px { /* portfolio nav tool @ bottom of the page */
    display: none !important;
}

/* start overlay side hovers / plugin */
.container-side {
  position: relative;
  width: 100%;
  height:auto;
}

.estp-tab-element.estp-html-content {
    background: #ffffff !important;
    transition: .5s ease;
}

.estp-tab-element.estp-html-content:hover {
    background: #d8d8d8 !important;
}
.image {
  display: block;
  width: 110%;
  height: auto;
}

h4 {
    font-size-adjust: 40px;
    font-family: sans-serif;
    color:black;
    }
 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ea4631;
}

.container-side:hover .overlay {
  opacity: 1;
}

.text h4 {
  font-family: "bookmania",serif !important;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%; 
  color:#FFF;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

a.navbar-brand, img.etcodes-normal-logo {
    max-width:65px !important;
}


/* parallax effect for home banner */

/*.tag-97323ae95c998c1fe63d1b1ee16ae533 {
background-attachment: fixed !important;
background-position:center !important;
}

@media screen and (max-width:767px) {
    .tag-97323ae95c998c1fe63d1b1ee16ae533 {
            
    }
} */

/* Mobile Media Query */

@media screen and (max-width:480px) {

    .header-img-mobile {
        transition: all 0.5s !important;
        padding:150px 0px !important;
    }
    
}