/*! Bootstrap 4 custom build by Themestr.app */

/*navigation bar color */
.navbar{
  background-color: #C0C0C0 !important;
}

/*the color of each item in navigation bar*/
.nav-item a {

    color: black !important;
}

.navbar-nav{
  font-size: 25px !important;
}

.navbar-brand{
  font-size: 1.5rem;
}

.navbar .navbar-collapse {
  text-align: center;
}

/*the button that appears on mobile for navigation bar*/
.custom-toggler.navbar-toggler {
    border-color: #ae0000;
}


/*this is for the background picture on the home page*/
  main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

.main{
  position: relative;

  min-height: 100vh;

  padding: 220px 0 200px;
  overflow-x: hidden;

}

.main::before{
  content: "";
  background: url(FrontPicture.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left:0px;
  opacity: 0.4;
}

/*Kaprichosa on the front page */
#title{
 text-shadow: 2px 2px 5px white;
  position:relative;
  font-size: 6rem;
  text-align: center;
  font-weight:bold;

}

/*The slogan on the front page */
#slogan{
  text-shadow: 3px 3px 5px white;
  font-weight: 600;
  position: relative;
  font-size: 2.5rem;
  font-style:italic;
  color:#C21807;


}


mark{
  background-color: #f9f9f9;
}

/* this for mobiles, so the formatting is correct */
@media (max-width: 768px){
  .main{
    padding: 200px 0;

  }

}

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

      #title{
        font-size: 3rem;
      }
      #slogan{
        font-size: 1.5rem;
      }
      #address{
      font-size: 1rem;
      }

    }

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

      #title{
        font-size: 3.5rem;
      }
      #slogan{
        font-size: 1.5rem;
      }
      #taco1{
        font-size: 1.7rem;
      }
      #taco2{
        font-size: 1.94rem;
      }
      #address{
      font-size: 1rem;
      }

      sm{
        font-size: 2rem;
      }

    }

    @media screen and (device-aspect-ratio: 40/71) {
      #menuHeader{
        font-size: 2.5rem !important;
      }
      #taco1{
        font-size: 1.33rem;
      }
      #taco2{
        font-size: 1.6rem;
      }
      #taco3{
        font-size: 1.6rem;
      }
      sm{
        font-size: 1.7rem;
      }
    }





    #page-container {
      position: relative;
      min-height: 100vh;
    }

    #content-wrap {
      padding-bottom: 2.5rem;    /* Footer height */
    }


/*footer color and font size */
footer{
  background-color:		#C0C0C0;
   bottom: 0;
   width: 100%;




}


body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

.footerCall{
  font-size:1.5rem;
}

/*font size for the menu page*/
#menuSlogan{
  font-size: 2rem;
}
#smallText{
  font-size:0.965rem;
}


/*footer size and formatting */
#footerh1{
  font-size: 1.5rem;

}

#footerCall{
  font-size: 1.5rem;
}
#FooterPic{
  width: 80%;
}
#footerSpace{
  margin-left: 0 !important;

}
.footerCall{
  color: black !important;
}

/* the logo */
img{
  height: 20%;
  width: 20%;
}

h5{
  color: black;
  font-size: 4rem;

}

/*menu card description that is in italics */
.card-text{
  color: #ae0000;
  font-style: italic;
}

h1{
  font-size: 4rem;
}

.menupdf{
  color: #ae0000;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: bold;
}

#hourTitle{
    font-size:1.5rem;
    font-weight: bold;

}

#hours{
  font-size:1.5rem;
}
#address{
  font-size: 2rem;
}

.locationHead{
  font-size:3rem;
  padding-top: 10%;
}

.card-title{
  font-size: 2rem;
}

/*the embedded google maps formatting*/
.map-responsive{
       position: relative;
       padding-bottom: 75%; // This is the aspect ratio
       -height: 0;
       overflow: hidden;

}
.map-responsive iframe{
      position: absolute;
       top: 0;
       left: 0;
       width: 100% !important;
       height: 100% !important;
}