/*
Theme Name: Scriptoria PMC
Theme URI: http://www.scriptoria.co.uk
Description: A premium theme by Chris Thomas
Version: 1.0
Author: Chris Thomas
Author URI: http://www.scriptoria.co.uk
*/

body {
	padding: 0px;
	margin: 0px;
	font-family: Calibri, sans-serif;
	width: 100%;
	font-size: 1.2vw;
	line-height: 1.2;
	color: #333;
	overflow-x: hidden;
}
@media only screen and (max-width : 8000px) {body {font-size: 1.1vw;}}

@media only screen and (max-width : 1536px) {body {font-size: 1.2vw;}}

@media only screen and (max-width : 480px) {body {font-size: 4vw;}}


.lazy-load-pmc {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.lazy-load-pmc.loaded {
    opacity: 1;
}

.delay1 {transition-delay: 0.5s;}
.delay2 {transition-delay: 1s;}
.delay3 {transition-delay: 1.5s;}
.delay4 {transition-delay: 2s;}
.delay5 {transition-delay: 2.5s;}
.delay6 {transition-delay: 3s;}

@media (max-width: 480px) {
.delay1, .delay2, .delay3, .delay4, .delay5, .delay6 {transition-delay: 0s;}
}

a {text-decoration: none}

*,
*::before,
*::after {
  box-sizing: border-box; /* Applies to all elements and pseudo-elements */
}

* {transition: all 0.3s ease; /* Smooth transitions for all styles */}

img {max-width: 100%; height: auto}

.img-70 {width: 70%; margin-right: auto}

#main {width: 100%; position:relative}
#topbar {
    background-color: #0a1c25;
    color: #FFF;
    width: 100%;
    font-size: 100%;
    padding-top: 0.39%;
    padding-bottom: 0.39%;
    padding-left: 4%;
    padding-right: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    line-height: 1.2;
}

@media (max-width: 480px) {
#topbar {
	padding-top: 40px;
	padding-bottom: 0px;
}}

#topbar a {color: #fff}
#topbar a:hover, #footersm a:hover {color: #ed691f;}

.emailphone {width: 46%; text-align: left;}
.header-sm a, #footersm a {margin-left:10px}

@media (max-width: 480px) {
.emailphone {display: none}
.header-sm a:first-of-type, #footersm a:first-of-type {margin-left: 0 !important} 
.header-sm a:first-of-type {margin-left: 0 !important}
.header-sm {
	position: absolute;
	top: 12px;
	float: none;
	left: 3.9%;
	text-align: left;
}
#rmp_menu_trigger-6971 {display: block; margin-top: 0 !important}
.rmp-container.rmp-container.rmp-slide-left {margin: 0 !important}
  #rmp-menu-wrap-6971 .rmp-menu-item-link {font-size: 150% !important;}
}

#logo-holder {display: flex; flex-direction: row; align-items: center; padding-left: 4%;
  padding-right: 4%;}
    
#logo {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-right: 4%;
}

#logo img {width: 24vw;}

@media (max-width: 480px) {
#logo img {width: 76%;}
}

.services {
	margin-left: auto;
	align-items: center;
	display: flex;
}

.services a{background-color: #434e5e; color: #fff; border-radius: 1rem; padding: 1rem; white-space: nowrap}

@media (max-width: 1200px) {
.services a{padding: 0.5rem 1rem;}
}

.services a:hover {background-color: #ed691f;}

@media (max-width: 480px) {
.services {display:none}
}

.msp-logo {
  width: 4vw;
  margin-left: 1rem;
}

.wp-theme-scr-pmc .login {display: none}

#menu-main-menu {
    list-style: none;
    padding: 0;
    margin: 0; 
    display: flex;
}

#menu-main-menu li {
    margin-top: 0;
    margin-right: 2em;
    margin-left: 0;
    margin-bottom: 0;
    font-weight: 400
}



#menu-main-menu a {color: #000; }

#menu-main-menu a:hover, .current-menu-item a {color: #ed691f !important;}

.sub-bar {
    background-color: #434e5e; 
    color: #FFF;
    width: 100%;
    font-size: 100%;
    padding-top: 0.39%;
    padding-bottom: 0.39%;
    padding-left: 4%;
    padding-right: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; height: calc(1em + 0.8em);
}

/**/


.custom-banner {
  width: 100%;
  height: 15vw; /* 15% of the viewport width for height */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex; align-items: center
}

@media (max-width: 480px) {
.custom-banner {height: auto;}
}

.custom-banner.center-center {background-position: center center;}

.custom-banner.bottom-center {background-position: bottom center;}

.custom-banner.top-center {background-position: top center;}

.text-box {
	width: 38vw;
	padding-left: 10vw;
	padding-right: 2vw;
	padding-top: 2vw;
	padding-bottom: 2vw;
	background-color: rgba(67, 78, 94, 0.5);
	color: #FFF;
	text-align: left;
	font-size: 120%;
}


@media (max-width: 480px) {
.text-box {
	width: 100vw;
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 10vw;
	padding-bottom: 10vw;
	background-color: rgba(67, 78, 94, 0.5);
	color: #FFF;
	text-align: left;
	font-size: 120%;}
}

.text-box h1,
.text-box p {
  margin: 0; /* Reset default margins */
  padding: 0; /* Reset default padding */
}

.content{
	width: 80%;
	margin-left: auto;
	margin-right: auto; color: #333f50; margin-top: 2em; margin-bottom: 4em;
}

@media only screen and (max-width : 480px) {
.content{width: 90%;}
}


.content h2 {font-size: 220%;
  letter-spacing: 0.023em;
  font-weight: 500; margin-bottom: 0.9em; margin-top: 0;
}

.content ul {margin-bottom: 2em}

.content p {}

.content p em {font-weight: 500}

.wp-block-buttons {margin-bottom: 2em}

.wp-block-button .wp-block-button__link {background-color: #ed691f; color: #fff; border-radius: 1rem; padding: 1rem; white-space: nowrap; font-size: 125%; font-weight: 500;}

.wp-block-button .wp-block-button__link:hover {background-color: #434e5e}


.tick-ul {list-style: none; padding-left: 0; font-size: 125%; margin-top: 0}


.tick-ul li {
    position: relative;
    padding-left: 2em; 
    line-height: 1.5; margin-bottom: 0.25em;
}

.tick-ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23434e5e" viewBox="0 0 16 16"><path d="M13.485 1.929a1 1 0 0 1 1.414 1.414l-8.486 8.486-4.243-4.243a1 1 0 0 1 1.414-1.414l2.829 2.829 7.072-7.072z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Force the <ul> itself to fade in slowly using delay4 */
.wp-block-list.tick-ul.lazy-load-pmc {
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in; /* Smooth fade-in for <ul> */
}

.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded {
    opacity: 1; /* Fully visible */
}

/* Initial state for <li> elements */
.wp-block-list.tick-ul.lazy-load-pmc li {
    opacity: 0; /* Hidden */
    transform: translateY(5px); /* Slight offset */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in; /* Smooth animation */
}

/* Fade-in animation for <li> elements AFTER the <ul> fades in */
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays using nth-child */
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(1) {transition-delay: 2.6s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(2) {transition-delay: 2.7s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(3) {transition-delay: 2.8s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(4) {transition-delay: 2.9s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(5) {transition-delay: 3s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(6) {transition-delay: 3.1s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(7) {transition-delay: 3.2s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(8) {transition-delay: 3.3s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(9) {transition-delay: 3.4s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(10) {transition-delay: 3.5s;}

@media (max-width: 480px) {
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(1) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(2) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(3) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(4) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(5) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(6) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(7) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(8) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(9) {transition-delay: 0s;}
.wp-block-list.tick-ul.lazy-load-pmc.delay4.loaded li:nth-child(10) {transition-delay: 0s;}
}

.wp-block-columns {gap: 8vw}


/**/

#footer {background-color: #e6e6e6; padding-top: 1em; padding-bottom: 1em; padding-left: 4%; padding-right: 4%;}

#footer, #footer a {color: #4d4d4d;}

.footer-row {display: flex; flex-direction: row; align-items: center;}

.footer-row:last-of-type {align-items: baseline; margin-top: 1em; font-size: 75%;}
.footer-copyright a:hover {text-decoration: underline}

#footer-logo {width: 15vw;}

.footer-cyber-essentials {margin-left: 20px;}
.footer-cyber-essentials img {max-width: 50px}

#footersm {display: flex;
  flex-direction: row;
  align-items: center; margin-left: auto;}



@media only screen and (max-width : 480px) {
.footer-cyber-essentials img {max-width: 40px}
.footer-row {margin-top: 1em; font-size: 75%; flex-direction: column; margin-bottom: 1em;}
#footer-logo {width: 100vw; max-width: 300px}
#footersm {
	display: flex;
	flex-direction: revert;
	align-items: center;
	margin-left: 0;
	width: 100%;
	justify-content: center;
	margin-top: 20px; font-size: 150%;
}
.footer-copyright {position: relative; left: auto;}

.footer-row:last-of-type {align-items: center; margin-top: 20px; font-size: 100%;}
}


/**/

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  column-gap: 4em; /* Horizontal spacing between columns */
/*  row-gap: 4em;*/
padding-right: 8em; padding-left: 8em; font-family: Calibri, sans-serif;
}


@media (max-width: 480px) { 
.contact-form {
grid-template-columns: 1fr; 
padding-right: 0; 
padding-left: 0;
column-gap: 0;}
}


.contact-form .form-row {
  grid-column: span 2; /* Full-width rows default to spanning both columns */
}

.contact-form .wpcf7-form-control-wrap {
  width: 100%; /* Ensure wrapper expands fully */
  display: block; /* Ensure block-level behavior */
  margin-top: 0.5em;
}

.contact-form .wpcf7-form-control-wrap select {
  width: 100%; /* Dropdown spans the full width */
  display: block; /* Force block-level behavior */
  padding: 10px; /* Consistent spacing inside the dropdown */
  border: 1px solid #ccc; /* Add a border for uniform styling */
  border-radius: 4px; /* Optional: smooth corners */
  font-size: inherit; /* Inherit font size from parent */
  box-sizing: border-box; /* Include padding in width calculation */
  font-size: 80%; color: #4d4d4d;
}


.contact-form textarea::placeholder {
  font-size: 80%; /* Inherit font size */
  font-family: Calibri, sans-serif; /* Custom font */
  color: #4d4d4d;; /* Default placeholder color */
  transition: opacity 0.3s ease; /* Smooth fade-out effect */
  opacity: 1;
}

.contact-form textarea:focus::placeholder {
  opacity: 0; /* Hide placeholder when textarea is focused */
}


.contact-form .wpcf7-form-control-wrap textarea:focus + .hint {
  opacity: 0; /* Hide the hint when textarea is focused */
}


.wpcf7-not-valid-tip, .wpcf7-response-output {font-size: 80%}

.wpcf7-not-valid-tip {
  margin-top: -1.5em;
  margin-bottom: 2em;
  font-size: 70% !important;
}

.wpcf7-response-output {
    padding: 1em !important;
    border: 1px solid #ccc !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    color: #333f50 !important;
    margin:0; display: inline-block;}


.contact-form .two-column-row {
  grid-column: unset; /* Restrict these rows to the two-column layout */
}

@media (max-width: 480px) { 
.contact-form .two-column-row {grid-column: 1 / 1;}}



.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 2em; /* Spacing below each field */
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form select {
  width: 100%; /* Make the dropdown stretch full width */
  padding: 10px; /* Add padding for comfort */
  border: 1px solid #ccc; /* Define border styling */
  border-radius: 4px; /* Smooth corner edges */
  font-family: inherit; /* Use the same font as the form */
  background-color: #fff; /* Ensure dropdown has a clean background */
  color: #333; /* Text color for options */
  box-sizing: border-box; /* Include padding/border in width */
  cursor: pointer; /* Pointer cursor for dropdown */
}

.contact-form select:focus {
  border-color: #ff9900; /* Highlight border on focus */
  outline: none; /* Remove default outline */
}

.contact-form option {
  font-size: inherit; /* Match parent font size */
  font-family: inherit; /* Use parent font family */
  color: #666; /* Set text color for dropdown options */
  background-color: #fff; /* Background color for options */
}



.contact-form textarea {
  grid-column: span 2; /* Ensure textarea spans across both columns */
  height: 100px; font-family: Calibri, sans-serif;
  font-size: 80%;
}

.contact-form [type="submit"] {
	background-color: #ed691f;
	color: #fff;
	border: none;
	padding: 1rem;
	cursor: pointer;
	border-radius: 1rem;
	display: inline-block;
	width: auto; font-size: 80%;
  font-weight: 500;
}


.contact-form [type="submit"]:hover {
  background-color: #434e5e;
}

.contact-form label.required::after {
  content: "*";
  color: red;
  margin-left: 0.3em;
}

/**/

/*
.content-areas {width: 72%;
  margin-left: auto;
  margin-right: auto;}
*/
  
  .content-areas-holder {
	display: flex;
	margin-bottom: 4%;
	min-height: 275px;
}

.content-image-holder {width:48%; box-sizing: border-box; position: relative; background-size: cover;}


.content-image-holder img {position: absolute;
    top: 0px;
    left: 0px; width:100%; height:100%;
}
.content-area-holder {
	width:75%;
	box-sizing: border-box;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666; 
}
.content-areas-holder {display: flex; margin-bottom: 4%; min-height: 275px;}

@media only screen and (max-width : 1400px) {
.content-areas-holder {min-height: 200px;}
}

@media only screen and (max-width : 1024px) {
.content-areas-holder {min-height: auto;}
}

@media only screen and (max-width : 480px) {
.content-areas-holder {display: block; margin-bottom: 3em; }	
}
.order-master01 .order:nth-of-type(1) { order: 1; }
.order-master01 .order:nth-of-type(2) { order: 2; }
.order-master02 .order:nth-of-type(1) { order: 2; }
.order-master02 .order:nth-of-type(2) { order: 1; }

@media only screen and (max-width : 480px) {
	.order-master01 .order:nth-of-type(1) { order: 1; }
.order-master01 .order:nth-of-type(2) { order: 2; }
.order-master02 .order:nth-of-type(1) { order: 1; }
.order-master02 .order:nth-of-type(2) { order: 2; }	
}

.content-area-holder.float-left { margin-right:4%;}
.content-area-holder.float-right { margin-left:4%;}

@media only screen and (max-width : 480px) {
	.content-image-holder {    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding-bottom: 70%;
}
.content-area-holder.float-right { margin-left:0;}
.content-area-holder {
	width:100%;
	box-sizing: border-box;
	border: none;}}
    
.data-news-colour .content-area-holder h2 {
  color: #00558a;
}
.content-area-holder h2 {
  font-size: 180%;
  font-weight: 500;
  line-height: 100%; margin-top: 0; margin-bottom: 2%;
}
@media only screen and (max-width : 480px) {
.content-area-holder h2 {margin-bottom: 0.5em}
}

.data-news-colour .email-link {background-color: #00558a}

.email-link {
	position: absolute;
	bottom: -1px;
	right: -1px;
	box-sizing: border-box;
	color:#FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	padding-top: 0.5%;
	padding-right: 2%;
	padding-bottom: 0.5%;
	padding-left: 2%;
	text-decoration: none;
	color:#FFF !important;
	font-size: 90%; z-index:999
}

.consultancy-news-colour .email-link:hover, .data-news-colour .email-link:hover, .publications-news-colour .email-link:hover, .training-news-colour .email-link:hover {background-color:#999}

.external-link {display: none}


@media only screen and (max-width : 480px) {
.external-link {display: block; padding-top: 10%;}

.external-link a {background-color: #434e5e !important;
	white-space: normal !important;
	overflow: visible !important;
	height: auto !important;
	padding-left: 25% !important;
	padding-right: 25% !important;
	line-height: 1.2 !important;
	padding-top: 5% !important;
	padding-bottom: 5% !important;
}

.external-link a:hover {color: #ffffff !important;
    border-color: #212121 !important;
    background-color: #3f3f3f !important;}
}

.privacy-holder {
  position: fixed;
  width: 440px;
  box-sizing: border-box;
  z-index: 9999999;
  border-radius: 6px;
	bottom: 40px;
  left: 40px;
}

@media only screen and (max-width : 700px) {
	.privacy-holder {
  position: fixed;
  width: 80%;
  box-sizing: border-box;
  z-index: 9999999;
  border-radius: 6px;
	bottom: 40px;
  left: 10%;
}
}


.privacy-holder .privacy {
  background: #ffffff;
    background-color: rgb(255, 255, 255);
  border: 1px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
  padding: 20px 26px;
  box-shadow: 0 -1px 10px 0 #acabab4d;
  border-radius: 6px;
}

.privacy-holder .privacy p {font-size: 80%; margin-bottom: 1em}
.privacy-holder .privacy p a {color: #5a1d5e !important}

.btn-accept-all {
  background: #5a1d5e;
  color: #ffffff !important;
  border: 2px solid #5a1d5e;
}

.btn-reject-all {
  color: #5a1d5e;
  background: transparent;
    background-color: transparent;
  border: 2px solid #5a1d5e;
}

.privacy-buttons a { padding: 2.5%; display: inline-block; font-size: 80%}
.privacy-buttons a:hover {cursor: pointer}

.button { padding: 1.25%; display: inline-block; font-size: 100%; border-radius: 0.25em; text-decoration: none}
.publications-news-colour .button {background-color: #7aba02 !important; color:#fff !important}
.publications-news-colour .button:hover {background-color: #999 !important;}

.customlink {position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Overlay */
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* Popup */
#thanks-pmc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  text-align: center; padding: 2vw 5vw; width: 40vw
}

@media only screen and (max-width : 480px) {
	#thanks-pmc {width: 90vw}
}


#thanks-pmc p {margin-top: 0; color: #595959}
#thanks-pmc p strong {color: #000; font-size: 140%;}
#thanks-pmc .wp-block-button .wp-block-button__link {
  background-color: #65873A;
  width: auto; padding: 0.75rem 2rem;
}

#thanks-pmc .wp-block-button .wp-block-button__link:hover {background-color: #434e5e;}