/*
Theme Name: Trinity26
Author: We Are Factory
Author URI: https://www.wearefactory.net/
Version: 2.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 {
    --red: #700E0F;
    --l-red: #DD1515;
	--red-grad-right: linear-gradient(to right, var(--red), var(--l-red)); /* define gradient variable */
	--red-grad-down: linear-gradient(to bottom, var(--red), var(--l-red)); /* define gradient variable */
	--blue: #107896;
	--violet: #5E347D;
	--blue-grad: linear-gradient(to right, var(--violet), var(--blue)); /* define gradient variable */
	--dark: #252525;
}


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

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

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

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

h1, h2, h3, h4, h5, h6 { margin-top:0rem; margin-bottom: 3rem; font-weight: 200; position: relative;line-height: 1.1;}

h1 { font-size: 3.5rem;  }
h2 { font-size: 2.8rem;   }
h3 { font-size: 2.4rem;  }
h4 { font-size: 1.8rem;}
h5 { font-size: 1.6rem;   }
h6 { font-size: 1.6rem;  }

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {color: var(--l-red)}



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

ul {list-style:"+  "; margin-bottom: 3rem;}

li {font-size:1.6rem; margin-bottom: 10px;}

/* 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: 5rem;  }
	h2 { font-size: 3.5rem;   }
	h3 { font-size: 2.5rem;  }
	h4 { font-size: 2rem;  }
	h5 { font-size: 1.8rem;    }
	h6 { font-size: 1.6rem; }
	
}

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

	
}


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

/* 2. = Styles

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

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

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

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

main {margin-top:0px}

a { transition:0.3s all; text-decoration: none; color:var(--l-red); font-weight: 400; border-bottom:solid 1px transparent;}

a:hover {border-color:var(--purple);}

hr {width:156px; border-top:4px solid var(--purple); margin: 3.5rem 0;}

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

.contain-link {display:block;}

.blocklink:hover {border:0;}

.blockimage {background-size:cover; background-position: center; position:absolute; top:0; left:0; width:100%; height:100%; z-index: 999;}

.space {margin:11%;}

.aligncenter {text-align:center;}

.no-margin {margin:0;}

.title-alt {font-size:40px !important;}

.feature-button figure {float: none !important; display:block!important; text-align: center;}

.link {color:var(--gold); border-bottom:3px solid var(--gold);}

.rounded {border-radius:15px; overflow: hidden;}

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

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

.watermark {position:relative;}

.watermark::before {content:""; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:url("assets/images/interface/jm-watermark.png"); background-position: -70%; background-size:contain; background-repeat: no-repeat;}

.txt-large {font-size::;rem; line-height: 1;}

.purple {color:var(--purple)}

.gold {color:var(--yellow)}

.content-wrapper {padding:5%;}

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

.flex-title-break {flex:0 0 100%;}

.padding-wrapper {padding:2%;}

.align-middle {align-self:center;}

.align-right {text-align:right;}

.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) {
    
    .feature-button figure {display:inherit; text-align:inherit;}
    
    .title-alt {font-size:110px !important;}
	
    main {margin-top:162px;}
    
    
    .has-text-align-right {text-align:right;}
    
    .has-text-align-left {text-align:left;}
	
	.wp-block-group.has-background, .group.has-background  {padding:6rem; margin: 6rem auto;}
	
	.txt-large {font-size:6rem; line-height: 1;}
    
}


/* 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:1400px; margin: 0 auto;}
	
	

	
}

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

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

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

/* 3. = Header

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


#site-header {position: fixed; padding:0; top:0; width: 100%; background-color:#fff;  color:#5a5a5a; z-index: 99999; transition:0.5s all;  }

#site-header.scroll-down {top:-101px;}

#site-header.scroll-up {top:0px;}

#site-header a:hover {border-color:transparent;}



#site-header .top-header {height:100px; width:100%; display:flex; justify-content: space-between; align-items: center; align-content: center; flex-flow:row wrap; border-bottom: 1px solid var(--grey); }

#site-header .brand {margin-left:2rem;}

#site-header .brand img {width:80%;}







/* 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) {
	
	
}

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

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

/* 4. = Footer

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

footer {background:var(--red-grad-down); color:#fff;}



/* 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) {
    
	footer {padding:6rem 0;}

	
}

/* 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;}

.no-gap {gap:0;}

.wp-block-column.has-background .wp-block-group {margin: 5rem auto;}

.wp-block-cover, .wp-block-cover-image {height:100%; padding: 0;}

.wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {width:100%;}

.wp-block-image {width:100%;}

.wp-block-image figure, .wp-block-image .alignright, .wp-block-image .alignleft {margin:3vh 10%;}


blockquote.wp-block-quote {border:none; padding: 0 0 0px 0; margin: 0 0 10rem 0;}

blockquote, blockquote p {position:relative; font-size: 2rem; border:none;  margin: 2rem auto; text-align: center; }

blockquote p:last-child, blockquote.wp-block-quote p:last-child {margin:0; padding: 0;}

blockquote.wp-block-quote::after {content:""; display:block; width:231px; height:56px; position:absolute; bottom:-80px; left:50%; transform: translateX(-50%); background-image: url("assets/images/interface/post-quote.png"); background-size:contain; background-position: center;}

.wp-block-separator {border-bottom:none; border-right:1px solid var(--gold); height:70px; width: 0px !important;}


/* Custom block classes */

.breadcrumbs {text-transform: uppercase; font-size: 1.4rem; font-weight:200;}

.breadcrumbs a {color:var(--purple); }


/* 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-image figure, .wp-block-image .alignright { text-align: right;}
	
	.wp-block-image figure, .wp-block-image .alignleft { text-align: left;}
	
	.wp-block-group.testimonial-block {padding:10rem 0;  background-size:60%; background-position:-30%;}
	
}

/* Larger than desktop */
@media (min-width: 1000px) {
	
	.work-tile {flex:0 0 32%;}
	
	.wp-block-columns.logos-footer {flex-flow:row nowrap !important; gap:2%;}

	.wp-block-columns.logos-footer .wp-block-column {flex:1 1 auto !important; margin-bottom: 20px; }
	
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
	blockquote, blockquote p {font-size:3rem;}
	
	.wp-block-group.testimonial-block {padding:10vh 0;}
	
	.wp-block-embed {margin: 6rem 0;}
	
}




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

/* 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) {
    

	
}

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


	
}

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

	
}

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

/* 4. = News

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



		/* 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) {



}