/* These styles are used in the backend editor AND in the Theme (frontend) */

/* CSS is provided by the theme itself, and modified by any custom css you add to the theme. */
/* But that CSS is not active when using the backend-editor, so here is a good place to put  */
/* any custom css which should be active in the frontend website and also applied to editor. */
/* The goal is to make the visual editor display as like the final frontend view as possible */
/* so do not forget to configure the TinyMCE styles dropdown with elements to match these.   */

/* Suggested general non-tag-specific visual styles (for all websites) */

.list       { margin: 0.35rem 0; }
.stdtop     { margin-top: 0.65rem !important; }
.moretop    { margin-top: 0.8rem  !important; }
.lotstop    { margin-top: 1rem    !important; }
.hugetop    { margin-top: 1.3rem  !important; }
.stdbottom  { margin-bottom: 0.65rem !important; }
.morebottom { margin-bottom: 0.8rem  !important; }
.lotsbottom { margin-bottom: 1rem    !important; }
.hugebottom { margin-bottom: 1.3rem  !important; }

.topless    { margin-top: 0 !important; }
.bottomless { margin-bottom: 0 !important; }

.beforelist { margin-bottom: 0.3rem; }

.lastitempx { padding-bottom: 12px !important; }
.lastitemem { margin-bottom: 0; padding-bottom: 1.3rem; }

strong, .strong, .fett, .bold, .smallBold, .smallerBold { font-weight: bold; }

/* Revert to normal text within strong */
.notstrong { font-weight: normal; }

.smaller, .smallerBold { font-size: 0.95rem; line-height: 1.25; }

.small, .smallBold { font-size: 0.89rem; line-height: 1.2; }

/* Append your site-specific styles here */

ul.acf-checkbox-list {list-style:none; font-weight:bold;font-size:1em}

ul.acf-radio-list li, ul.acf-checkbox-list li {
    font-size: 15px !important;
}


.left-float {
	float:left;
	margin:25px;
	margin-left:0;
	margin-top: 0;
	margin-bottom: 1%;
}
.right-float {
	float:right;
	margin:25px;
	margin-right:0;
	margin-top: 0;
	margin-bottom: 1%;
}
.breakout {
	width:25%;
	padding:30px;
}
.red {
	background: #9d170f;
	color: #fff;
	font-weight:bold;
}
.black {
	background: #000;
	color: #fff;
	font-weight:bold;
}
.clear-float {
	clear:both;
}

.headerbar {
	padding:10px;
}
blockquote,.blockquote {
    margin-left: 20% !important;
    margin-right: 20% !important;
    font-style: italic;
    font-size: 1.3em;
    line-height: 1.8;
    border: 12px solid #9d170f;
    border-top: none;
    border-bottom: none;
    padding-left: 3%;
    padding-right: 3%;

}
.post-it {
    width: 390px;
    min-height: 300px;
    background: rgb(255,255,150);
    padding: 2%;
    padding-top: 4%;
    height: auto;
    box-shadow: 5px 5px 20px;
    transform: rotate(5deg);
    font-size: 1.2em;
    line-height: 1.8;
    margin: auto;
}
.post-it:before {
    content: 'x';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background: rgba(0,0,0,0.2);
    text-align: right;
    padding-right: 10px;
    cursor: pointer;
    box-sizing:border-box;
}
.bracketbox {
    margin-left: 20% !important;
    margin-right: 20% !important;
    font-size: 1.3em;
    line-height: 1.8;
    padding-left: 1%;
    padding-right: 1%;
    clear: both;
    font-family: monospace;
    position: relative;
    display: flex;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: 50px solid;
    border-top-width:0;
    border-bottom-width:0;
    border-image: url(/wp-content/themes/nitro_s_3/images/bracket-border-2.png) 40 100;
}
.bracketbox p {
    flex-shrink: 5;
}

li > p {
	display:inline !important;
}

.fancy-ul,
.checklist {
    list-style: none;
    padding-left: 25px;
    position: relative;
    margin-left: 100px;
    margin-right:100px;
    overflow:hidden;
}

.fancy-ul li,
.checklist li {
    padding-left: 26px;
    position: relative;
}
.fancy-ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-left: -26px;
    font-size: 100%;
    color:#9d170f;
    margin-right:10px;
}
.checklist li:before {
    content: '\f14a';
}

.chevronlist li:before {
    content: '\f138';
}

.pluslist li:before {
    content: '\f067';
}

.xlist li:before {
    content: '\f00d';
}

.trianglelist li:before {
    content: '\f0da';
    font-size: 1em;
    transform: scale(1.5);
}
.boxlist li:before {
    content: '\f0c8';
}

ol.bigdisc {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 43px;
    margin-left: 100px;
    margin-right:100px;
    overflow:hidden;
    padding-bottom:5px;
}
ol.bigdisc li {
  margin: 0 0 15px 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol.bigdisc li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #9d170f;
  border-radius: 100%;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}

.center-announcement {
    width: 90%;
    background: rgba(255,255,0,0.3);
    margin: auto;
    padding: 30px;
    border-color: rgba(255,0,0,1);
    border-style: solid;
    border-width: 0;
    border-top-width: 10px;
    border-bottom-width:10px;
}

.centered-flexbox {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;
	align-content: center;
}
.centered-flexbox > * {
	margin:5px;
}

.fontsize12 {
	font-size:12px !important;
}
.fontsize14 {
	font-size:14px !important;
}
.fontsize16 {
	font-size:16px !important;
}
.fontsize18 {
	font-size:18px !important;
}
.fontsize20 {
	font-size:20px !important;
}
.fontsize24 {
	font-size:24px !important;
}
.fontsize36 {
	font-size:36px !important;
}

#pool_closed > *  {
	display:none;
}
#pool_closed:before {
	content: "The pool will be closed during the 2022 season for renovation.";
	font-size: 24px;
	font-weight: bold;
}	

a.button.recdesk {
	background: #9e0b0f;
	color:white;
	text-decoration: none;
	padding: 20px 20px;
	font-weight: bold;
	display:block;
	width: 300px;
	margin: auto;
	text-align:center;
}

div#online_forms {
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-column-gap: 1%;
}

div#online_forms a.view-all {
	width: 100%;
    margin: 2px;
}




@media screen and (max-width:1378px) {
	.breakout {
		padding: 0 20px;
	}
	blockquote, .blockquote, .bracketbox {
		margin-left: 10% !important;
		margin-right: 10% !important;
    }

}
@media screen and (max-width:1023px) {
	.breakout {
		width:30%;
	}
	.fancy-ul, .checklist {
		padding-left: 0px;
	}
}
@media screen and (max-width:834px) {
	p {
		word-wrap: break-word;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}
	.breakout {
		padding: 0 8px;
	}
	.left-float {
		margin: 10px;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 1%;
	}
	.right-float {
		margin: 10px;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 1%;	
	}
	.bracketbox {
		margin-left: 1% !important;
		margin-right: 1% !important;	 
	}
	.bracketbox:before,.bracketbox:after {
		width: 95px;
	}
}

@media screen and (max-width:479px) {
	.center-announcement {
		width: 100%
	}
	.breakout {
		width:50%;
	}
	.left-float {
		float:right;
		margin: 10px;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 1%;
	}
	blockquote, .blockquote, .bracketbox {
		margin-left: 1% !important;
		margin-right: 1% !important;
	}
	.post-it {
		transform: rotate(2deg);
    }
    .fancy-ul, .checklist {
		margin-left: 10px;
		margin-right: 10px;
	}
	.post-it {
		width:95%;
		min-height: unset;
	}
}
@media screen and (max-width:390px) {
	.post-it {
		width:95%;
		min-height: unset;
	}
}