@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap");
/* Default text, background color for the website */
body {
  /* margin: 0; */
  background: #cdcdf7;
  font-family: "Karla", serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
}

/* @mixin wl_STYmdiv-12{

    margin: 0 auto;
    width: 1920px;
    display: flex;
    justify-content: left;
    border: 5px solid;

} */
/* Set the Style of paragraph titles. */
/* Basic settings for paragrpahs only sets font, justification and color. */
/* Set the style of paragraphs for most. */
/*##########################################################*/
/* These are universal classes that can be used any where */
/* Make an image fit in the <div>. */
.wl_ifit-1 {
  width: 100%;
  height: 100%;
  object-fit: fill; /* or object-fit: cover; */
  box-shadow: 0px 0px 10px black;
}

.wl_ifit-2 {
  width: clamp(18.75rem, -4.6875rem + 17.8571428571vw, 43.75rem);
  height: auto;
  box-shadow: 0px 0px 10px black;
}

.wl_ita-1 {
  font-style: italic;
}

.wl_mtitle-1 {
  display: flex;
  justify-content: center; /* Content will be center. */
  color: #7e546d;
}

/*##########################################################*/
.wl_pcont-1 {
  margin: 0 auto;
  width: auto; /* This will adjust the <div>'s width across the website. */
  /* display: flex; */
  justify-content: center; /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
}

/*##########################################################*/
/* First container for each <div> containing sub <div>s. */
.wl_ptone-1 {
  background-color: #bcbcf5;
  padding-bottom: 1%;
}

.wl_mcont-1 {
  margin: 0 auto;
  width: auto;
  display: flex;
  /*justify-content: center;*/ /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
  width: calc(100vw - 144px); /* 72px + 72px = 144px */
  margin-left: auto;
  margin-right: auto;
  /* border: 5px solid; */
}

/* Sub <div> that will contain text from a container. */
/* Since this is the first one it will be on the left. */
.wl_m1_txtcon-1 {
  display: flex;
  flex-direction: column; /* Need to put tags such as <p> to be column style. */
}

.wl_m1_ptitle-1 {
  color: #000000;
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.0625rem + 0.7142857143vw, 3rem);
  font-weight: 300;
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.1em; /* Reduce space below. */
}

.wl_m1_pgraph-1 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

/* Sub <div> that will contain text from a main container. */
/* Since this is the first one it will be on the left. */
.wl_m1_imgcon-1 {
  padding-top: 5.5%;
}

/*##########################################################*/
/*##########################################################*/
/* Second container for each <div> containing sub <div>s. */
.wl_mcont-2 {
  margin: 0 auto;
  width: auto;
  display: flex;
  /*justify-content: center;*/ /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
  width: calc(100vw - 144px); /* 72px + 72px = 144px */
  margin-left: auto;
  margin-right: auto;
}

.wl_m2_txtcon-1 {
  display: flex;
  flex-direction: column; /* Need to put tags such as <p> to be column style. */
}

.wl_m2_ptitle-1 {
  color: #000000;
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.0625rem + 0.7142857143vw, 3rem);
  font-weight: 300;
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.1em; /* Reduce space below. */
}

/* Spacing and padding is never great. */
/* Special class was made to address it with postion properties. */
/* This is to help adjust with bullet list. */
.wl_m2_pgraph-1 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.wl_m2_pgraph-2 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: -0.3em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m2_pgraph-3 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

/*##########################################################*/
/*##########################################################*/
/* Third container for each <div> containing sub <div>s. */
.wl_ptone-3 {
  background-color: #bcbcf5;
  padding-bottom: 1%;
}

.wl_mcont-3 {
  margin: 0 auto;
  width: auto;
  display: flex;
  /*justify-content: center;*/ /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
  width: calc(100vw - 144px); /* 72px + 72px = 144px */
  margin-left: auto;
  margin-right: auto;
  background-color: #bcbcf5;
  padding-bottom: 1%;
  justify-content: center;
}

/* Sub <div> that will contain text from a main container. */
/* Since this is the first one it will be on the left. */
.wl_m3_imgcon-1 {
  width: clamp(15rem, -1.40625rem + 26.7857142857vw, 33.75rem);
  height: auto;
  transform: scale(0.8);
}

.wl_m3_imgcon-2 {
  width: clamp(15rem, -1.40625rem + 26.7857142857vw, 33.75rem);
  height: auto;
  transform: scale(0.8);
}

.wl_m3_imgcon-3 {
  width: clamp(15rem, -1.40625rem + 26.7857142857vw, 33.75rem);
  height: auto;
  transform: scale(0.8);
}

/*##########################################################*/
/*##########################################################*/
/* Fourth container for each <div> containing sub <div>s. */
.wl_mcont-4 {
  margin: 0 auto;
  width: auto;
  display: flex;
  /*justify-content: center;*/ /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
  width: calc(100vw - 144px); /* 72px + 72px = 144px */
  margin-left: auto;
  margin-right: auto;
}

.wl_m4_txtcon-1 {
  display: flex;
  flex-direction: column; /* Need to put tags such as <p> to be column style. */
}

.wl_m4_ptitle-1 {
  color: #000000;
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.0625rem + 0.7142857143vw, 3rem);
  font-weight: 300;
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.1em; /* Reduce space below. */
}

.wl_m4_subtitle-1 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-1 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-1 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m4_subtitle-2 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-2 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-2 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m4_subtitle-3 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-3 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-3 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m4_subtitle-4 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-4 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-4 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m4_subtitle-5 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-5 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-5 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m4_subtitle-6 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  position: relative;
  top: 4px;
}

.w1_m4_stitle-6 {
  color: #864802;
  text-decoration: underline;
  text-decoration-color: #864802;
}

.wl_m4_pgraph-6 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

/*##########################################################*/
/*##########################################################*/
/* Fifth container for each <div> containing sub <div>s. */
.wl_ptone-5 {
  background-color: #bcbcf5;
  padding-bottom: 1%;
}

.wl_mcont-5 {
  margin: 0 auto;
  width: auto;
  display: flex;
  /*justify-content: center;*/ /* Content inside will be center, does not apply to nested <div>s. */
  /* border: 5px solid; */
  width: calc(100vw - 144px); /* 72px + 72px = 144px */
  margin-left: auto;
  margin-right: auto;
  background-color: #bcbcf5;
  padding-bottom: 1%;
}

.wl_m5_txtcon-1 {
  display: flex;
  flex-direction: column; /* Need to put tags such as <p> to be column style. */
}

.wl_m5_ptitle-1 {
  color: #000000;
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.0625rem + 0.7142857143vw, 3rem);
  font-weight: 300;
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.1em; /* Reduce space below. */
}

.wl_m5_pgraph-1 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m5_pgraph-2 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

.wl_m5_pgraph-3 {
  color: #000000;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.15625rem + 0.3571428571vw, 1.625rem);
  padding-right: 80px;
  text-align: justify;
  text-justify: inter-character; /* Style of justify, this option is target characters. */
  word-spacing: 0.05em; /* This should set maxing space between words. */
  margin-block-start: 0.5em; /* Reduce space above. */
  margin-block-end: 0.5em; /* Reduce space below. */
}

/*# sourceMappingURL=web_layout.css.map */