/*************************
# General
*************************/
html {
  font-family: sans-serif;
}
html,
body {
  position: relative;
  height: 100%;
  color: #3e4444;
  font-size: 16px;
  font-family: "Noto Sans", "Lato", "Roboto", sans-serif;
  background-color: #ffffff;
}
body {
  display: flex;
  flex-direction: column;
  max-width: 1920px;
  margin: 0 auto;
}
main {
  flex: 1; 
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
h1 {
  font-size: 2.25rem;
  font-size: clamp(2rem, 4vw, 2.25rem);
}
h2 { 
  font-size: 2rem;
  font-size: clamp(1.75rem, 3.5vw, 2rem);
}
h3 { 
  font-size: 1.75rem;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
}
h4 { 
  font-size: 1.5rem;
  font-size: clamp(1rem, 3vw, 1.5rem);
}
h5 { 
  font-size: 1.25rem;
  font-size: clamp(.938rem, 2.5vw, 1.25rem);
}
h6 { 
  font-size: 1rem;
  font-size: clamp(.938rem, 2vw, 1rem);
}
p {
  font-size: 1rem;
  font-size: clamp(.938rem, 2vw, 1rem);
  line-height: 1.75;
}
/*h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.6rem;
}
h3 {
  font-size: 2.2rem;
}
h4 {
  font-size: 1.8rem;
}
h5 {
  font-size:1.5rem;
}
h6 {
  font-size: 1.2rem;
}
p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 1em 0;
}*/
main a:link, main a:visited {
  color: #00205B;
  text-decoration: underline;
  text-decoration-color: #00205B; 
}
main a:hover:after, main a:focus:after, main a:active:after {
  content: "\f08e";
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  padding-left: 6px;
}
img,
video {
  object-fit: cover;
}
.anchor:hover:after, 
.anchor:focus:after, 
.anchor:active:after {
  content: "";
  display: none;
}
.dotLine {
  text-align: center;
}
.dotLineDot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #cccccc;
  border-radius: 50%;
  display: inline-block;
}
.dotLineStar:after {
  content: "\f005";
  font-family: "FontAwesome";
  font-size: 16px;
  color: #cccccc;
  margin: 0 5px;
  display: inline-block;
}
.anchor {
  display: block;
  padding-top: 50px;
  margin-top: -50px;
}

/*************************
# Navigation Initial Mobile View
*************************/
.navigation {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 1920px;
  height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(69,65,64,.2);
  margin: 0 auto;
  z-index: 999;
}
.nav-logo {
  font-size: 32px;
  font-family: "Bebas Neue", cursive;
  letter-spacing: 2px;
  font-variant: small-caps;
  text-transform: none;
  height: 50px;
  line-height: 50px;
  padding: 0 2%;
  background-color: transparent;
}
.nav-logo a {
  text-decoration: none;
}
.nav-logo a:hover, 
.nav-logo a:focus, 
.nav-logo a:active {
  text-decoration: underline;
  text-decoration-color: #bf0d3e;
}
.nav-logo a:hover:after, 
.nav-logo a:focus:after, 
.nav-logo a:active:after, 
.nav-menu a:hover:after, 
.nav-menu a:focus:after, 
.nav-menu a:active:after {
  content: "";
  display: none;
}
.nav-logo img {
  width: 25px;
}
#shumei {
  color: #00205B;
}
#wiggins {
  color: #bf0d3e;
}


/*************************
# Navigation Menu & Toggle
*************************/
.nav-toggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: transparent;
  cursor: pointer;
}
.icon-bar {
  display: block;
  position: absolute;
  right: 12px;
  width: 26px;
  height: 2px;
  background-color: #ffffff;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-bar:nth-child(1) {
  top: 17px;
  background-color: #00205B;
}
.icon-bar:nth-child(2) {
  top: 25px;
  background-color: #008000;
}
.icon-bar:nth-child(3) {
  top: 33px;
  background-color: #BF0D3E;
}
.nav-toggle.active .icon-bar:nth-child(1) {
  top: 24px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-toggle.active .icon-bar:nth-child(2) {
  width: 0;
}
.nav-toggle.active .icon-bar:nth-child(3) {
  top: 24px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nav-menu {
  position: fixed;
  top: 50px;
  width: 100vw;
  height: 0;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav-menu.active {
  height: 100vh;
  background-color: #C83349;
}
.nav-menu li a {
  display: block;
  color: #ffffff;
  font-size: 5vw;
  width: 100vw;
  height: 15vh;
  line-height: 15vh;
  text-align: center;
  text-decoration: none;
  background-color: rgba(0,32,91,.9);
  border-bottom: 1px solid rgba(255,255,255,.9);
}
.nav-menu li a:hover, .nav-menu li a:focus {
  background-color: #C83349;
}


/*************************
# Navigation Large Screen View
*************************/
@media screen and (min-width:768px) {
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    position: relative;
    display: flex;
    justify-content: center;
    top: 0;
    width: auto;
    height: 50px;
  }
  .nav-menu li a {
    display: inline-block;
    font-size: 1.5vw;
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 1.5vw;
    border-right: 1px solid rgba(255,255,255,.8);
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .nav-menu li:last-child a {
    border-right: none;
  }
}


/*************************
# Top Banner
*************************/
.bannerTop {
  position: relative;
  margin-top: 50px;
  height: 80vh;
  background-color: #ffffff;
  background-image: url("../img/bannerTop.jpg");
  background-position: 50% 100%;
  background-size: cover;
  box-shadow: 0px 15px 10px -10px #3e4444;
}
.bnContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, rgba(255,255,255,.5), rgba(255,255,255,.1));
}
.bnContent {
  position: absolute;
  width: 100%;
  top: 25%;
  text-align: center;
}
#shumei-zing {
  color: #002868;
  font-family: "Shadows Into Light", cursive;
  font-size: 10vw;
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 900;
  font-variant: small-caps;
  text-shadow: 2px 2px #002868, ;
  text-shadow: 2px 2px 4px #2b2626;
  padding-bottom: 5%;
}
#welcomeMsg {
  color: #006845;
  font-family: "Swanky and Moo Moo", cursive;
  font-size: 6vw;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: 2px;
}
@media screen and (min-width:768px) {
  .bnContent {
    top: auto;
    left: 2%;
    bottom: 0%;
    text-align: left;
  }
  #shumei-zing {
    padding-bottom: 2%;
  }
  #welcomeMsg {
    padding-bottom: 5%;
  }
}

/* =========================
# Layout
========================= */
.bottomUp {
  position: absolute;
  bottom: 3%;
  right: 2%;
  width: 100%;
}  
@media screen and (min-width: 768px) {
  .bottomUp {
    position: absolute;
    bottom: auto; 
    top: 5%;
    right: 2%;
  }  
}
.displayBlock {
  display: block;
}
.width100 {
  width: 100%;
}
.width-80-60 {
  width: 80vw;
}
@media screen and (min-width: 768px) {
  .width-80-60 {
    width: 60vw;
  }  
}
.padding-0-1 {
  padding: 0 1vw; 
}
.padding-1-0 {
  padding: 1vh 0; 
}
.padding-0-2 {
  padding: 0 2vw; 
}
.padding-2-0 {
  padding: 2vh 0; 
}
.padding-2-2 {
  padding: 2vw; 
}
.padding-5-0 {
  padding: 5vh 0;
}
.padding-0-5 {
  padding: 0 5vw;
}
.padding-5-5 {
  padding: 5%;
}
.paddingTop-10vh {
  padding-top: 10vh;
}
.margin-0-2 {
  margin: 0 2vw; 
}
.margin-2-0 {
  margin: 2vh 0; 
}
.margin-2-2 {
  margin: 2vh 2vw; 
}
.margin-3-2 {
  margin: 3vh 2vw; 
}
.margin-5-0 {
  margin: 5vh 0;
}
.margin-0-5 {
  margin: 0 5vw;
}
.marginTop,
.marginTop-50-0 {
  margin-top: 50px;
}
@media screen and (min-width: 992px) {
  .marginTop-50-0 {
    margin-top: 0px;
  }
}
.marginBottom {
  margin-bottom: 50px;
}
.marginBottom-50 {
  margin-bottom: -50px;
}

/* =========================
# Flex - Parents
=========================*/ 
.flexRow {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flexColumn {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.alignStart {
  -ms-flex-align: start;
  align-items: flex-start;
}
.alignEnd {
  -ms-flex-align: end;
  align-items: flex-end;
}
.alignCenter {
  -ms-flex-align: center;
  align-items: center;
}
.alignSelfCenter {
  -ms-flex-item-align: center;
  align-self: center;
}
.alignContentCenter {
  align-content: center;
}
.justifyStart {
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.justifyEnd {
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.justifyCenter {
  -ms-flex-pack: center;
  justify-content: center;
}
.justifyBetween {
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.justifyAround {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.justifyEvenly {
  justify-content: space-evenly;
}


/* =========================
# Text Layout
========================= */
.textCenter {
  text-align: center !important;
}
.textLeft {
  text-align: left !important;
}
.textRight {
  text-align: right !important;
}
.textLeftRight {
  text-align: left !important;
}
@media screen and (min-width: 768px) {
  .textLeftRight {
    text-align: right !important;
  }
}


/* =========================
# Flex - Column
=========================*/ 
.flex {
  flex: 1;
}
/* 100-50 */
.flexHalf {
  position: relative;
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .flexHalf {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
/* 100-30 */
.flexOneThird {
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .flexOneThird {
    -ms-flex: 30%;
    flex: 30%;
    max-width: 30%;
  }
}
/* 100-70 */
.flexTwoThird {
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .flexTwoThird {
    -ms-flex: 70%;
    flex: 70%;
    max-width: 70%;
  }
}
/* 100-50-33-25 */
.flexQuarter {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}
@media screen and (max-width: 575px) {
  .flexQuarter {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .flexQuarter {
    -ms-flex: 33%;
    flex: 33%;
    max-width: 33%;
  }
}
@media screen and (min-width: 992px) {
  .flexQuarter {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
}
/* 00-sm-md-lg-xl */
.flex0 {
  -ms-flex: 0%;
  flex: 0%;
  max-width: 0%;
}
.flex10 {
  -ms-flex: 10%;
  flex: 10%;
  max-width: 10%;
}
.flex15 {
  -ms-flex: 15%;
  flex: 15%;
  max-width: 15%;
}
.flex20 {
  -ms-flex: 20%;
  flex: 20%;
  max-width: 20%;
}
.flex25 {
  -ms-flex: 25%;
  flex: 25%;
  max-width: 25%;
}
.flex30 {
  -ms-flex: 30%;
  flex: 30%;
  max-width: 30%;
}
.flex35 {
  -ms-flex: 35%;
  flex: 35%;
  max-width: 35%;
}
.flex40 {
  -ms-flex: 40%;
  flex: 40%;
  max-width: 40%;
}
.flex45 {
  -ms-flex: 45%;
  flex: 45%;
  max-width: 45%;
}
.flex50 {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}
.flex55 {
  -ms-flex: 55%;
  flex: 55%;
  max-width: 55%;
}
.flex60 {
  -ms-flex: 60%;
  flex: 60%;
  max-width: 60%;
}
.flex65 {
  -ms-flex: 65%;
  flex: 65%;
  max-width: 65%;
}
.flex70 {
  -ms-flex: 70%;
  flex: 70%;
  max-width: 70%;
}
.flex75 {
  -ms-flex: 75%;
  flex: 75%;
  max-width: 75%;
}
.flex80 {
  -ms-flex: 80%;
  flex: 80%;
  max-width: 80%;
}
.flex85 {
  -ms-flex: 85%;
  flex: 85%;
  max-width: 85%;
}
.flex90 {
  -ms-flex: 90%;
  flex: 90%;
  max-width: 90%;
}
.flex95 {
  -ms-flex: 95%;
  flex: 95%;
  max-width: 95%;
}
.flex100 {
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}
@media screen and (min-width: 576px) {
  .flex10-sm {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .flex15-sm {
    -ms-flex: 15%;
    flex: 15%;
    max-width: 15%;
  }
  .flex20-sm {
    -ms-flex: 20%;
    flex: 20%;
    max-width: 20%;
  }
  .flex25-sm {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
  .flex30-sm {
    -ms-flex: 30%;
    flex: 30%;
    max-width: 30%;
  }
  .flex35-sm {
    -ms-flex: 35%;
    flex: 35%;
    max-width: 35%;
  }
  .flex40-sm {
    -ms-flex: 40%;
    flex: 40%;
    max-width: 40%;
  }
  .flex45-sm {
    -ms-flex: 45%;
    flex: 45%;
    max-width: 45%;
  }
  .flex50-sm {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  .flex55-sm {
    -ms-flex: 55%;
    flex: 55%;
    max-width: 55%;
  }
  .flex60-sm {
    -ms-flex: 60%;
    flex: 60%;
    max-width: 60%;
  }
  .flex65-sm {
    -ms-flex: 65%;
    flex: 65%;
    max-width: 65%;
  }
  .flex70-sm {
    -ms-flex: 70%;
    flex: 70%;
    max-width: 70%;
  }
  .flex75-sm {
    -ms-flex: 75%;
    flex: 75%;
    max-width: 75%;
  }
  .flex80-sm {
    -ms-flex: 80%;
    flex: 80%;
    max-width: 80%;
  }
  .flex85-sm {
    -ms-flex: 85%;
    flex: 85%;
    max-width: 85%;
  }
  .flex90-sm {
    -ms-flex: 90%;
    flex: 90%;
    max-width: 90%;
  }
  .flex95-sm {
    -ms-flex: 95%;
    flex: 95%;
    max-width: 95%;
  }
  .flex100-sm {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .flex10-md {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .flex15-md {
    -ms-flex: 15%;
    flex: 15%;
    max-width: 15%;
  }
  .flex20-md {
    -ms-flex: 20%;
    flex: 20%;
    max-width: 20%;
  }
  .flex25-md {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
  .flex30-md {
    -ms-flex: 30%;
    flex: 30%;
    max-width: 30%;
  }
  .flex35-md {
    -ms-flex: 35%;
    flex: 35%;
    max-width: 35%;
  }
  .flex40-md {
    -ms-flex: 40%;
    flex: 40%;
    max-width: 40%;
  }
  .flex45-md {
    -ms-flex: 45%;
    flex: 45%;
    max-width: 45%;
  }
  .flex50-md {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  .flex55-md {
    -ms-flex: 55%;
    flex: 55%;
    max-width: 55%;
  }
  .flex60-md {
    -ms-flex: 60%;
    flex: 60%;
    max-width: 60%;
  }
  .flex65-md {
    -ms-flex: 65%;
    flex: 65%;
    max-width: 65%;
  }
  .flex70-md {
    -ms-flex: 70%;
    flex: 70%;
    max-width: 70%;
  }
  .flex75-md {
    -ms-flex: 75%;
    flex: 75%;
    max-width: 75%;
  }
  .flex80-md {
    -ms-flex: 80%;
    flex: 80%;
    max-width: 80%;
  }
  .flex85-md {
    -ms-flex: 85%;
    flex: 85%;
    max-width: 85%;
  }
  .flex90-md {
    -ms-flex: 90%;
    flex: 90%;
    max-width: 90%;
  }
  .flex95-md {
    -ms-flex: 95%;
    flex: 95%;
    max-width: 95%;
  }
  .flex100-md {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .flex10-lg {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .flex15-lg {
    -ms-flex: 15%;
    flex: 15%;
    max-width: 15%;
  }
  .flex20-lg {
    -ms-flex: 20%;
    flex: 20%;
    max-width: 20%;
  }
  .flex25-lg {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
  .flex28-lg {
    -ms-flex: 28%;
    flex: 28%;
    max-width: 28%;
  }
  .flex30-lg {
    -ms-flex: 30%;
    flex: 30%;
    max-width: 30%;
  }
  .flex35-lg {
    -ms-flex: 35%;
    flex: 35%;
    max-width: 35%;
  }
  .flex40-lg {
    -ms-flex: 40%;
    flex: 40%;
    max-width: 40%;
  }
  .flex45-lg {
    -ms-flex: 45%;
    flex: 45%;
    max-width: 45%;
  }
  .flex50-lg {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  .flex55-lg {
    -ms-flex: 55%;
    flex: 55%;
    max-width: 55%;
  }
  .flex60-lg {
    -ms-flex: 60%;
    flex: 60%;
    max-width: 60%;
  }
  .flex65-lg {
    -ms-flex: 65%;
    flex: 65%;
    max-width: 65%;
  }
  .flex70-lg {
    -ms-flex: 70%;
    flex: 70%;
    max-width: 70%;
  }
  .flex75-lg {
    -ms-flex: 75%;
    flex: 75%;
    max-width: 75%;
  }
  .flex80-lg {
    -ms-flex: 80%;
    flex: 80%;
    max-width: 80%;
  }
  .flex85-lg {
    -ms-flex: 85%;
    flex: 85%;
    max-width: 85%;
  }
  .flex90-lg {
    -ms-flex: 90%;
    flex: 90%;
    max-width: 90%;
  }
  .flex95-lg {
    -ms-flex: 95%;
    flex: 95%;
    max-width: 95%;
  }
  .flex100-lg {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .flex10-xl {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .flex15-xl {
    -ms-flex: 15%;
    flex: 15%;
    max-width: 15%;
  }
  .flex20-xl {
    -ms-flex: 20%;
    flex: 20%;
    max-width: 20%;
  }
  .flex25-xl {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
  .flex30-xl {
    -ms-flex: 30%;
    flex: 30%;
    max-width: 30%;
  }
  .flex35-xl {
    -ms-flex: 35%;
    flex: 35%;
    max-width: 35%;
  }
  .flex40-xl {
    -ms-flex: 40%;
    flex: 40%;
    max-width: 40%;
  }
  .flex45-xl {
    -ms-flex: 45%;
    flex: 45%;
    max-width: 45%;
  }
  .flex50-xl {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  .flex55-xl {
    -ms-flex: 55%;
    flex: 55%;
    max-width: 55%;
  }
  .flex60-xl {
    -ms-flex: 60%;
    flex: 60%;
    max-width: 60%;
  }
  .flex65-xl {
    -ms-flex: 65%;
    flex: 65%;
    max-width: 65%;
  }
  .flex70-xl {
    -ms-flex: 70%;
    flex: 70%;
    max-width: 70%;
  }
  .flex75-xl {
    -ms-flex: 75%;
    flex: 75%;
    max-width: 75%;
  }
  .flex80-xl {
    -ms-flex: 80%;
    flex: 80%;
    max-width: 80%;
  }
  .flex85-xl {
    -ms-flex: 85%;
    flex: 85%;
    max-width: 85%;
  }
  .flex90-xl {
    -ms-flex: 90%;
    flex: 90%;
    max-width: 90%;
  }
  .flex95-xl {
    -ms-flex: 95%;
    flex: 95%;
    max-width: 95%;
  }
  .flex100-xl {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


/*************************
# Carousel
*************************/
/*.container {
  width: 95vw;
}
@media screen and (min-width: 768px) {
  .container {
    width: 80vw;
  }
}
.container h3 {
  display: none;
}
.carousel {
  box-shadow: 15px 15px 10px -10px #3e4444;
}
.carousel a:link,
.carousel a:visited {
  color: #ffffff;
  opacity: 1;
}
.carousel a:hover {
  color: #bf0d3e;
}
.carousel a:hover:after,
.carousel a:focus:after,
.carousel a:active:after {
  content: "";
  display: none;
}
.carousel-indicators {
  display: flex;
  justify-content: space-around;
}
.carousel-indicators li {
  width: 15px;
  height: 15px;
  margin: 2px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.8);
  border: none;
  background-color: #ffffff;
  border-radius: 50%;
}
.carousel-indicators li:hover {
  background-color: #bf0d3e;
}
.carousel-indicators .active {
  width: 20px;
  height: 20px;
  margin: 1px;
  background-color: #bf0d3e;
  border: 3px solid #ffffff;
}
.carousel-inner .item img {
  width: 75vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .carousel-inner .item img {
    height: 70vh;
    width: auto;
  }
}
.carousel-control {
  width: 10%;
  color: #ffffff;
  opacity: .8;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .carousel-control {
    width: 15%;
  }
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left,rgba(62,68,68,.1) 0,rgba(62,68,68,0.00001) 100%);
  background-image: linear-gradient(to right,rgba(62,68,68,.1) 0,rgba(62,68,68,0.00001) 100%);
}
.carousel-control.right {
  background-image: -webkit-linear-gradient(right, rgba(62,68,68,.1) 0, rgba(62,68,68,0.00001) 100%);
  background-image: linear-gradient(to left, rgba(62,68,68,.1) 0, rgba(62,68,68,0.00001) 100%);
}
.carousel-control:hover,
.carousel-control:focus,
.carousel-control:active {
  color: #ffffff;
  opacity: 1;
}
.glyphicon {
  top: 0;
}
.carousel-control .glyphicon-chevron-left {
  left: 40%;
  margin-right: 5%;
}
.carousel-control .glyphicon-chevron-right {
  right: 40%;
  margin-left: 5%;
}*/


/*************************
# Specialities
*************************/
.sectionTitle {
  color: #00205B;
  font-size: 2.2rem;
  font-variant: small-caps;
  margin: 8% 0 3% 5%;
  font-weight: 900;
}
.sectionTitle::before {
  content: "";
  width: 50vw;
  height: 3px;
  background-color: #BF0D3E;
  display: block;
  margin: 1vh 0;
}
.sectionTitle::after {
  content: "";
  width: 50vw;
  height: 3px;
  background-color: #BF0D3E;
  display: block;
  margin: 1vh 0;
}
@media screen and (min-width: 768px) {
  .sectionTitle {
    text-align: center;
    margin: 5% auto;
  }
  .sectionTitle::before, .sectionTitle::after {
    margin: 1vh auto;
  }
}
.specialties {
  position: relative;
  margin: 0 3%;  
}
.boxOuter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  margin: 0 2%;
  background-color: transparent;
}
.boxInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90vw;
  background-color: transparent;
}
.boxImg {
  width: 80vw;
  height: 35vh;
  background-position: 50%;
  background-size: cover;
  background-color: #fff;
  box-shadow: 15px 15px 10px -10px #3e4444;
  margin-top: 5%;
}
#boxImg-1 {
  background-image: url("../img/boximg-1.jpg");
  background-position: 50% 80%;
}
#boxImg-2 {
  background-image: url("../img/boximg-2.jpg");
  background-position: 50% 60%;
}
#boxImg-3 {
  background-image: url("../img/boximg-3.jpg");
}
#boxImg-4 {
  background-image: url("../img/boximg-4.jpg");
  background-position: 50% 75%;
}
.boxList h3 {
  color: #BF0D3E;
  font-size: calc(12px + 2vw);
  font-weight: 600;
  padding: 10px 20px 0;
  text-align: center;
  font-variant: small-caps;
}
@media screen and (min-width: 768px) {
  .boxOuter {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
  .boxImg {
    width: 40vw;
    height: 35vh;
  }
  .boxList h3 {
    font-size: calc(12px + 1.2vw);
    padding-top: 5%;
    text-align: center;
  }
}

/*************************
# Credentials
*************************/
#credentials {
  color: #00205B;
  font-size: 1.5rem;
}
.credentials {
  justify-content: center;
  align-items: center;
}
.credentials .boxInner {
  align-items: flex-start;
  justify-content: center;
  padding-left: 3%;
}
.credentials h3 {
  font-size: 1.2rem;
}
.listHead {
  font-size: 1.2rem;
  padding-left: 0;
  font-weight: 600;
}
@media screen and (min-width:768px) {
  .credentials .boxInner:first-child {
    border-right: 1px solid;
  }
  .listHead {
    padding-left: 0; 
  }
}
.listItem li {
  text-align: left;
  margin: 1em 0 1em 1.5em;
  position: relative;
}
.listItem li:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  left: -9px;
  top: 0;
  background: #2b2626;
}

/*************************
# Banners Between
*************************/
.bannerBetween {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 5% 0;
  height: 50vh;
  background-color: #fff;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0px 15px 10px -10px #3e4444;
}
#bannerBcg-1 {
  background-image: url("../img/banner-1.jpg");
  background-position: 50% 80%;
}
#bannerBcg-2 {
  background-image: url("../img/banner-2.jpg");
}
#bannerBcg-3 {
  background-image: url("../img/banner-3.jpg");
}
.bnbContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: hidden;
  top: 10%;
  right: 2%;
  bottom: 10%;
  left: 2%;
  background-color: rgba(0,0,0,0);
  background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,.6));
}
.bnbContainer:hover {
  background-image: none;
}
.bnbContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  text-align: center;
  color: #fff;
  font-size: clamp(28px, 5vw, 30px);
  font-family: "IM Fell Great Primer";
  line-height: 10vh;
  font-weight: 700;
  margin: auto 5%;
  text-shadow: 2px 2px 4px #2b2626;
}
.healthyFeet {
  font-size: calc(12px + 3vw);
}
@media screen and (min-width:768px) {
  .bnbContent {
    width: 80%;
  }
}

/*************************
# Service
*************************/
.service .boxInner {
  align-items: flex-start;
  width: 80vw;
  margin-bottom: 5%;
}
@media screen and (min-width:768px) {
  .service {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .service .boxInner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 70%;
    margin-bottom: 3%;
  }
}
.service .boxInner p:hover {
  cursor: url("../icon/cursor.png"), auto;
}
.serviceMenu {
  color: #016d49;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  font-weight: 600;
  border-bottom: 1px solid gray; 
}
.serviceItem, .servicePrice {
  font-size: 1.5rem;
  line-height: 1;
  margin: 0;
  font-variant: small-caps;
}
.serviceDetail {
  font-size: .9rem;
  margin: 0;
  padding-top: 1%;
}
.serviceDetail span {
  font-weight: 600;
}


/*************************
# Safety Measures
*************************/
.safety li {
  font-size: 1.2rem;
  line-height: 1.6;
  font-style: normal;
  margin: 1rem;
}
.safety li:hover {
  color: #BF0D3E;
  cursor: url("../icon/cursor.png"), auto;
}
@media screen and (min-width:768px) {
  .safety li {
    margin: 1rem 2rem;
  }
}

/*************************
# Policies
*************************/
.policy .boxInner {
  align-items: flex-start;
  padding: 0 2%;
}
.policy details {
  width: 100%;
}
.policy .boxInner details:last-child {
  margin-bottom: 70px;
}
.policy summary {
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 700;
  padding: 1% 0;
}
.policy summary:hover, .policy summary:focus, #policies summary:active {
  cursor: pointer;
  color: #BF0D3E;
}
.policy p {
  font-size: 1.2rem;
  padding-left: 3%;
}
.policy strong {
  font-weight: 700;
}

/*************************
# Contact
*************************/
.address {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 2;
  margin: 3% auto;
}
.address > li {
  display: flex;
  flex-direction: row;
  width: 80vw;
  margin-bottom: 5%; 
}
.addTitle {
  padding-right: 2%;
  width: 30%;
  font-weight: 700;
  text-align: right;
}
.addItem {
  font-size: 1.2rem;
  width: 70%;
  padding-left: 2%;
  border-left: 1px solid #3e4444;
}
.addItem img {
  height: 15px;
  padding-right: 1%; 
}
.addItem span {
  color: #BF0D3E;
}
@media screen and (min-width:768px) {
  .address {
    flex-direction: row;
    justify-content: center;
    width: 85vw;
  }
  .address > li {
    flex-direction: column;
   }
  .addTitle, .addItem {
    width: 30vw;
    padding-right: 0;
    text-align: center;
  }
  .addItem {
    border-left: none;
  }
  .address > li:first-child > .addItem > li {
    border-right: 1px solid #3e4444;
  }
  .address > li:nth-child(2) > .addItem > li:first-child {
    border-right: 1px solid #3e4444;
  }
}
.contact iframe {
  width: 85vw;
  height: 80vh;
  margin-bottom: 5%;
  box-shadow: 15px 15px 10px -10px #3e4444;
}

/*************************
# Footer
*************************/
.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  color: #ffffff;
  background-color: #00205B;
  padding: 1% 2%;
}
@media screen and (min-width:768px) {
  .footer {
    align-items: center;
  }
}
.footer div, .footer p, .foot-logo, .foot-logo span {
  color: #ffffff;
  padding: 0;
  margin: 0;
}
#facebook {
  width: 30px;
  margin: -3px;
}
#facebook:hover {
  width: 35px;
}
.foot-logo a {
  text-decoration: none;
  padding: 0;
}
.foot-logo a:hover, .foot-logo a:focus, .foot-logo a:active, .foot-logo a:visited {
  text-decoration: underline;
  text-decoration-color: #ffffff;
}
.footer p {
  font-size: .8rem;
}
#backToTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  opacity: .5;
}
#backToTop:hover {
  opacity: 1;
}


/* =========================
# Swiper Carousel
========================= */
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  display: flex;
  flex-direction: column;
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}
.swiper-slide:active {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination-bullet {
  opacity: 1;
  transition: all .3s ease;
}
/* Gallery */
.gallery .swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 80px;
}
.gallery .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 350px;
  height: 350px;
}
.gallery .swiper-pagination {
  bottom: 0;
}
.gallery .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cccccc;
}
.gallery .swiper-pagination-bullet-active {
  background-color: #bf0d3e;
}
.gallery .swiper-pagination-bullet:hover {
  background-color: #bf0d3e;
}