/*
Theme Name: Kate26
Author: Darren Goodall
Author URI:
Version: 1.0
*/

/*-----------------------------------------------------------------------------------

	= Table of Contents



	1. = Fonts

	2. = Body, Typography and some main Elements

	4. = Header styling

	5. = Navigation styling

	6. = Footer styling

	7. = Sidebar styling

	8. = Home Page styling

	9. = Works Page styling

	10.= Schools Page styling

	11.= News Page and News Detail page styling

	12.= Diary Page styling

	13.= Library Page styling	

	14.= Network Page styling	

	15.= Contact Page styling	

	16.= Meal Page styling

	

	

/*-----------------------------------------------------------------------------------*/

/* 1. = Fonts

/*-----------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------*/

/* 1. = variables

/*-----------------------------------------------------------------------------------*/

:root {
    --green: #C0C2AC;
	--dark: #484848;
}

/*-----------------------------------------------------------------------------------*/

/* 2. = Body, Typography and some main Elements

/*-----------------------------------------------------------------------------------*/

html {font-size:62.5%;}
body {font-family: "new-atten", sans-serif;font-weight: 300;font-style: normal; font-size:1.8em; line-height:1.6; background-color:#fff; color:var(--dark);}

h1, h2, h3, h4, h5, h6 {font-family: "kepler-std-display", serif; font-weight: 400; font-style: normal; margin-top:0rem; margin-bottom: 3rem; font-weight: 200; position: relative;   }

h1 { font-size: 3.5rem; line-height: 4.5rem; font-weight:400; }
h2 { font-size: 2.8rem; line-height: 3.6rem;  }
h3 { font-size: 2.4rem; line-height: 3.1rem; }
h4 { font-size: 1.8rem; line-height: 2.35rem; }
h5 { font-size: 1.6rem; line-height: 1.5rem;   }
h6 { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 1rem; }

p { margin-top: 0; font-size:1.6rem; line-height: 1.3;}

a {font-family: "kepler-std-display", serif; font-weight: 400; display:inline-block; padding:0 3px; font-style: normal; border-bottom:solid 1px var(--dark); color:var(--dark); text-decoration:none; transition: all 0.3s ease-in-out; }

a:hover {background-color:var(--green); color:#fff; text-decoration:none; transition: all 0.3s ease-in-out; border-color:var(--green); }

blockquote {font-family: "kepler-std-display", serif; font-weight: 400; font-style: normal; padding: 1rem 1rem; border-left:solid 2px var(--dark); margin: 3rem auto; font-size:1.8rem; line-height: 2.4rem; color:var(--dark);}


/* Larger than phablet */
@media (min-width: 550px) {
	
}

/* Larger than tablet */
@media (min-width: 1000px) {

	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
	p { margin-top: 0; font-size:1.8rem }
	
	li {font-size:1.8rem; margin-bottom: 10px;}
	
	h1 { font-size: 4rem; line-height: 4.5rem;  }
	h2 { font-size: 4rem; line-height: 4.5rem;  }
	h3 { font-size: 3.2rem; line-height: 3.5rem; }
	h4 { font-size: 2.8rem; line-height: 2.8rem; }
	h5 { font-size: 2rem; line-height: 2.4rem;   }
	h6 { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 1rem; }
	
}

/* Larger than Desktop HD */
@media (min-width: 1400px) {
    

	
}


/*-----------------------------------------------------------------------------------*/

/* 2. = Styles

/*-----------------------------------------------------------------------------------*/

.wp-block-group {width:94%;}

.container {position: relative; max-width:1200px; width:94%; margin-left: auto; margin-right: auto; box-sizing: border-box; }

.wp-block-group.has-background {padding:3rem; margin: 3rem auto;}

.blocklink {position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999; border: none;}

.aligncenter {text-align:center;}

.shadow {box-shadow:0 3px 10px 0 rgba(0,0,0,0.15);}

.narrow {width:94%; margin-left: auto; margin-right: auto;}

.content-wrapper {padding:5%;}

.flex {display: flex; flex-flow: row wrap; align-items:stretch; justify-content:left; gap:2%;}

.alignfull {max-width:none; width:100%;}









/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    
    
	
}

/* Larger than tablet */
@media (min-width: 750px) {
    
    .has-text-align-right {text-align:right;}
    
    .has-text-align-left {text-align:left;}
	
	.wp-block-group.has-background {padding:6rem; margin: 6rem auto;}
	
    
}


/* Larger than desktop */
@media (min-width: 1000px) {
    
    .narrow {width:70%;}
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
	body .is-layout-constrained > .alignwide, .alignwide {max-width:1200px; margin: 0 auto;}
	
}

/* Larger than Desktop HD */
@media (min-width: 1400px) {
	
	.wp-block-group {width:100%;}

	.container {width:100%;}
	
	.narrow {width:70%;}
	
}

/*-----------------------------------------------------------------------------------*/

/* 3. = Header

/*-----------------------------------------------------------------------------------*/

#site-header {position:absolute; top:0; left:0; z-index:9; width:100%; padding: 1rem 0; display:flex; flex-flow:row; justify-content:space-between; align-items:flex-start; box-sizing:border-box;}

#site-header .brand {width:120px; height:auto; display:block; margin-left: 0rem;}

#site-header .brand a {border:none;}

#site-header .brand img {width:100%; height:auto; display:block;}

#site-header nav { display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; gap:2rem;}

#site-header nav ul { list-style:none; display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; gap:2rem; margin:0; padding:0;}

#site-header a { transition: all 0.3s ease-in-out;}

.hero { width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; position:relative; background-color: var(--green); }

.hero:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: #000000;
background: linear-gradient(180deg,rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.64) 100%); z-index:1;}

.hero .container {min-height:400px; height:auto; padding-top:225px;position:relative;z-index:2; display:flex; flex-flow:column wrap; justify-content:flex-end; align-items:flex-start; color:#fff;}

.hero-content {width:80%; margin-bottom: 3rem;}

.hero-content blockquote {color:#fff; border-color:#fff; position:relative; margin-left:4rem;} 

.hero-content blockquote::before {content:"";position:absolute; top:10px; left:-40px; width:30px; height:30px; background-image:url(assets/images/quotes.png); background-size:contain; background-repeat:no-repeat; display:block; margin-bottom: 1rem;}

.hero-content blockquote p {margin-bottom:0;}


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {

  #site-header .brand {width:180px;}

  .hero-content {width:40%; margin-bottom: 3rem;}

  .hero-content blockquote { margin-left:0rem;} 


}

/* Larger than desktop */
@media (min-width: 1000px) {
	
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
	
}

/* Larger than Desktop HD */
@media (min-width: 1500px) {
    
   
	
}

/*-----------------------------------------------------------------------------------*/

/* 4. = Footer

/*-----------------------------------------------------------------------------------*/





/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
    

}

/* Larger than desktop */
@media (min-width: 1000px) {
    

	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    
   
	
}


/*-----------------------------------------------------------------------------------*/

/* 4. = Blocks

/*-----------------------------------------------------------------------------------*/



.wp-block-group {margin:3rem auto; position:relative;}

.wp-block-group .wp-block-group {margin:0 auto;}

.wp-block-columns.reverse {flex-flow:column-reverse;}

.has-background {padding: 3rem;}

.wp-block-group.usps .wp-block-image img{width:30px; height:30px; margin-bottom:1rem; }

.wp-block-group.usps .wp-block-separator {display:none}

.wp-block-group.collapses {flex-flow:column wrap; gap:10px;}

.wp-block-separator {margin: 3rem 0; border:none; height:2px; background-color:var(--dark); width:80px;}

.wp-block-separator.has-background {padding:0;}




/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
	
	.wp-block-columns.reverse {flex-flow:row;}
	
	.wp-block-group {margin:6rem auto;}
	
	.has-background {padding: 6rem;}

  .wp-block-group.usps .wp-block-separator {display:block}


.wp-block-group.collapses {flex-flow:row; gap:auto;}
    
}

/* Larger than desktop */
@media (min-width: 1000px) {
	

	
	
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	


	
}




/*-----------------------------------------------------------------------------------*/

/* 4. = Navigation

/*-----------------------------------------------------------------------------------*/



/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
	

}

/* Larger than desktop */
@media (min-width: 1000px) {
	


}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
   
	
}



/*-----------------------------------------------------------------------------------*/

/* 4. = Forms

/*-----------------------------------------------------------------------------------*/

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  background-color:var(--purple);
  border: 2px solid var(--purple);
  height: 44px;
  padding: 0 25px;
  color: #fff;
  text-align: center;
  font-size:17px;
  font-weight: 500;
  line-height: 40px;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box; }

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
  color: var(--purple);
  border-color: var(--purple);
  background-color:rgba(110,68,102,0);
  outline: 0; 
}

/* Wordpress buttons */

.wp-block-buttons {margin-top:3rem;}

.wp-block-button .wp-block-button__link {display:inline-block; padding: 0 2rem; color:#fff; font-size:17px;  line-height:44px; letter-spacing: normal; font-weight:500; border:none; background-color:var(--purple); border-radius:5px;}

.wp-block-button.is-style-outline .wp-block-button__link {display:inline-block; padding: 0 2rem; color:var(--yellow) !important; font-size:17px;  line-height:44px; letter-spacing: normal; font-weight:500; border:1px solid var(--yellow); background-color:transparent; border-radius:5px;}

.wp-block-button.is-style-outline .wp-block-button__link:hover {background-color:var(--yellow); color:var(--purple) !important;}

.white-button .wp-block-button__link {background-color:#fff; color:var(--purple); border:none;}


.wpcf7 form.sent .wpcf7-response-output {background-color:var(--yellow); border-color:var(--yellow); color:var(--purple)}



/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

form.on-page-form {width:80%; margin: 0 auto;}

form.on-page-form p {flex:1 1 100%;}

input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select {
  position:relative;
  color:#222;
  font-size:1.6rem;
  font-weight:400;
  padding: 15px 20px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff !important;
  border:2px solid var(--yellow);
  width:100%;
  border-radius: 5px;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
  box-sizing: border-box; 
  margin: 0 0 20px 0;
}

select { padding: 11px 15px;}

textarea {border-radius:0;} 

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }/* Removes awkward default styles on some inputs for iOS */

textarea {
	min-height: 65px;
 padding-top: 6px;
  padding-bottom: 6px; }

input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {
  outline: 0; }

label,legend {
  display: block;
  margin-bottom: 1rem;
  font-weight: 400;
text-transform: uppercase;
font-size:1.6rem;}

fieldset {
  padding: 0;
  border-width: 0; }

input[type="checkbox"], input[type="radio"] {
  display: inline; }

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: 200; }


select{-webkit-appearance: none; -moz-appearence: none; }


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}

.feature-form {}


.swpm-login-widget-form {text-align: center;}


/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	
	
	
}

/* Larger than tablet */
@media (min-width: 750px) {
	
	form.on-page-form { width:100%;}

	form.on-page-form p {flex:1 1 30%;}
    input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select {font-size: 1.8rem;}
	

    
    
}

/* Larger than desktop */
@media (min-width: 1000px) {
	
	input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select {font-size: 2rem;}
    
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

}

/* Larger than Desktop HD */
@media (min-width: 1500px) {
    
 

	
}


/*-----------------------------------------------------------------------------------*/

/* 4. = Content Page

/*-----------------------------------------------------------------------------------*/




/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	
	
	
}

/* Larger than tablet */
@media (min-width: 750px) {
    
   

    
    
}

/* Larger than desktop */
@media (min-width: 1000px) {
	
	
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

}

/* Larger than Desktop HD */
@media (min-width: 1500px) {

	
}





/*-----------------------------------------------------------------------------------*/

/* 4. = Home Page

/*-----------------------------------------------------------------------------------*/





/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

}

/* Larger than tablet */
@media (min-width: 750px) {
    
    .frontpage-hero {height:90vh;}
	
}

/* Larger than desktop */
@media (min-width: 1000px) {
    

	

	
}

/* Larger than Desktop HD */
@media (min-width: 1400px) {
	

	
}