/*
Theme Name: oak-trust
Theme URI: http://twistedesign.co.uk
Description: Twisted Design
Version: 0.0.1
Author: Straw Jonny
Author URI: https://strawjonny.com
Template: oak
*/

.prev, .next {
	background-color: #7f1714;
	color: white;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 50px;
	width: 50px;
}

.prev a, .next a {
	text-align: center;
}

.prev i, .next i {
	color: white;
	margin-top: -2px;
}

.next i {
	margin-left: 5px;
}

.prev i {
	margin-right: 5px;
}

.toolbar i {
	color: #4A8495;
}

.topbar a {
	color: #4A8495 ;
}

.topbar a:hover {
	color: #4A8495 ;
}

.navicon a {
	color: white ;
}

body.open {
	background-color: #4A8495;
}
/*
header {
	background: rgb(235, 37, 143);
	background: linear-gradient(180deg, rgba(235, 37, 143,1) 0%, rgba(235, 37, 143,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
*/
h3 {
	color: #4A8495;
}

.current_page_item a {
	color: #26235d;
}

.blog-post-header {
	background: white;
	background: linear-gradient(180deg, rgba(235, 37, 143,1) 0%, rgba(235, 37, 143,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}

.key-profile.one .key-name, .key-profile.one .key-position {
	margin-left: 50% !important;
}

.key-profile.two .key-name, .key-profile.two .key-position {
	margin-left: 57% !important;
}

.key-profile.three .key-name, .key-profile.three .key-position {
	margin-left: 53% !important;
}

.testimonial_rotator_star {
	color: #7f1714 ;
}

.homepage-services, .other-services {

	color: white;
	background: rgb(235, 37, 143);
	background: linear-gradient(180deg, rgba(235, 37, 143,1) 0%, rgba(235, 37, 143,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}

@media only screen and (max-width:1024px) {
	.homepage-services, .other-services {
		background: linear-gradient(180deg, rgba(235, 37, 143,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	}

	.navigation-buttons {
		display: none;
	}
}

.other-services {
	margin-top: -50px;
	padding-top: 50px;
}

/*
.homepage-heart {
background-position: top right;
background-image: url("/wp-content/themes/logic-child-insurance/img/services-bg.png");
background-repeat: no-repeat;
}
*/





.main-header {
	color: #7f1714 ;
}

.block-gradient {
	color: white;
	background: rgb(23,20,50);
	background: linear-gradient(180deg, rgba(23,20,50,1) 0%, rgba(40,35,91,1) 100%);
}

.block-gradient h3 {
	color: #7f1714;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #7f1714 ;
}
::-moz-placeholder { /* Firefox 19+ */
	color: #7f1714 ;
}
:-moz-placeholder { /* Firefox 18- */
	color: #7f1714 ;
}

.contactform input, .contactform textarea {
	color: #7f1714 ;
}

.contactform input[type="submit"] {
	background-color: #4a8495 ;
	color: white;
	transition: color 0.5s, background-color 0.5s;
}

.contactform input[type="submit"]:hover {
	color: #4A8495 ;
	background-color: #EEEDEE;
}

article a {
	color: #4A8495 ;
}

article a:hover {
	color: #26235d ;
}

.blog-featured-text h3 {
	font-size: 2rem;
}

#tidio-chat-iframe {
	inset: auto 9px 75px auto !important;
}

.navigation-buttons a {
	background-color: #7f1714 ;
	color: white;
	transition: color 1s ease, background-color 1s ease;
	padding: 10px 20px;
}

.navigation-buttons a:hover {
	color: #7f1714 ;
	background-color: white;
}

.sj_navigation i {
	margin-top: 10px;
}

hr {
	color: #ededed;
	background-color: #ededed;
	border-color: #ededed;
}

.policy-box {
	background-color: #7f1714 ;
	background-image:url("./img/download.png")
}

.policy-box:hover {
	background-color: #7f1714;
	background-image:url("./img/download-hover.png")
}

.home .policy-box {
	border-color: #ededed;
}

.policy-box .top {

}

.policy-box img {

}

.policy-box:hover img {

}

.policy-box .bottom {
	display: flex;
	flex-direction: column;
}

.postbox .left {
	color: #7f1714 ;
}

.postbox .date, .post-page .postbox .date {
	color: #7f1714;
}

.postbox .more-button {
	color: white;
}

.post-page .date {
	color: #26235d;
	font-weight: 800;
}

.twistedu_statbox_2 {
	font-weight: 800;
}

.twistedu_statbox_2 b {
	font-weight: 400;
}

article table {

}

article tbody tr:nth-child(even) {
	background-color: #e9e9e9;
}

input[type="submit"]:hover {
	background-color: #ededed;
}

.wpcf7-not-valid-tip {
	color: #7f1714;
}

.blog-featured-date {
	color: #7f1714;
}
.sow-accordion-panel-header, .sow-accordion-panel-content {
	border-bottom: 1px solid #444;
}
#cn-notice-text a {
	color:  #7f1714;
}

._3d-flip-book iframe .hbtn {
	background-color: #7f1714;
	border-radius: 50%;
	padding: 0 14px 0 18px;
	color: white;
}

.home-loop-post-overlay {
	/* background-color: #4A849560; */
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255, 255,0) 60%, rgba(74, 132, 149,0) 60%, rgba(74, 132, 149,0.8) 100%);
}

.cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cta-top h2:nth-child(1) {
	color: #c31728;
}

.cta-top h2:nth-child(2) {
	color: #7f1714;
}

.cta-bottom {
	background-color: #6f6e70;
	color: white;
}

.cta h2, .cta h3 {
	margin: 0;
	line-height: 10rem;
}

.cta {
	padding-left: 5%;
	padding-right: 5%;
}

.cta-top {
	padding-bottom: 50px;
}

.cta-bottom {
	padding-top: 50px;
	padding-bottom: 50px;
}

.cta-bottom h2, .cta-bottom h3 {
	color: white;
}

.cta-image {
	max-width: 25%;
}

.twisted-socials i {
	background-color: white;
	transition: color 0.5s ease;
}

.twisted-socials i {
	color: #4A8495;
}

.twisted-socials a:hover i {
	color: #26235d;
}

.homepage-slide h2:nth-child(1) {
	color: #7f1714;
	margin: 0;
	line-height: 10rem;
}

.homepage-slide h2:nth-child(2) {
	color: #c31728;
	margin: 0;
	line-height: 10rem;
}

.slick-dots .slick-active::marker {
	color: #c31728;
}


thead {
	background-color: #c31728;
	color: white;
	border-color: white;
}

.sow-accordion-title {
	font-size: 2rem;
	font-weight: 700;
}

.sow-accordion-open-button .sow-icon-ionicons::before {
	color: white;
}

.sow-accordion-close-button .sow-icon-ionicons::before {
	color: white;
}

.sow-accordion-panel-header:hover .sow-accordion-open-button .sow-icon-ionicons::before {
	color: white;
}

.sow-accordion-panel-header:hover .sow-accordion-close-button .sow-icon-ionicons::before {
	color: white;
}

.linkbox {
	background-color: #4A8495;
	transition: background-color 1s ease;
}

.linkbox:hover {
	background-color: #26235d;
	color: white;
}

.newspage-grid .more-button, .postbox .more-button {
	background-color: #4A8495;
}

.newspage-grid .more-button:hover, .postbox .more-button:hover {
	background-color: #26235d;
}

.news-box-bottom h4 {
	color: #4A8495;
}

.post-more h4 {
	color: #4A8495;
}

.preview-more {
	font-weight: 800;
}

.preview-more:hover {
	color: #26235d;
}

.floating-trustlogo {
  background-color: #4A8495 !important;
}

.footer {
	background-color: #4A8495;
}

.colour-table {
  color: white;
}

.colour-table  tbody tr {
  color: white !important;
  background-color: transparent !important;
}

.colour-table th {
  background-color: white !important;
  color: #7f1714 !important;
}

.search-dropdown {
   background-color: #4A8495;
}

.safeguarding-link {
  display: none;
  position: absolute;
  bottom: 50px;
  right: 0;
  background-color: #7f1714;
  color: white;
  font-weight: 800;
  transition: background 1s ease;
}

.home .safeguarding-link {
 display: block !important; 
}

.safeguarding-text-container {
  width: 0;
  transition: width 1s ease;
  height: 100%;
}

.safeguarding-link:hover .safeguarding-text-container {
  width: 150px;
  margin-right: 10px;
}

.safeguarding-link p {
  text-wrap: nowrap;
  margin: 0;
  overflow: hidden;
}

.safeguarding-link a {
  display: flex;
  align-items: center;
  position: relative;
}

.safeguarding-link a {
  color: #7f1714;
  transition: color 1s ease;
}

.safeguarding-link:hover a:hover, .safeguarding-link:hover a {
  color: white;
}

.safeguarding-link img {
  max-width: 70px;
  position: relative;
  right: 30px;
}
@media only screen and (max-width:1024px) {
.safeguarding-link .safeguarding-text-container {
  width: auto;
  margin-right: 10px;
  margin-left: -15px;
}
  
  .safeguarding-link a {
  color: white;
}
  
  .safeguarding-link {
    bottom: 30px;
    font-size: 1.25rem;
  }
  
  .safeguarding-link img {
    max-width: 50px;
    right: 25px;
  }
  
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
@keyframes no-show {
	0% {
		transform: rotateY(0deg);
    height: 100%;
    width: 100%;
	}

	49% {
		height: 100%;
		width: 100%;
	}

	50% {
		height: 0;
		width: 0;
	}

	100% {
		transform: rotateY(180deg);
		height: 0;
		width: 0;
	}
}

@keyframes show {
	0% {
		transform: rotateY(-180deg);
		height: 0;
		width: 0;
	}

	49% {
		height: 0;
		width: 0;
	}

	50% {
		height: 100%;
		width: 100%;
	}

	100% {
		transform: rotateY(0deg);
		height: 100%;
		width: 100%;
	}
}

@keyframes no-show {
  0% {
    transform: rotateY(0deg);
    height: 100%;
    width: 100%;
  }
  49% {
    height: 100%;
    width: 100%;
  }
  50% {
    height: 0;
    width: 0;
  }
  100% {
    transform: rotateY(180deg);
    height: 0;
    width: 0;
  }
}
@keyframes show {
  0% {
    transform: rotateY(-180deg);
    height: 0;
    width: 0;
  }
  49% {
    height: 0;
    width: 0;
  }
  50% {
    height: 100%;
    width: 100%;
  }
  100% {
    transform: rotateY(0deg);
    height: 100%;
    width: 100%;
  }
}
.flip-container {
  height: 500px;
}

.flip-container, .front, .back {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.flipper {
  position: relative;
  height: 400px;
}

.front, .back {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  perspective-origin: top center;
  animation-duration: 1s;
  animation-timing-function: linear;
  transition-property: transform;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  overflow: hidden;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
  animation-name: show;
  
}

.flipper .back .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.flipper.active .front {
  animation-name: no-show;
}
.front .inner {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.front .inner img {
  width: 60%;
}
.staff-benefit img {
  padding: 0 !important;
  width: 100%;
}

.back {
  transform: rotateY(-180deg);
  animation-name: no-show;
  flex-direction: column;
  display: flex;
  justify-content: space-around;
}
.flipper.active .back {
  animation-name: show;
}
.back .inner {
  padding: 20px;
}

.flipper a {
  color: white !important;
}

.oaklp-background {
  background-color: #4A8495;
  color: white;
}

.ashgrove-background {
  background-color: #342777;
  color: white;
}

.bchs-background {
  background-color: #31b188;
  color: white;
}

.crosshill-background {
  background-color: #7b2582;
  color: white;
}

.elms-background {
  background-color: #A4C047;
  color: white;
}

.hazel-background {
  background-color: #C31728;
  color: white;
}

.philips-background {
  background-color: #7f1714;
  color: white;
}

.unsworth-background {
  background-color: #5BC5F2;
  color: white;
}

.oaklp-colour, .oaklp-background a {
  color: #4A8495;
}

.ashgrove-colour, .ashgrove-background a {
  color: #342777;
}

.bchs-colour, .bchs-background a {
  color: #31b188;
}

.crosshill-colour, .crosshill-background a {
  color: #7b2582;
}

.elms-colour, .elms-background a {
  color: #A4C047;
}

.hazel-colour, .hazel-background a {
  color: #C31728;
}

.philips-colour, .philips-background a {
  color: #7f1714;
}

.unsworth-colour, .unsworth-background a {
  color: #5BC5F2;
}



.staff-benefit .front .inner {

}

.staff-benefit .front h4 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 100;
  margin-bottom: 0;
  background-color: #4A8495;
  color: white;
}

.vacancies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.vacancies-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.vacancies-top {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.vacancies-top img {
  margin-left: 30px;
  margin-right: 30px;
  max-width: 50%;
}

.vacancies-bottom {
  padding-left: 30px;
  padding-right: 30px;
  padding-down: 30px;
}

.vacancies-box h3 {
  color: white;
  text-align: center;
}

.vacancies-table {
 width: 100%;
}

.vacancies-table td {
  border-width: 0px;
  padding: 5px;
}

.vacancies-table td:nth-child(even) {
  text-align: center;
}

.vacancies-table tr:nth-child(even) {
	background-color: transparent !important;
}

.vacancies-box .btn {
  margin-top: 30px;
  width: 100%;
  background-color: white;
  padding: 10px 30px;
  text-align: center;
  margin-bottom: 30px;
}

.vacancies-filter {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 2rem;
  margin-bottom: 30px;
}

.vacancies-filter label {
  margin-right: 30px;
  margin-left: 10px;
}

.vacancies-filter input, .vacancies-filter label {
  cursor: pointer;
}

input[type='radio'] {
  box-sizing: border-box;
  appearance: none;
  background: white;
  outline: 2px solid #333;
  border: 3px solid white;
  width: 16px;
  height: 16px;
}

input[type='radio']:checked {
  background: #333;
}

.sub-menu .sub-menu a {
  color: #6F6E70;
}

.sub-menu .sub-menu a:before {
  content: "- ";
}

.footer-image-container img {
  height: 30px;
}

.home-loop-post h3 {
  color: white;
  margin: 0;
  font-size: 3rem;
}

.staff-benefit .flipper .front {
  background-color: #26235d;
  color: white;
}

.staff-benefit .flipper .front h4 {
  background-color: #26235d;
  color: white;
}

.staff-benefit .flipper .back {
  background-color: #26235d;
  color: white;
}