/*	------------------------- colors ---------------------------
  deep blue : #002d56;
  navy blue : #011e39;
  light blue : #bfcad5;
  grey : #959599;
  darker_grey: #555560;
  dark_grey : #252530;
  green : #005826;
*/
/*	------------------------- container ------------------------
  i absolutly position the container in the center rather then having it be centered
  using a margin: auto beacuse the div is floated to the left already, to fit with my
  framework for easy float clearing and broweser compatibitliy, and when i absolutly 
  position anything else, they will all nicely be centerd in the content as well... the only negitive 
  caviaut is that if the browser window is shrunk to a width smaller then the width
  of this containing element, the left side will be unviewable.. even upon scrolling..
  but this has an easy fix with javascript..
*/







/*Start of the refactor CSS*/

:root {
  --primary-color: #002D56;
  --secondary-color: #244f26;
  --tertiary-color: #ffffff;
  --quaternary-color: black;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  color: var(--tertiary-color);
}

.main_div {
  margin: 0;
  padding: 0;
}

.font {
  color: var(--tertiary-color);
}

.font-primary {
  font-family: 'Playfair Display', serif;
}

.font-secondary {
  font-family: 'Open Sans', sans-serif;
}

/*NAV STYLE STARTS*/
#main_nav {
  border-bottom: var(--secondary-color) 8px solid;
  opacity: .9;
}

.nav-item {
  font-size: 1rem;
}


.oz_logo_nav {
  width: 10rem;
  padding: .3rem;
  margin-right: 1rem;
}

/*NAV STYLE ENDS*/

/*CAROUSEL STYLE STARTS*/
.carousel {
  border-top: var(--primary-color) 8px solid;
  width: 100%;
  height: 25rem;
  margin-top: 6.5rem;
  position: relative;
}

.carousel>ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#carousel_img {
  object-fit: cover;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 400ms opacity ease-in-out;
}

.slide>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide[data-active] {
  opacity: 1;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: .25rem;
  padding: 0 .5rem;
  background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: var(--tertiary-color);
  background: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
  outline: 1px solid var(--quaternary-color);
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

/*CAROUSEL STYLE ENDS*/

/*INDEX HTML BODY STYLE STARTS*/
.container--oz {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 3rem;
}

.oz_mission_container {
  margin: 1rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
  width: 70%;
  background-color: #002D56;

}

.oz_mission_container--header {
  font-size: 5rem;
  margin-bottom: 2rem;

}

.oz_mission_container--p {
  font-size: 1rem;

}

.oz_mission_image {
  margin: 3rem;
  padding: 1rem;
  background-color: var(--tertiary-color);
  color: var(--quaternary-color);
  width: 30%;
  object-fit: contain;
  object-position: center;
}

.oz_mission_image--photo {
  opacity: .2;
}

.oz_blog {
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

#oz_blog--photo {
  width: 10rem;
  margin: 1rem;
}

.oz_blog--header {
  text-align: center;
  margin: 1rem;
}

#oz_blog--button {
  text-align: center;
  margin: 2rem;
}

.oz_blog--text {
  font-size: .75rem;
  text-align: center;
  padding-bottom: 2rem;
}

.head_trainer--title {
  font-size: 2rem;
  margin: 2rem;
  text-align: center;
}

.head_trainer--header {
  font-size: 1rem;
  width: 100%;
}

.head_trainer--container {
  background-color: var(--tertiary-color);
  color: var(--quaternary-color);
  width: 100%;
  padding: 3rem;
}

.dawson {
  padding: 1.5rem;
}

.head_trainer--text {
  font-size: 1.25rem;
  padding: 2rem;
}

.head_trainer--button {
  margin: 2rem;
  text-align: center;
}

.candid_photo--container {
  display: flex;
  justify-content: space-evenly;
}

.candid_photo--1 {
  width: 20%;
  margin: 1.25rem;
}

.sale_horse--container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 8rem 1rem 8rem;;
}

.sale_horse--title {
  font-size: 2rem;
  margin: 2rem;
}

.sale_horse--text {
  font-size: 1.25rem;
  align-items: center;
}

.sale_horse--p {
  text-align: center;
}

.sale_horse--button {
  margin: 1.5rem;
}

.quote {
  text-align: center;
  font-size: 1rem;
  padding: 8rem;
}

.sponsors {
  background-color: var(--tertiary-color);
  color: var(--quaternary-color);
  padding: 5rem;
  display: flex;
  justify-content: space-between;
}

.sponsors_container--header {
  font-size: 3rem;
  margin-right: 2rem;
  background-color: var(--tertiary-color);
  color: var(--quaternary-color);
}

.sponsors_container--text {
  font-size: 1rem;
  background-color: var(--tertiary-color);
  color: var(--quaternary-color);
  padding: 1rem;
}

#sponsor--logo-1 {
  width: 10rem;
  padding: 2rem;
}

#sponsor--logo-2 {
  width: 20rem;
  padding: 2rem;
}

/*INDEX HTML BODY STYLE ENDS*/

/*THE_FARM BODY STYLE STARTS*/
.farm--top-image {
  display: block;
  width: 100%;
  height: 25rem;
  object-fit: cover;
  object-position: 60%;
  margin-top: 6.5rem;
  position: relative;
  border-bottom: 10px solid var(--secondary-color);
}

.farm--header {
  font-size: 5rem;
  padding: 2rem 1rem 2rem 1rem;
}

.farm--second-header {
  font-size: 3rem;
}

.farm--div {
  margin: 2rem;
}

.farm--image {
  width: 30rem;
  height: auto;
  padding: 1rem;
}

.farm--text {
  padding: 2rem;
  font-size: 1.25rem;
}

.coursel_container {
  border-top: var(--primary-color) 8px solid;
  width: 100%;
  height: 70%;
  position: relative;
  margin-top: 2rem;
}

.tour--container {
  background-color: white;
  color: var(--primary-color);
  padding: 3rem;
}

.tour--title {
  text-align: center;
  font-size: 3rem;
  padding: 1rem;
}

/*THE_FARM BODY STYLE ENDS*/

/*OUR_TEAM STYLE STARTS*/
.our_team--header-container {
  padding: 1.5rem;
}

.our_team--header {
  font-size: 5rem;
}

.our_team--header-text {
  font-size: 1rem;
  color: var(--primary-color);
  text-align: center;
  padding: 2rem;
  margin: 2rem;
}

.our_team--shelley-title {
  text-align: center;
  font-size: 3rem;
  padding-top: 1rem;
}

.our_team--shelley-text {
  font-size: 1rem;
  padding: 2rem;
}

.our_team--shelley-photo {
  padding: 2rem;
  width: 35rem;
  height: auto;
}

.our_team--main {
  background-color: var(--tertiary-color);
}

.our_team--staff-container {
  background-color: var(--tertiary-color);
  padding: 1.5rem;
  border-bottom: 1px solid grey;
  margin-top: 4rem;
  padding-bottom: 4rem;
}

.our_team--staff-div {
  padding: 1rem;
}

.our_team--staff-header {
  color: var(--primary-color);
  background-color: var(--tertiary-color);
  font-size: 3rem;
  text-align: center;
  padding-top: 4rem;
}

.our_team--staff-photo {
  width: 30rem;
  border: 2px solid var(--primary-color);
  padding: 1rem;
  height: auto;
}

.our_team--staff-title {
  color: var(--primary-color);
  font-size: 2rem;
  text-align: center;
}

.our_team--staff-position {
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}

.our_team--staff-text {
  color: var(--primary-color);
  font-size: 1rem;
  text-align: center;
}

/*OUR_TEAM STYLE ENDS*/

/*HORSE_CARE STYLE STARTS*/
.horse_care--top-image {
  display: block;
  width: 100%;
  height: 25rem;
  object-fit: cover;
  object-position: 60%;
  margin-top: 6.5rem;
  position: relative;
  border-bottom: 10px solid var(--secondary-color);
}

.horse_care--header {
  font-size: 5rem;
}

.horse_care--title {
  font-size: 2rem;
  text-align: center;
}

.care--main {
  padding: 0rem;
  border-bottom: 20px solid var(--secondary-color);
}

.care_photo {
  width: 25rem;
  padding: 2rem;
}

.care--text {
  font-size: 1rem;
  width: 60%;
  padding: 2rem;
}

.care--transport-title {
  text-align: center;
  font-size: 2rem;
  padding-top: 4rem;
}

.care--transport-text {
  font-size: 1rem;
  padding: 1rem;
}

.horse_care--list {
  width: 80%;
}

.horse_care--text {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.horse_care--training-container {
  background-color: var(--tertiary-color);
  color: var(--primary-color);
  font-size: 1.25rem;
  padding: 5rem;
  border-bottom: 20px solid var(--secondary-color);
}

.horse_care--title {
  text-align: center;
  font-size: 3rem;
  padding-top: 4rem;
}

.horse_care--leo-div {
  display: flex;
  justify-content: center;
}

.horse_care--leo {
  width: 40rem;
  margin-bottom: 2rem;
}

.horse_care--li {
  padding: 0.5rem 0rem 0.5rem 0rem;
}

.horse_care--logo-div {
  text-align: center;
  margin: 1.5rem;
}

.horse_care--logo {
  width: 5rem;

}

.horse_care--training {
  padding: 3rem;
}

.horse_care--training-photo {
  width: 20rem;
}

.horse_care--training-title {
  font-size: 2rem;
  padding: 1rem;
}

.horse_care--training-list {
  padding: 2rem;
  margin-bottom: 8rem;
  text-align: center;
}

/*HORSE_CARE STYLE ENDS*/

/*PORTFOLIO DESIGN STARTS*/
.portfolio--title {
  font-size: 5rem;
  margin: 1rem;
}

.portfolio--opening-text {
  font-size: 1.5rem;
  padding: 1rem;
  text-align: center;
}

.portfolio_container {
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-align: center;
}

.portfolio_picture {
  width: 30rem;
  border: 3px solid var(--tertiary-color);
  margin: 2rem 2rem 0rem 2rem;
  ;
}

.portfolio_name {
  font-size: 1.5rem;
  text-align: center;
}

/*PORTFOLIO DESIGN ENDS*/


/*FOOTER STYLE STARTS*/
#footer {
  background-color: var(--tertiary-color);
  color: var(--primary-color);
  border-top: var(--secondary-color) solid 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.footer-div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 0px;
}

.footer-content {
  margin: 50px;
  text-align: center;
}

.footer-content-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.footer-logo {
  width: 4rem;
  align-self: center;
  height: auto;
}

.footer-content-title--address {
  font-size: 1rem;
  font-weight: bold;
  padding: 1rem;
}

.footer-content--name {
  padding: .5rem;
}

.footer-div--logo {
  border-top: var(--primary-color) solid 20px;
  text-align: center;
  padding-top: 1rem;
}

#footer-logo {
  height: 7rem;
  margin: 2rem;
}

.bottom-footer {
  background-color: var(--secondary-color);
  color: var(--tertiary-color);
  text-align: center;
  padding-top: 1.5rem;
  font-size: .75rem;
}

.rosepetallogo {
  width: 15rem;
}

/*FOOTER STYLE ENDS*/


/*DIVIDER AND LOGO UNIVERSAL STYLES STARTS*/
.divider {
  width: 45rem;
}

.divider_div {
  text-align: center;
}

.divider_white {
  width: 45rem;
}

.divider_white_top {
  width: 50rem;
}

.oz_logo {
  width: 5rem;
  text-align: center;
}

.oz_logo--div {
  text-align: center;
  margin-bottom: 3rem;
}

/*DIVIDER AND LOGO UNIVERSAL STYLES ENDS*/

/*SCROLLING EFFECT STYLE STARTS*/
.hidden {
  opacity: 0;
  transform: translateY(100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

/*SCROLLING EFFECT STYLE ENDS*/


/*MEDIA QUERIES FOR SMALLER DESKTOPS AND SREENS*/
@media screen and (max-width: 990px) {
  /* #main-nav {
    padding-bottom: 0;
    justify-content: center;
    position: relative;
  } */

  body {
    padding: auto;
  }

  /*INDEX MEDIA QUERIES START FOR 990px*/
  .container--oz {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }

  .oz_mission_container--header {
    justify-content: center;
    text-align: center;
  }

  .oz_mission_container {
    text-align: center;
    width: 40rem;
  }

  .oz_blog {
    display: flex;
    flex-direction: column;
  }

  #oz_blog--photo {
    width: 10rem;
  }

  .head_trainer--container {
    justify-content: space-evenly;
    display: flex;
  }

  .head_trainer--button {
    text-align: center;
  }

  .head_trainer--image {
    padding-top: 80px;
    width: 50%;
  }

  .head_trainer--text {
    width: 50%;
  }

  .sponsors {
    flex-direction: column;
    width: 100%;
  }

  .sponsors_container--header {
    justify-content: space-around;
    width: 100%;
  }

  .sponsors_container--text {
    justify-content: space-around;
    width: 100%;
  }
  /*INDEX MEDIA QUERIES END FOR 990px*/

  /*THE FARM MEDIA QUERIES START FOR 990px*/
  .farm--div {
    flex-direction: column;
  }

  .farm--div-mid {
    flex-direction: column-reverse;
  }
  /*THE FARM MEDIA QUERIES END FOR 990px*/

  /*OUR TEAM MEDIA QUERIES START FOR 990px*/
  .our_team--shelley-container {
    flex-direction: column-reverse;
  }

  .our_team--staff-container {
    flex-direction: column;
    padding: 3rem;
  }
  /*OUR TEAM MEDIA QUERIES END FOR 990px*/

  /*HORSE CARE MEDIA QUERIES START FOR 990px*/
  .care--main {
    flex-direction: column-reverse;
    text-align: center;
  }

  .care_photo {
    width: 40rem;
  }

  .horse_care--main-div {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /*HORSE CARE MEDIA QUERIES END FOR 990px*/

  /*PORTFOLIO MEDIA QUERIES START FOR 990px*/
  .portfolio_container {
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
  }

  .portfolio_div {
    margin: 2rem;
  }

  .portfolio_picture {
    width: 30rem;
  }

  /*PORTFOLIO MEDIA QUERIES END FOR 990px*/

  /*UNIVERSAL DEIVER MEDIA QUERY FOR 990px*/
  .divider_white {
    width: 30rem;
  }
}

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

  /*INDEX MEDIA QUERIES START FOR 768px*/
  .oz_mission_container {
    width: 30rem;
  }

  .dawson {
    width: 30rem;
  }

  .head_trainer--container {
    flex-direction: column;
  }

  .portfolio_picture {
    width: 25rem;
    margin-left: auto;
  }

  .head_trainer--text {
    width: 30rem;
  }

  .head_trainer--title {
    text-align: center;
  }

  #sponsor--logo-2 {
    width: 15rem;
  }

  .candid_photo--1 {
    width: 20rem;
  }

  .candid_photo--container {
    flex-direction: column;
    align-items: center;
  }

  /*INDEX MEDIA QUERIES END FOR 768px*/

  /*OUR TEAM MEDIA QUERIES START FOR 768px*/
  .our_team--staff-container {
    padding: .5rem;
  }

  .horse_care--leo {
    width: 20rem;
  }

  .care_photo {
    width: 25rem;
  }
  /*OUR TEAM MEDIA QUERIES END FOR 768px*/

  /*FOOTER MEDIA QUERY FOR 768px*/
  .footer-div {
    flex-direction: column;
    width: 100%;
  }
}

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

  /*INDEA MEDIA QUERIES START FOR 575px*/
  .oz_mission_container {
    width: 18rem;
    margin: 0rem;
  }

  .oz_mission_container--header {
    font-size: 3rem;
  }

  #oz_blog--photo {
    width: 10rem;
  }

  .head_trainer--container {
    flex-direction: column;
    width: 100%;
  }

  .head_trainer--text {
    justify-content: center;
    width: 100%;
  }

  .dawson {
    width: 20rem;
  }

  .candid_photo--1 {
    width: 15rem;
  }

  .sale_horse--container {
    padding: 5rem;
  }
  .sponsors {
    padding: 5rem;
  }

  .sponsors_container--header {
    width: 10rem;
  }

  /*INDEX MEDIA QUERIES END FOR 575px*/

  /*THE FARM MEDIA QUERIES START FOR 575px*/
  .farm--image {
    width: 20rem;
  }

  .horse_care--training-description {
    width: 15rem;
  }

  .horse_care--text {
    flex-direction: column;
  }

  .care_photo {
    width: 20rem;
  }

  .horse_care--leo {
    width: 15rem;
  }

  .horse_care--training-photo {
    width: 15rem;
  }

  /*THE FARM MEDIA QUERIES END FOR 575px*/

  /*OUR TEAM MEDIA QUERIES START FOR 575px*/
  .our_team--shelley-photo {
    width: 20rem;
  }

  .our_team--staff-photo {
    width: 20rem;
  }

  .our_team--header-container {
    flex-direction: column;
  }

  .our_team--header {
    width: 20rem;
    font-size: 4rem;
    text-align: center;
  }

  .our_team--shelley-title {
    font-size: 2.5rem;
  }

  .our_team--header-text {
    margin: 1rem;
  }

  /*OUR TEAM MEDIA QUERIES END FOR 575px*/

  /*MEDIA QUERY FOR PORTFOLIO FOR 575px*/
  .portfolio_picture {
    width: 20rem;
    margin: auto;
  }

  /*FOORTER MEDIA QUERIES START FOR 575px*/
  .footer-div {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .footer-content {
    justify-content: center;

  }
  /*FOORTER MEDIA QUERIES END FOR 575px*/

  /*UNIVERSAL DIVIDER MEDIA QUERY FOR 575px*/
  .divider_white {
    width: 15rem;
  }

}

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

  /*INDEX MEDIA QUERIES START FOR 300px*/
  .oz_mission_container {
    width: 15rem;
  }

  .oz_mission_container--header {
    width: 15rem;
  }

  .dawson {
    width: 15rem;
  }

  .oz_blog {
    width: 10rem;
  }

  #oz_blog--photo {
    width: 10rem;
  }

  .candid_photo--1 {
    width: 15rem;
    padding: 0;
    margin: 0;
    margin-top: 1rem;
  }
  /*INDEX MEDIA QUERIES END FOR 300px*/

  /*OUR TEAM MEDIA QUERIES START FOR 300px*/
  .our_team--header {
    width: 15rem;
    font-size: 2.5rem;
    text-align: center;
  }

  .our_team--header-text {
    margin: 1rem;
    width: 15rem;
  }

  .our_team--shelley-photo {
    width: 15rem;
  }

  .our_team--staff-photo {
    width: 15rem;
  }

  /*OUR TEAM MEDIA QUERIES END FOR 300px*/

  /*HORSE CARE MEDIA QUERIES START FOR 300px*/
  .care_photo {
    width: 15rem;
  }

  .horse_care--leo {
    width: 15rem;
  }

  .horse_care--training-photo {
    width: 10rem;
  }
  /*HORSE CARE MEDIA QUERIES END FOR 300px*/

  /*PORTFOLIO MEDIA QUERY FOR 300px*/
  .portfolio_picture {
    width: 15rem;
    margin-left: auto;
  }

  /*FOOTER MEDIA QUERY FOR 300px*/
  #footer-logo {
    width: 10rem;
  }

  /*UNIVERSAL MEDIA QUERY FOR DIVIDER AT 300px*/
  .divider_white {
    width: 15rem;
  }
}