.body                                           { height:auto; flex-grow:1; }
.section                                        { padding:100px 40px 40px 40px; display:flex; flex-direction:column; gap:24px; background-color:var(--color-brand50); position:relative; z-index:10; }
.section:after                            		{ position:absolute; content:''; display:block; width:100%; border-style:solid; border-width:0 0 60px 100vw; border-color:transparent var(--color-snow); left:0; top:0; z-index:20; }

.section--snow 									{ background-color:var(--color-snow); }
.section--snow:after                            { border-color:transparent var(--color-brand50); }

.section--christmas 							{ background-color:var(--color-christmas); background-image:url('../img/snow-flakes.png'); background-size:cover; background-position:center; background-repeat:no-repeat; }
.section--christmas:after                       { border-color:transparent var(--color-brand50); }
.section--christmas+.section--snow:after 		{ border-color:transparent var(--color-christmas); }

.section+.section--brand:after                  { border-color:transparent var(--color-brand50); }
.section--snow+.section--brand:after            { border-color:transparent var(--color-snow); }
.section--brand 								{ background-color:var(--color-brand); color:var(--color-snow); background-image:url('../img/bg-01.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
.section--brand h2 								{ color:var(--color-snow); }
.section--brand h2 small 						{ color:var(--color-brand100); }
.section--brand strong 							{ color:var(--color-brand100); }

.section--brand+.section--snow 					{ padding:0 40px 40px 40px; }
.section--brand+.section--snow:after            { border-width:200px 100vw 0 0; border-color:transparent var(--color-snow); left:0; top:-200px; z-index:20; }

.bg--dancevision 								{ padding:30px; background-color:#000071; background-image:url('../img/bg-dancevision.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; }

.margin--top 									{ margin-top:60px; }

.img--principal 								{ width:100px; }
.img--teachers 									{ width:100px; }
.img--small                                     { max-width:150px; height:auto; }

.dl-qanda dt                                    { margin:0 0 0 25px; padding:0 0 10px 15px; border-left:1px solid #BBB; position:relative; top:0; left:0; }
.dl-qanda dt:before                             { content:'Q'; color:#BBB; position:absolute; top:0; left:-25px; }

.dl-qanda dd                                    { margin:0 0 50px 25px; padding:0 0 0 15px; border-left:1px solid #BBB; position:relative; top:0; left:0; }
.dl-qanda dd:before                             { content:'A'; color:#BBB; position:absolute; top:0; left:-25px; }

.card 											{ padding:30px; background-color:var(--color-brand300); background-image:url('../img/bg-01.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;  color:var(--color-snow); display:flex; flex-direction:column; gap:20px; border-radius:30px; }
.card h4,
.card h5 										{ color:var(--color-snow); }

.footer 										{ padding:30px 0 0; font-size:1.2rem; background-color:var(--color-brand800); color:var(--color-brand200); flex-direction:column; gap:40px; position:relative; display:none; }
.footer:after                            		{ position:absolute; content:''; display:block; width:100%; border-style:solid; border-width:60px 0 0 100vw; border-color:transparent var(--color-brand800); left:0; top:-60px; z-index:20; }

.footer .btn--none 								{ color:var(--color-brand200); width: 100%; text-align: left; }
.footer .btn--none:hover 						{ color:var(--color-snow); }

.flex--inline 									{ display:flex; gap:40px; width:100%; }

.social 										{ padding:20px 0; background-color:var(--color-brand900); }

.img-logo-idta									{ margin:-10px 0 10px 0; max-height:20px; }
.img-logo-epsom-ewell							{ margin:0 20px 10px 0; max-height:30px; }

.input.input--checkbox 							{ display:grid; grid-template-columns:repeat( auto-fit, minmax(200px, 1fr) ); }
.formform 										{ position:absolute; top:-999px; left::-999px; }

/***** Dialog *****/
.dialog                                         { margin:0; padding:20px; width:100%; max-height:100vh; background:transparent; border:none; position:fixed; left:50%; right:auto; top:50%; transform:translate(-50%, -50%); z-index:100; }
.dialog:before                                  { content:''; position:absolute; background-color:rgba(80,17,103,.9); width:calc(100vw * 3); height:calc(100vh * 3); top:0; left:0; transform:translate(-50%, -50%); z-index:-1; }
.dialog h4 										{ font-size:2rem; line-height:2.2rem; }
.btn--dialog                                    { padding:0; min-width:16px; min-height:16px; background-color:transparent; color:var(--color-gray500); border:none; position:absolute; top:25px; right:28px; left:auto; z-index:10; cursor:pointer; }
.btn--dialog:hover                              { background-color:transparent; color:var(--color-black); }
.dialog__body                                   { padding:30px; background-color:var(--color-snow); display:flex; gap:20px; flex-direction:column; max-height:calc(100vh - 40px); overflow-y:auto; border-radius:var(--radius); }

/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width:1200px) 						{
	.wrapper                                    { padding:0 0 0 240px; transition:all 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
	
	.section                                    { padding:300px 40px 100px 40px; }
	.section:after                            	{ border-width:0 0 200px 100vw; }
	.section--snow:after                        { border-color:transparent var(--color-brand50); }
	.section+.section--brand:after              { border-color:transparent var(--color-brand50); }
	.section--snow+.section--brand:after        { border-color:transparent var(--color-snow); }

	.section--brand 							{ padding-bottom:300px; }

	.section--christmas 						{ padding-bottom:400px; }
	.section--christmas+.section--snow 			{ padding-top:200px; }
	.section--christmas+.section--snow:after 	{ border-color: white transparent; top:-200px; }

	.img--principal 							{ width:300px; }
	.img--teachers 								{ width:180px; }

	.footer 									{ display:flex; }

	.dialog                                     { padding:0; min-width:300px; max-width:600px; }
}