/*
  Theme Name: DicksDenimTheme
  Theme URI: http://example.com/dicksdenim-theme
  Author: Dick's Denim
  Author URI: http://dicksdenim.com
  Description: Theme for DicksDenim.com
  Version: 1.0
  License: Proprietary Use Only.
  License URI: http://www.dicksdenim.com
  Text Domain: Dicks-Denim-Theme
*/

:root {
  --colorBackground: #f2f2f4;
  --colorBackground: #f6f6f6;
  /* --colorBackground: #f4f2f0; */

  --colorBackground: #fbfdff;
  --colorSection: #fbfdff;

  --colorMain: #89e1ff;
  --colorLight: #b8edff;
  --colorLightest: #d2f3ff;
  --colorDark: #7bcae5;
  --colorExtraDark: #365a66;

  --colorTextBlue: #2986cc;
  /* --colorTextBlue: #1e72b9; /* Blue that's used in Vote Logo */
  /* --colorText: #576169; */
  /* --colorText: #4b545b; */
  --colorText: #343a3f;
  --colorText: #1e1e1e;
  --colorOffBlack: #576169;

  /* --colorAccent: #ffa789; */
  --colorAccent: #f49095;
  --colorAccentDark: #f2797f;
  --colorYellow: #ffe289;
  --colorYellowDark: #bd8e00;
  --colorYellowLight: #ffefbc;
  --colorBlue: #65bdfd;
  --colorPurple: #9095f4;
  --colorGreen: #00f0b4;
  --colorGreenDark: #00a47b;
  --colorGreenDarkest: #007155;
  /* # */

  /* color i liked: #e88b8f;  */



  /* Page Width and Height Calculations*/
  --sideWidth: 175px;
  --mainWidth: calc( 100vw - var(--sideWidth) );
  --slideWidthMax: 1366px;
  --slideWidth: calc( var(--mainWidth) - 25vw );
  --slideHeight: 80vh;

  --h1Size: calc( var(--slideHeight) * 0.035); /* My screen: h1 height = 50, slide height = 1025. 650/1025 = 0.048 */
  --h2Size: calc( var(--slideHeight) * 0.02); /* h2 height = 35, slide height = 1025. 35/1025 = 0.034 */
  --h3Size: calc( var(--slideHeight) * 0.01); /* h3 height = 25, slide height = 1025. 25/1025 = 0.024 */
  --textSize: calc( var(--slideHeight) * 0.021); /* font height = 22, slide height = 1025. 22/1025 = 0.021 */
  --line: calc( var(--textSize) * 0.2 ); /* 0.19rem */


  /* --topicHeight: calc(100vh - 4rem); /* Browser height minus the padding */

  /* Number of Topics Per Section */
  /* --topicNumberRape: 4;
  --topicNumberSchool: null;
  --topicNumberLife: null; */

  /* Width of a section = max number of slides in the largest topic */
  /* --maxSlidesRape: 5;
  --maxSlidesSchool: null;
  --maxSlidesLife: null; */



  /* Margin Widthing = (total width - side menu - slide width) / 2 */
  /* 100 - */
  --slideMarginWidth: calc( ( var(--mainWidth) - var(--slideWidth) ) / 2 );
  --slideMarginHeight: 3rem;

  /* --widthRape: calc(
      ( var(--slideWidth) * var(--maxSlidesRape) ) +
      ( var(--slideMargin) * var(--maxSlidesRape) )
    ); */
  /* --widthRape: 6720px; */

  /* --heightRape: calc( var(--topicHeight) * var(--topicNumberRape) ); */

}


html, body {
  background: #F4F7FC;
  background:#f7f7f7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
  overflow: auto;
  padding: 0px;
  width: 100vw !important;
}

a{
  color: var(--colorTextBlue)
  text-decoration: none;
}
a > p{
  color: var(--colorTextBlue);
}
a > p:hover{
  color: var(--colorAccent);
}


h1{
  color: var(--colorTextBlue);
  font-family: Visby, sans-serif;
  font-size: var(--h1Size);
  /* font-size: 50px; */
  letter-spacing: 1px;
  margin: 0;

}

h2{
  color: var(--colorAccent);
  /* font-family: Visby, sans-serif; */
  font-family: Helvetica, Ariel, sans-serif;
  font-size: var(--h2Size);
  /* font-size: 35px; */
  font-weight: bold;
  /* letter-spacing: 0.75px; */
  margin: 0;
}

.symbols{
  font-family: Helvetica, Ariel, sans-serif !important;
}

h3{
  /* color: #38e800; */
  color: var(--colorTextBlue);
  /* font-family: Visby, sans-serif; */
  font-family: Helvetica, Ariel, sans-serif;
  font-size: var(--h3Size);
  /* font-size: 25px; */
  font-weight: bold;
  /* letter-spacing: 0.75px; */
  margin: 0 0 0.25rem 0;
}


span, b, p, i, dt, dd{
  color: var(--colorText);
  font-family: Helvetica, Ariel, sans-serif;
  font-size: var(--textSize);
  /* font-size: 20px; */
  margin: 0;
}

p, slot, span,{
  white-space: pre-wrap;
  text-indent: 0;
}

strong,
b{
  color: var(--colorTextBlue);
  font-size: var(--textSize);
  /* font-size: 20px; */
  white-space: pre-wrap;
}

b > i,
b > u{
  color: var(--colorTextBlue);
}

dl, dt, dd{
  width: 100%;
}
dt{
  cursor: default !important;
}
dd{
  align-items: center;
  display: flex;
  justify-content: space-between;
}

ul{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

img{
  /* background: #d0d0d0; */
}


.text_center{
  text-align: center;
}

.text_accent{
  color: var(--colorAccent);
}

.text_blue{
  color: var(--colorTextBlue);
}

.text_accent_dark{
  color: var(--colorAccentDark);
}

.text_purple{
  color: var(--colorPurple);
}

.text_yellow_dark{
  color: var(--colorYellowDark);
}

.text_white{
  color: #fff;
}

.text_red{
  color: #ff4d4d;
}

.marginless{
  margin: 0;
}

input[type="radio"]{
  display: none;
}



a {
  text-decoration: none;
  color: var(--colorText);
}

section{
  align-items: center;
  background: #fff;
  border: var(--line) solid #f0f0f0;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
  width: 90vw;
}

section > *:not(:last-child){
  margin-bottom: 2rem;
}



.section_title{
  align-items: center;
  border-bottom: 2px solid #f5f5f5;
  display: flex;
  justify-content: space-between;

  padding-bottom: 0.25rem;
}

.section_title > img{
  background: #f0f0f0;
  border-radius: 1.25rem;
}

/* .section_title > *:not(:last-child){
  margin-right: 1rem;
} */

.hide{
  display: none !important;
}
.show{
  display: flex;
}

/* #wrap{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: auto;
} */

.center{
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.center_vertical{
  align-items: center;
  display: flex;
  height: 100%;
}


.nbsp{
  align-items: baseline;
  display: flex;
  flex-direction: row;
}
.nbsp > *:not(:last-child){
  margin-right: 0.5rem !important;
}

.together,
.join,
.pair,
.bridge{
  display: flex;
  flex-direction: row;
}

.together_center,
.join_center,
.pair_center,
.bridge_center{
  align-items: center;
  display: flex;
  flex-direction: row;
}

.join > *:not(:last-child),
.join_center> *:not(:last-child){
  margin-right: 2rem;
}

.pair > *:not(:last-child),
.pair_center > *:not(:last-child){
  margin-right: 3rem;
}

.bridge > *:not(:last-child),
.bridge_center > *:not(:last-child){
  margin-right: 6rem;
}


.stack_together,
.stack,
.stack_long{
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.stack_together > p,
.stack > p,
.stack_long > p {
  margin: 0;
}

.stack_together_center,
.stack_center,
.stack_long_center{
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.stack_together,
.stack_together_center > p{
  margin: 0;
}
.stack > *:not(:last-child),
.stack_center > *:not(:last-child){
  margin-bottom: 1rem !important;
}

.stack_long_center > *:not(:last-child){
  margin-bottom: 4rem;
}



.row_center{
  display: flex;
  justify-content: center;
  width: 100%;
}

.row_right{
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.width_full{
  width: 100%;
}

.height_full{
  width: 100%;
}

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

.between{
  display: flex;
  justify-content: space-between;
}

.margin_bottom{
  margin-bottom: 3rem !important;
}

.margin_bottom_half{
  margin-bottom: 1.5rem !important;
}

.tab{
  margin-left: 2rem !important;
}

.tab_long{
  margin-left: 4rem !important;
}

.nbsp > *:not(:last-child){
  align-items: baseline;
  display: flex;
  flex-direction: row;
  margin-right: 0.25rem;
}

.button,
button,
input[type=submit]{
  align-items: center;
  align-self: flex-start;
  background: #fff;
  border: var(--line) solid #d0d0d0;
  border-radius: 0.75rem;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--colorOffBlack);
  display: inline-block;
  font-family: Helvetica, Ariel, sans-serif;
  font-weight: bold;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  width: auto;
}

.button:hover,
button:hover,
input[type=submit]:hover{
  background: #f0f0f0;
}

.button > p{
  color: var(--colorOffBlack);
  font-family: Helvetica, Ariel, sans-serif;
  font-size: calc( 0.85 * var(--textSize) );
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.button_copy{
  align-items: center;
  border: var(--line) solid var(--colorTextBlue);
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  padding: 0.5rem 1rem;
}
.button_copy > *:not(:last-child){
  margin-right: 1rem;
}

.button_opens{
  background: var(--colorAccentDark);
  border-radius: 0.75rem;
  cursor: pointer;
  padding: 0.75rem;
}

select{
  background: #fff;
  border: var(--line) solid #f0f0f0;
  border-radius: 0.5rem;
  color: var(--colorOffBlack);
  cursor: pointer;
  font-family: Helvetica, Ariel, sans-serif;
  font-size: calc( 0.85 * var(--textSize) );
  padding: 0.5rem 1rem;
}


.toggle_item{
  display: flex;
}
.toggle_item ~ .toggle_item {
  display: none; /* Hide all the slides except the first one */
}


.note{
  background: #fefee1;
  background: #fefec8;
  border: var(--line) solid #fdca96;
  padding: 2rem 4rem;
}



#popDim{
  background: #000;
  cursor: pointer;
  display: none;
  opacity: 0.7;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 999999;
}

#popDimX{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999999;
}

#popWrap{
  align-items: center;
  cursor: pointer;
  display: none;
  height: 100vh;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999999;
}

#pop{
  align-items: flex-start;
  background: #fff;
  border-radius: 1rem;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* min-width: var(--sizeBodyWidth); */
  max-height: 80vh;
  max-width: 90vw;
  padding: 1.25rem 3rem;
  /* width: 75vw; */
  z-index: 9999999;
}

.subpop{
  display: none;
  flex-direction: column;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge - No Scrollbar */
  scrollbar-width: none;  /* Firefox - No Scrollbar */
  -webkit-scrollbar: none; /* Chrome - No Scrollbar */
}

.subpop > *:not(:last-child){
  margin-bottom: 1rem;
}

.subpop > h1{
  border-bottom:var(--lineThickness) solid #f0f0f0;
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  width: 100%;
}


/*
░█████████     ░███      ░██████  ░██████████    ░████████   ░██           ░██████     ░██████  ░██     ░██   ░██████
░██     ░██   ░██░██    ░██   ░██ ░██            ░██    ░██  ░██          ░██   ░██   ░██   ░██ ░██    ░██   ░██   ░██
░██     ░██  ░██  ░██  ░██        ░██            ░██    ░██  ░██         ░██     ░██ ░██        ░██   ░██   ░██
░█████████  ░█████████ ░██  █████ ░█████████     ░████████   ░██         ░██     ░██ ░██        ░███████     ░████████
░██         ░██    ░██ ░██     ██ ░██            ░██     ░██ ░██         ░██     ░██ ░██        ░██   ░██           ░██
░██         ░██    ░██  ░██  ░███ ░██            ░██     ░██ ░██          ░██   ░██   ░██   ░██ ░██    ░██   ░██   ░██
░██         ░██    ░██   ░█████░█ ░██████████    ░█████████  ░██████████   ░██████     ░██████  ░██     ░██   ░██████

https://patorjk.com/software/taag/#p=display&f=Terrace&t=Page+Blocks&x=none&v=4&h=4&w=80&we=false
*/



header{
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 1rem 3rem;
}

#logoHome{
  height: 30px;
}

nav{
  align-items: center;
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 2rem; */

}

nav > *:not(:last-child){
  margin-right: 2rem;
}

.nav_item{
  padding: 0.5rem 1rem;
}
.nav_item:hover,
.nav_item:hover > p{
  background: #c0c0c0;
  color: #fff;
}


main{
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
  height: 100%;
  height: auto;
  /* position: absolute; */
}

#feature{
  margin: 0 0 2rem 0;
}

#banner{
  align-items: center;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 25vh;

}

#banner_postcard_wrap{
  align-items: center;
  background-color: #007ced;
  background: linear-gradient(to bottom, #007ced 1%,#cce7ff 100%);
  display: flex;
  justify-content: center;
  height: 25vh;
  min-width: 100%;
  position: relative;
  overflow: hidden;
}
#banner_postcard_letters{
  z-index: 9999;
}
@keyframes cloud_left{
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}
@keyframes cloud_right{
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
#banner_postcard_cloud_one{
  position: absolute;
  left:10vw;
  top: 50%;
  z-index: 996;
  transform: rotateY(180deg);
  animation: cloud_left 60s linear 0s infinite alternate;
}
#banner_postcard_cloud_two{
  position: absolute;
  transform: scale(2,2);
  left:30vw;
  top: 5%;
  z-index: 997;
  /* animation: cloud_right 60s linear 0s infinite alternate; */
}
#banner_postcard_cloud_three{
  position: absolute;
  transform: scale(1.75,1.75);
  left: 60vw;
  top: 40%;
  z-index: 998;
  /* animation: cloud_left 60s linear 0s infinite alternate; */
}
#banner_postcard_cloud_four{
  position: absolute;
  left:75vw;
  transform: rotateY(180deg);
  z-index: 999;
  animation: cloud_right 30s linear 0s infinite alternate;
}


.overlay_wrap{
  position: relative;
}
.overlay_top_left{
  position: absolute;
  top: 0;
  left: -50px;
}
.overlay_bottom_right{
  position: absolute;
  bottom: 0;
  right: 50px;
}


.menu{
  align-items: center;
  background: #f6eae3;
	background: #003a71;
	background: #bfe0ff;
  border-bottom: var(--line) solid #f1dfd4;
  border-radius: 0;
  display: flex;
  justify-content: center;
  margin: 0 0 2rem 0;
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 99999;
}
.button_cluster{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 60vw;
}
.button_cluster > a > .button{
  border: var(--line) solid #e3bea8;
}
.button_cluster > a > .button > p{
  /* color: var(--colorTextBlue); */
}

.no_results,
.subsection_title{
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  margin: 1rem 0;
}

#contact{
  position: fixed;
  bottom: calc(var(--line) * 3);
  right: calc(var(--line) * 3);
  z-index: 9999;
}
#contact > img{
  height: 24px;
  width: 24px;
}


footer{
margin-bottom: 2rem;
}




/* ------------------------------- TITLE PAGE ------------------------------- */

/*
░██████░███    ░██ ░███████   ░██████████ ░██    ░██
  ░██  ░████   ░██ ░██   ░██  ░██          ░██  ░██
  ░██  ░██░██  ░██ ░██    ░██ ░██           ░██░██
  ░██  ░██ ░██ ░██ ░██    ░██ ░█████████     ░███
  ░██  ░██  ░██░██ ░██    ░██ ░██           ░██░██
  ░██  ░██   ░████ ░██   ░██  ░██          ░██  ░██
░██████░██    ░███ ░███████   ░██████████ ░██    ░██

https://patorjk.com/software/taag/#p=display&f=Terrace&t=INDEX&x=none&v=4&h=4&w=80&we=false
*/


.category_wrap{
  position: relative; /*Used to tuck '.seo_text' under '.category_container' */
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.category_container{
	align-items: center;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  width: 80vw;
}
.category_container > *{
  margin: 1rem;
}



.grid_wrap{
  position: relative;
}

.grid{
  background-color: #fff;
  display: grid;
  grid-row-gap: 2em;
  justify-items: center;
  padding: 10px;
  width: 80vw;
  z-index: 2;
}

.grid_column_one{
  grid-template-columns: repeat(1, auto);
}
.grid_column_two{
  grid-template-columns: repeat(2, auto);
}
.grid_column_three{
  grid-template-columns: repeat(3, auto);
}
.grid_column_four{
  grid-template-columns: repeat(4, auto);
}
.grid_column_five{
  grid-template-columns: repeat(5, auto);
}




.seo_text{
  position: absolute;
  top: 2rem; /* 2rem = margin-top on 'grid_wrap' */
  z-index: -1;
}
.seo_text > p{
  color: #d0d0d0;
}

.preview_wrap{
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 15vw;
}

.preview_img{
  background: #f0f0f0;
  height: 15vw;
  width: 15vw;
}

.preview_title{
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.5rem 0;
}
.preview_title > *:not(:last-child){
  margin-bottom: 0.25rem;
}
.preview_title > p{
  overflow: inherit;
  text-align: center;
  width: inherit;
}






/*
  ░██████  ░██     ░██ ░██████░███████   ░██████████
 ░██   ░██ ░██     ░██   ░██  ░██   ░██  ░██
░██        ░██     ░██   ░██  ░██    ░██ ░██
░██  █████ ░██     ░██   ░██  ░██    ░██ ░█████████
░██     ██ ░██     ░██   ░██  ░██    ░██ ░██
 ░██  ░███  ░██   ░██    ░██  ░██   ░██  ░██
  ░█████░█   ░██████   ░██████░███████   ░██████████

https://patorjk.com/software/taag/#p=display&f=Terrace&t=GUIDE&x=none&v=4&h=4&w=80&we=false
*/

.slide_wrap{
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.slide_button{
  align-items: center;
  border: 2px solid #d0d0d0;
  border-radius: 4rem;
  cursor: pointer;
  display: flex;
  height: 4rem;
  justify-content: center;
  width: 4rem;
  position: absolute;
  top: calc(50% - (4rem / 2));
}
.slide_button > p{
  color: #b0b0b0;
  font-size: 2rem;
}

.button_back{
  left: -6rem;
}
.button_next{
  right: -6rem;
}
.slide_button_disable{
  background: #fff;
  border: 2px solid #fff;
  cursor: default;
}
.slide_button_disable > p{
  color: #fff;
}

.slide_reel{
  border: 1px solid #d0d0d0;
  margin-bottom: 1rem;
  padding: 1rem;
}

.slide{
  display: none;
}
/* .slide ~ .slide {
  display: none; /* Hide all the slides except the first one
} */

.slide_selected{
  display: flex;
}

.slide_img{
  background: #f0f0f0;
  height: 60vh;
  width: 25vw;
}

.slide_title{
  margin-bottom: 3rem;
}

.slide_info{
  padding: 2rem;
  height: calc(60vh - (2rem * 2) ); /* (2rem * 2) is the padding */
  width: 25vw;
}

.breadcrumb_wrap{
  display: flex;
}
.breadcrumb_wrap > *:not(:last-child){
 margin-right: 0.75rem;
}
.breadcrumb_dot{
  background: #d0d0d0;
  border-radius: 1rem;
  cursor: pointer;
  height: 1rem;
  width: 1rem;
}
.breadcrumb_dot_selected{
  background: var(--colorAccent);
}


/*
 ░█████████  ░█████████    ░██████   ░███████   ░██     ░██   ░██████  ░██████████  ░██████
 ░██     ░██ ░██     ░██  ░██   ░██  ░██   ░██  ░██     ░██  ░██   ░██     ░██     ░██   ░██
 ░██     ░██ ░██     ░██ ░██     ░██ ░██    ░██ ░██     ░██ ░██            ░██    ░██
 ░█████████  ░█████████  ░██     ░██ ░██    ░██ ░██     ░██ ░██            ░██     ░████████
 ░██         ░██   ░██   ░██     ░██ ░██    ░██ ░██     ░██ ░██            ░██            ░██
 ░██         ░██    ░██   ░██   ░██  ░██   ░██   ░██   ░██   ░██   ░██     ░██     ░██   ░██
 ░██         ░██     ░██   ░██████   ░███████     ░██████     ░██████      ░██      ░██████

 https://patorjk.com/software/taag/#p=display&f=Terrace&t=PRODUCTS&x=none&v=4&h=4&w=80&we=false
*/