@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&family=Londrina+Solid:wght@100;200;300;400;500;600;700;800;900&display=swap");

/*Ensure full width of all fuild container without bleeding off screen*/
.container-fluid {
  padding: 0;
}
/*Remove bullet points from all unordered lists*/
ul {
  list-style: none;
}

/* ------------------------------------------Colors*/
/*color-palette is not assigned to any element but is here to provide a quick reference for all colors in use*/
.color-palette {
  color: #8e24ae; /*Primary*/
  color: #c159e1; /*Primary Light*/
  color: #5c007e; /*Primary Dark*/
  color: #99fcff; /*Secondary*/
  color: #ceffff; /*Secondary Light*/
  color: #65c9cc; /*Secondary Dark*/
  color: #fbffe2; /*Primary Text*/
  color: #324749; /*Secondary Text*/
}

/*Primary - Background*/
.navigation,
.dropdown-menu,
.content-b,
.footer,
.modal-header,
#back-to-top {
  background-color: #8e24ae;
}

/*Primary Text - Text Color*/
.strapline,
.navbar-dark .navbar-nav .nav-link,
.dropdown-item,
.hero-tron,
.footer,
.footer a,
.modal-header,
.scroll-control a i:hover,
.content-b,
.sub-link,
.card-a,
.card-b,
.how-to-item-a,
.training-tips-item-a,
.content-a .btn-secondary:hover,
.content-b .btn-secondary:hover,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #fbffe2;
}

/*Primary Dark - Background*/
.navbar-item:hover,
.navbar-nav .active,
.sub-link,
.card-b {
  background-color: #5c007e;
}

/*Primary Dark - Alternative Link*/
#training-intro a {
  color: #5c007e;
}

/*Secondary - Text Color*/
.navbar-dark .navbar-nav .nav-link:hover,
.content-b a,
.content-a a,
#back-to-top {
  color: #99fcff;
}

/*Secondary - Background*/
.btn-secondary,
.content-a .btn-secondary,
.content-b .btn-secondary {
  background-color: #99fcff;
}

/*Secondary Text - Text Color*/
.content-a,
.modal-content,
.scroll-control a i,
.btn-secondary,
.content-a .btn-secondary,
.content-b .btn-secondary {
  color: #324749;
}

/*Secondary Text - Background*/
.divider,
.btn-secondary:active {
  background-color: #324749;
}

/*Translucent dark hover - Background*/
.scroll-control a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/*Secondary Dark - Text Color*/
.content-b a:hover,
.content-a a:hover,
.footer a:hover,
.sub-link a:hover {
  color: #65c9cc;
}

/*Secondary Dark - Background*/

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #65c9cc;
}

/*Primary Light - Background*/
.card-a,
.how-to-item-a,
.training-tips-item-a {
  background-color: #c159e1;
}

/* ------------------------------------------Header*/
.navigation {
  padding: 0;
  box-shadow: 0px 0px 25px 5px;
}
.navbar-branding {
  margin: 0 0 0 1vw;
}
.navbar-brand {
  padding: 0;
}
.navbar-brand img:hover {
  filter: hue-rotate(210deg) saturate(2) brightness(2);
}
.strapline {
  padding: 0;
  font-family: "Londrina Solid", cursive;
  text-transform: uppercase;
  letter-spacing: 0.75vw;
  text-align: center;
  font-size: 1.85vw;
}
h1 {
  font-size: 4.6vw;
  margin: 0;
}
#logo {
  width: 25vw;
}
.navbar-toggler {
  font-size: 4vw;
  border: none;
  padding: 2vw;
}
.navbar-toggler-icon {
  width: 10vw;
  height: 10vw;
}
.navbar-item {
  width: 100%;
  height: 10vw;
  padding: 0 3vw;
}
.navbar-dark .navbar-nav .nav-link {
  height: 100%;
  font-family: "Londrina Solid", cursive;
  font-size: 4vw;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
}
.navbar-item a i {
  font-size: 6vw;
}

/* ------------------------------------------Main Content*/

.jumbotron-fluid {
  padding: 2.5vh 1vh;
}
.hero-tron {
  text-align: center;
  font-family: "Rubik", sans-serif;
  margin: 0;
}
.hero-image-a {
  height: 65vh;
  background: url("../images/object_hero_a.jpg") no-repeat top right;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}
.hero-image-d {
  height: 65vh;
  background: url("../images/object_hero_d.jpg") no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
}
.btn-secondary {
  border: none;
  text-transform: uppercase;
}
.main-content {
  text-align: center;
  font-family: "Rubik", sans-serif;
}
.divider {
  width: 25%;
  height: 0.5vh;
  margin: 3vh auto 0 auto;
}
.intro-button-container {
  padding: 2vh;
}
h2 {
  margin: 3vh 0;
}
.how-to-dog-friendly-head-title h2 {
  padding: 0 5vh;
}
h6 {
  margin: 3vh 0 0 0;
}
h5 {
  margin: 2.5vh;
}
#breed-info,
#training-intro,
#training-recc-intro {
  padding: 0 5vh 3vh;
}
.event-details {
  padding: 0;
}
.event-details-item,
.event-desc,
.place-desc {
  margin: 1vh;
}
.event-desc p,
.place-desc p {
  margin-bottom: 1vh;
}
.card-item h5 {
  margin: 1.5vh;
}
.card-item-header,
.how-to-item-text h5,
.training-tips-text h5 {
  text-transform: uppercase;
}
.event-details-item-category {
  font-weight: 700;
}
.events-button-container {
  padding: 3vh;
}
.event-desc-image {
  width: 90%;
  margin-bottom: 1vh;
}
.sub-link {
  font-family: "Londrina Solid", cursive;
  font-size: 4vw;
}
.place-desc-image {
  width: 100%;
  margin-bottom: 1vh;
}
.image-circle-container {
  margin: 2vh 0;
}
.image-circle-container img {
  border-radius: 50%;
  height: 20vh;
  border: 0.5vh solid #99fcff;
  padding: 0.5vh;
}
#back-to-top {
  width: 8vw;
  height: 8vw;
  border: none;
  border-radius: 50%;
  font-size: 5.2vw;
  margin: 0 1.3vw 1.3vw 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
/*Allows the events to continue off page in a single row when at >XL breakpoint, with buttons to scroll from left to right*/
.scroll-x {
  overflow-x: hidden;
}
.scroll-control {
  background: transparent;
  font-size: 7vh;
  position: absolute;
  top: auto;
  z-index: 9998;
  width: 3%;
  height: 100%;
}
.scroll-left {
  left: 0;
}
.scroll-right {
  right: 0;
}
.scroll-control a {
  height: 100%;
  width: 100%;
}
.scroll-control a i {
  position: relative;
  top: 30%;
  vertical-align: middle;
}
.venue-icons p {
  margin: 0;
}
.venue-icons p i {
  margin: 0 1vw;
}
.venue-keywords p {
  text-transform: capitalize;
  margin-bottom: 0;
  padding: 1vh;
}
.venue-weblink,
.venue-weblink-b {
  margin: auto;
}
.map-container {
  height: 460px;
}
.map-container iframe {
  border: none;
}
.google-map {
  width: 100%;
  height: 460px;
}
.how-to-item {
  padding: 0;
  margin: 0;
}
.how-to-item-row {
  height: 100%;
}
.how-to-item-icon {
  font-size: 10vh;
}
.how-to-item-icon i {
  position: relative;
  top: 30%;
}
.how-to-item-text p,
.training-tips-text p {
  padding: 0 2vh;
}
#training-intro a {
  text-decoration: underline;
}
.training-tips-video iframe {
  position: relative;
  vertical-align: middle;
  padding: 5%;
}
.uppercase {
  text-transform: uppercase;
}
.training-tips-video iframe {
  width: 100vw;
  height: 61vw;
  border: 0;
}
.step-by-step {
  margin-bottom: 2vh;
}
.steps-text {
  text-align: left;
}
.steps-text ol {
  padding-left: 20px;
}

/* ------------------------------------------Modal*/
.modal-content {
  font-family: "Rubik", sans-serif;
}
.modal-header {
  border: none;
}
.modal-header h2 {
  margin: 0;
}
.required {
  text-align: right;
  font-style: italic;
}
.modal-footer {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
}
.subscribe-button {
  text-align: center;
  margin: 1rem;
}

/* ------------------------------------------Footer*/

.footer .row {
  box-shadow: 0px 0px 25px 0px #c159e1 inset;
}
.footer-left,
.footer-left small,
.footer-left small strong,
.footer-left small a {
  font-size: 2vw;
}
.footer-mid,
.footer-right,
.footer-left {
  text-align: center;
}
.footer-left {
  margin: auto 0;
}
.socials {
  margin: 2.3vw 0;
}
.socials .list-inline-item {
  margin: 0;
}
.social-link i {
  font-size: 7vw;
  margin: 0 1.2vw;
}

/* ------------------------------------------Media Queries*/

/* -------------------------------Less Than Medium Viewport*/
@media (max-width: 767px) {
  .form-subscribe .form-group label {
    display: none;
  }
}

/* -------------------------------Medium Viewport*/
@media (min-width: 768px) {
  .navbar-toggler-icon {
    width: 7vw;
    height: 7vw;
  }
  #logo {
    width: 15vw;
  }
  .navbar-dark .navbar-nav .nav-link {
    font-size: 2.5vw;
  }
  .navbar-item {
    height: 8vw;
  }
  .navbar-item a i {
    font-size: 4vw;
  }
  .jumbotron-fluid {
    padding-top: 1.5vh;
  }
  #breed-info {
    padding: 0 2vh 3vh;
  }
  .social-link i {
    font-size: 4.5vw;
  }
  .footer-right {
    text-align: left;
  }
  .footer-left,
  .footer-left small,
  .footer-left small strong,
  .footer-left small a {
    font-size: 1.3vw;
  }
  .footer-left {
    text-align: left;
    padding-left: 1vh !important;
  }
  .card-scroll-y-container {
    height: 460px;
    overflow-y: scroll;
  }
  .how-to-item-icon i {
    position: unset;
  }
  .training-tips-video iframe {
    width: 50vw;
    height: 30.5vw;
  }
  #back-to-top {
    width: 7vw;
    height: 7vw;
    font-size: 4.8vw;
  }
}

/* -------------------------------Large Viewport*/
@media (min-width: 992px) {
  #breed-info {
    padding: 0 5vh 3vh;
  }
}

/* -------------------------------Extra-Large Viewport*/
@media (min-width: 1200px) {
  #logo {
    width: 10vw;
  }
  .strapline {
    font-size: 1vw;
    letter-spacing: 0.6vw;
  }
  .navbar-item {
    height: 6.5vw;
  }
  .navbar-dark .navbar-nav .nav-link {
    font-size: 1vw;
    padding-top: 1.4vw;
  }
  .navbar-item a i {
    font-size: 1.8vw;
  }
  #dogs_allowed a {
    line-height: 1.3vw;
  }
  .training-tips-video iframe {
    width: 30vw;
    height: 18.3vw;
  }
  .footer-right,
  .footer-right small strong,
  .footer-right small a {
    font-size: 0.65vw;
  }
  .socials {
    margin: 1.5vw 0;
  }
  .social-link i {
    font-size: 2.5vw;
  }
  .footer-left,
  .footer-left small,
  .footer-left small strong,
  .footer-left small a {
    font-size: 0.7vw;
  }
}

/* -------------------------------Extra-Extra-Large Viewport*/
@media (min-width: 2560px) {
  body {
    font-size: 2rem;
  }
  #logo {
    width: 11.5vw;
  }
  .strapline {
    font-size: 1vw;
  }
  .navbar-item {
    height: 7.5vw;
  }
  .navbar-item a i {
    font-size: 2.2vw;
  }
  .navbar-dark .navbar-nav .nav-link {
    font-size: 1.2vw;
    padding-top: 1.2vw;
  }
  h2 {
    font-size: 4rem;
  }
  h5 {
    font-size: 2.5rem;
  }
  .btn-sm,
  .subscribe-button .btn {
    font-size: 2rem;
    padding: 0.5rem 1rem;
  }
  .btn-lg {
    font-size: 3rem;
    padding: 1rem 2rem;
  }
  .card-scroll-y-container,
  .map-container,
  .map-container iframe {
    height: 800px;
  }
  .footer-left,
  .footer-left small,
  .footer-left small strong,
  .footer-left small a {
    font-size: 0.9vw;
  }
  .social-link i {
    font-size: 3.2vw;
  }
  .modal-lg {
    max-width: 1200px;
  }
  .form-control {
    font-size: 1.8rem;
  }
  .close {
    font-size: 4rem;
  }
}