/* This is the custom scss file for MSI changes */
/*.nav-float-right #site-navigation {
	margin-left: 3rem;
}
*/
.div-example {
  background-color: blue;
}
@media (max-width: 767px) {
  .div-example {
    background-color: red;
  }
}
/* end of breakpoints */
.editor-styles-wrapper :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block {
  margin-left: auto !important;
  margin-right: auto !important;
}
.inside-header .wp-block-buttons {
  margin-left: auto;
}
.nav-button .wp-block-button__link {
  padding: 0.25rem 2.25rem;
  word-break: normal;
}
.nav-button .wp-block-button__link:hover {
  color: white;
}
.circle {
  height: 240px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5em;
  margin: auto;
}
.icon-nav {
  gap: 1em;
  padding: 0 8rem;
}
.icon-nav .wp-block-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  font-size: 1.5em;
  margin: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.icon-nav .wp-block-column p {
  margin-bottom: 0;
}
.icon-nav .my-linked-container .wp-block-column {
  position: relative;
}
.icon-nav .my-linked-container a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}
/*Commenting out incase client wants to use later on 

.blue-penny-bg {
	background-image: url(../img/blue-penny.svg);
	background-repeat: no-repeat;
	background-position: 280% -30%;
	background-size: 75%;

	@include breakpoint(small) {
		background-size: 72%;
	}

	@media screen and (max-width: 425px) {
		background-size: 125%;
		background-position: -190% -125%;
	}
}

.red-penny-bg {
	background-image: url(../img/red-penny.svg);
	background-repeat: no-repeat;
	background-position: 305% 305%;
	background-size: 80%;

	@include breakpoint(small) {
		background-size: 72%;
	}

	@media screen and (max-width: 425px) {
		background-size: 125%;
		background-position: -190% -125%;
	}
}
	
*/
@media (max-width: 480px) {
  .full-width-circle .wp-block-button {
    margin: 0 auto;
  }
}
:where(.wp-block-columns.is-layout-flex) {
  gap: 1em;
}
@media (max-width: 480px) {
  .icon-services {
    text-align: center;
    flex-wrap: wrap;
  }
  .icon-services .wp-block-group, .icon-services .icon-container {
    margin: 0 auto;
  }
  .icon-services .wp-block-button {
    margin: 0 auto;
  }
  .icon-services ul, .icon-services ol {
    display: table;
    margin: 1em auto;
  }
}
/* Fixes so native Gutenberg block alignment works with GP 

.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
	width: auto;

	.wp-block-column {
		width: calc(100% - 40px); 
		max-width: 1400px; 
		padding: 10px; 
		margin: 0 auto;
	}
}

.alignwide,
.aligncenter {
	text-align: center;
}
	*/
.center-content {
  display: flex;
  justify-content: center;
}
.space-content {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.mb-2 {
  margin-bottom: 2em;
}
.has-shadow {
  box-shadow: -4px 10px 20px -6px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: -4px 10px 20px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -4px 10px 20px -6px rgba(0, 0, 0, 0.75);
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.circle-icon .icon-container {
  padding: 5px;
  border-radius: 50%;
}
/* Location Detail Pages */
.sl-container {
  max-width: 100% !important;
}