/* CSS STYLE FOR ALL PAGES =========================================================================== */
html {
    background-color: transparent;
  
}

body {
  background-color: black !important;
  
}

.container { /* This just adds extra space between each container */ 
    padding: 60px 40px !important;
    background-color: black; 
}


@media (max-width: 767px) {   

  img { /* Forces all images to fill their column, row, or container with 100% width (full width of mobile screen)*/ 
    width:100;
     min-width:100%;
  }  
    
  .container { /* Adjusts the padding around the container on the mobiel size */ 
    padding: 80px 40px !important;
    background-color: black;
  }
}




/* ------------------------------------ UNIVERSAL NAVBAR ------------------------------------ */ 

.navbar-collapse a {
  color:white;  
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

.dropdown {list-style: none;  display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

.bg-nav {
    background-color: #080614 !important;
    opacity: 1; /* Makes the Navbar slightly transparent */ 
    }

ul a { /* Changes the hyerlink color to EVERY hyperlink on the page, removes underline */
  color: #C3073F; 
  text-decoration: none;
  font-weight: 500;
}

a:hover a:link a:visited a:active a:focus { /* Removes underline for hyperlink for ALL states */
  text-decoration: none;
}


/* ------------------------------------ UNIVERSAL BANNER IMAGES & BACKGROUNDS ------------------------------------ */

.center-cropped { /* This automaticallly crops and positions your image to fill the entire vertical screen. Class must be added in HTML doc*/ 
  width: 100%;
  Height: 100vh; /* Makes background images or large banner image fill 100% vertical screen with*/ 
  background-repeat: no-repeat;
  background-size:cover;
}

.banner-cropped {  /* This automaticallly crops, and positions your image to fill 50% of the vertical screen. Class must be added in HTML doc*/ 
  width: 100%;
  height:50vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
}

@media (max-width: 767px) {   /* Makes banner image the full vertical height of any mobile screen */ 
.center-cropped {
  width: 100%;
  height:100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
}

.banner-cropped {  /* Makes banner image 30% vertical height of any mobile screen */
  width: 100%;
  height:30vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
}
}

.bg-1 { /*Changes the color of the section BG to a solid background color*/
 /*  background: #080614; */
  color: #bdbdbd; /*color designates body copy color here */
}



.nofound-bg { /*This is a fixed image bakground where the content scrolls over it, this class needs to be added in HTML */
  background-image: url("");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}



/* ------------------------------------ UNIVERSAL LINK STYLING ------------------------------------ */

.nav-pills .nav-link.active, .nav-pills .show>.nav-link { /*Makes the Location pills on headcannons section black*/
    color: #fff;
    background-color: #000000 !important;
    border: 2px solid red;
}


.intro { /*This is the large introductory text at the beginning of the webpage. This class needs to be added in the HTML document */
  font-size: 1.7em;
  line-height:1.2em;
  font-family: Georgia,serif !important;
  color: #EAECEE;
}

.introtext { /*The little blurb at the top */
color: #D5D8DC;
}
  
h1, h2, h3, h4 {
    font-family: Georgia,serif !important; /*This is the large introductory text at the beginning of the webpage. */
    font-weight: 400;
    color: #EAECEE;
}

 h5, h6 {
       font-family: Georgia,serif !important; /*This is the large introductory text at the beginning of the webpage. Story header and summaries */
    font-weight: 400;
    color: black;
}

.heading a { /* Because the section headers are anchor links (quick jump to this section using then nav), this removes the hyperlink styling from them */
  margin-bottom: 20px;
  text-decoration: none !important;
  font-weight: 500;
}


/* ------------------------------------ UNNECCESARY & EXTRA CUSTOMIZATION TO SITE CODE ------------------------------------ */


.textlink a { /* Custom hyperlink colors for use in-text, this class needs to be added in HTML Doc */ 
  text-decoration: none;
  font-weight: 700;
  color:#E8B167 !important;
}

.quicklink a { /* Custom hyperlink colors for use in-text, this class needs to be added in HTML Doc */ 
  color: #bf9600; 
  text-decoration: underline;
  font-weight: 500;
}

.dimension { /* Changes the typeface to Lato wherever this class is added */ 
  font-family: lato, sans-serif; 
}

.list-group {
    padding-left: 0;
    margin-bottom: 20px;
    color: #080614;
}

.nav-tabs { /* This is not the universal nav, but the smaller headcannon nav */
    padding-left: 15px;
    margin-bottom: 0;
    border: none;
}


.tab-content {  /* This is not the universal nav, but the smaller headcannon nav */
    border: 1px solid red;
    border-radius: 4px;
    padding: 15px;
    color: #D5D8DC !important;
}

.twoColumns{ /* This makes the text in the headcannon section two columns instead of one */ 
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}

@media (max-width: 767px) { /* Changes the two columns back to one on mobile */
  .twoColumns{
      -webkit-column-gap: 20px;
         -moz-column-gap: 20px;
              column-gap: 20px;
      -webkit-column-count: 1;
         -moz-column-count: 1;
              column-count: 1;
  }
}


.tooltip-main {
  border-radius: 50%;
  background: #f3f3f3;
  border: 1px solid white;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
}


.tooltip-inner {
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid white;
}


.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: white!important;
  /* Red */
}

.bs-tooltip-bottom .arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-width: 0 .4rem .4rem;
    transform: translateY(3px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: #000;
}