/*updated 09-20-23*/
/* hide chevrons for now */
.section-chevron-bottom > .container::before, .section-chevron-bottom > .container::after { display:none; }
.flexible-layout > .wrapper-section > .container-section.bottom > .container::before, .flexible-layout > .wrapper-section > .container-section.bottom > .container::after { display:none; }
.section-chevron-top::before { display: none; }
.flexible-layout > .wrapper-section > .container-section.top::before { display: none; }
.flexible-layout > .wrapper-section > .container-section.top-and-bottom::before { display: none; }
.flexible-layout > .wrapper-section > .container-section.top-and-bottom > .container::before { display: none; }
.flexible-layout > .wrapper-section > .container-section.top-and-bottom > .container::after { display: none; }

.divider-dome.boostrap-section-container { padding-bottom:0; }

/* Divider Dip */
.divider-dip, .divider-dip-top {
  --bottom: radial-gradient(53% calc(10px + 50px) at 50% -10px,#0000 98%,#000);
  -webkit-mask: var(--bottom);
          mask: var(--bottom);
  margin-top: -50px;
  padding-top: 70px;
}
.divider-dip::before, .divider-dip-top::before {
  --top: 
   linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
   radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
  -webkit-mask: var(--top);
          mask: var(--top);
}
.divider-dip.divider-arrow, .divider-dip-top.divider-arrow, .divider-dip.divider-dimple, .divider-dip-top.divider-dimple  {  /* when the dip and dimple are both in the same section, make sure the dimple shows properly */
	position: relative;
  z-index: 3;
}


/* Divider Dome */
.divider-dome, .divider-dome-bottom {
  --top: radial-gradient(53% calc(10px + 50px) at 50% calc(100% + 10px),#0000 98%,#000);
  -webkit-mask: var(--top);
          mask: var(--top);
  margin-bottom: -50px;
  padding-bottom: 70px;
  position:relative;
  z-index: 2;
}
.divider-dome::before, .divider-dome-bottom::before {
  --bottom: 
   linear-gradient(#000 0 0) bottom/100% calc(100% - 50px) no-repeat,
   radial-gradient(farthest-side,#000 98%,#0000) top/100px 100px no-repeat;
  -webkit-mask: var(--bottom);
          mask: var(--bottom);
}
[class*="divider-trim-"].divider-dome::before, [class*="divider-trim-"].divider-dome-bottom::before  {  /* if both the dome and any divider trim class is present, then make sure the trim can be seen */
	height: 60px;
	margin-top: -50px;
}



/* Divider Dimple */
.divider-arrow, .divider-dimple {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 40px),calc(50% + 65.00px) calc(100% - 40px),50% 100%,calc(50% - 65.00px) calc(100% - 40px),0 calc(100% - 40px));
  margin-bottom: -41px;
}

/*apply to same section as .divider-arrow when subsequent section is animated*/
.divider-arrow-z-index {
	z-index: 1; position: relative;
}

/*apply to same section as .divider-arrow when iframe is present*/
.divider-arrow-z-index-3 {
	z-index: 3;
}

/* Divider Trims */
/*bright coral-seafoam-uclablue*/
.divider-trim-one {
  position: relative;
  padding-top: 10px;
}
.divider-trim-one::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(255, 128, 0, 1) 28%, rgba(133, 182, 160, 1) 50%, rgba(39, 116, 174, 1) 100%);
}
/*uclablue-lightest blue-uclablue*/
.divider-trim-two {
  position: relative;
  padding-top: 10px;
}
.divider-trim-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(39,116,174,1) 0%, rgba(192,212,236,1) 50%, rgba(39,116,174,1) 66%);
}
/*bright coral-bright gold*/
.divider-trim-three {
  position: relative;
  padding-top: 10px;
}
.divider-trim-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(255,128,0,1) 0%, rgba(253,233,0,1) 100%);
}
/*midnight blue-uclablue-midnight blue*/
.divider-trim-four {
  position: relative;
  padding-top: 10px;
}
.divider-trim-four::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(0,8,41,1) 0%, rgba(39,116,174,1) 50%, rgba(0,8,41,1) 100%);
}
/*dark blue-uclablue-cool grey-bright coral*/
.divider-trim-five {
  position: relative;
  padding-top: 10px;
}
.divider-trim-five::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(0,59,92,1) 0%, rgba(39,116,174,1) 50%, rgba(136,146,172,1) 75%, rgba(255,128,0,1) 100%);
}
/*lime-skyblue-lemon*/
.divider-trim-six {
  position: relative;
  padding-top: 10px;
}
.divider-trim-six::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(217,222,72,1) 0%, rgba(129,196,247,1) 33%, rgba(253,233,0,1) 80%);
}
/*dark blue-dark seafoam-seafoam-dark gold*/
.divider-trim-seven {
  position: relative;
  padding-top: 10px;
}
.divider-trim-seven::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px; /* Set the height of the trim */
  background: linear-gradient(90deg, rgba(0,59,92,1) 0%, rgba(78,126,107,1) 33%, rgba(133,182,160,1) 50%, rgba(253,183,26,1) 100%);
}

/* DIVIDER MEDIA QUERIES */
@media screen and (max-width: 1280px) {
  .divider-dip, .divider-dip-top {
  	--bottom: radial-gradient(60% calc(10px + 50px) at 50% -10px,#0000 98%,#000); /* so the dip isnt as pronounced on mobile */
  }
  .divider-dome, .divider-dome-bottom {
  	--top: radial-gradient(60% calc(10px + 50px) at 50% calc(100% + 10px),#0000 98%,#000); /* so the dome isnt as pronounced on mobile */
  }
}
/* END DIVIDER MEDIA QUERIES */

/* if this is not present, the section will overlap the Add to Library link in the layout builder because of the dip effect negative margin */
#layout-builder .divider-dip, #layout-builder .divider-dip-top { margin-top:0; }
#layout-builder .divider-arrow, #layout-builder .divider-dimple, #layout-builder .divider-dome { padding-bottom: 260px; } /* this currently accommodates the Add Block menu */