/*
Theme Name:  TWCC
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi child theme
Theme Author: Tetro Design
Template:  Divi
*/

:root {
	--dark-red: #4F1F22;
	--white: #FFFFFF;
	--grey: #EBEBEB; 
	--orange: #F4422B;
	--dark-grey: #4B4B4B;
	--dark-blue: #032F54;
	--dark-blue-grey: #304954; }

/*Focus state
********************************/
.orange-bg a:focus-visible,
.et_pb_gallery_image a:focus-visible, .footer-contact a:focus-visible, .privacy-wrapper a:focus-visible {
  outline: 2px dashed var(--grey); }

.et_pb_module.et_pb_image a:focus-visible, a:focus-visible {
	 outline: 2px dashed var(--dark-blue-grey); }

a.skip-main {
  left: -999px;
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999; }

a.skip-main:focus-visible,
a.skip-main:active {
  color: var(--white);
  background-color: var(--dark-blue);
  left: auto;
  top: 0;
  width: 30%;
  height: auto;
  overflow: auto;
  margin: 10px 35%;
  padding: 5px;
  text-align: center;
  z-index: 999; }

/* Fonts
********************************/
html {
  font-size: 16px; }

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal; }

body a.et_pb_button.white-button {
	font-weight: 500; }

.et_pb_text_inner h1, .et_pb_text_inner h2, .et_pb_text_inner h3, .footer-contact .small-heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal; }

.et_pb_text_inner h3, .et_pb_text_inner h2.small-heading {
	font-size: 1.5rem;
	line-height: 1.875rem; }

.footer-contact *, .footer-tagline p {
	font-size: 1.125rem;
	line-height: 1.5rem; }

.privacy-wrapper * {
	font-size: 0.75rem;
	line-height: 1.25rem; }

.footer-contact .small-heading {
	text-transform: uppercase; }

.et_pb_row.banner-right-bottom-corner.mw50 { 
	text-wrap: balance; }

.et_pb_text_inner a {
	text-decoration: underline; }

div.nf-form-content input[type=submit]:hover {
	cursor: pointer; }

/* Colours
********************************/
.footer-contact *, .white, a.white, .nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit], div.nf-form-content input[type=submit]:hover {
	color: var(--white); }

.privacy-wrapper *, .footer-contact a:hover, a.white:hover {
	color: var(--grey); }

.et_pb_text_inner h1:not(.white), .et_pb_text_inner h2:not(.white), .et_pb_text_inner h3:not(.white) {
	color: var(--dark-blue-grey); }

body a.et_pb_button.white-button, body a.et_pb_button.white-button:hover, div.nf-error-msg, div.ninja-forms-req-symbol {
	color: var(--orange) !important; }

a.et_pb_button.white-button, div.nf-form-content .list-select-wrap .nf-field-element>div, div.nf-form-content input:not([type=button]), div.nf-form-content textarea {
	background-color: var(--white); }

.grey-bg, body a.et_pb_button.white-button:hover {
	background-color: var(--grey); }

.blue-grey-bg {
	background-color: var(--dark-blue-grey); }

.orange-bg, div.nf-form-content button, div.nf-form-content input[type=button], div.nf-form-content input[type=submit], div.nf-error.field-wrap .nf-field-element:after {
	background-color: var(--orange); }

div.nf-form-content input[type=submit]:hover {
	background-color: rgba(244,66,43,0.75); }

.dark-red-bg {
	background-color: var(--dark-red); }

.privacy-wrapper {
	border-top: 1px solid var(--grey); }


/* Animations
********************************/
.footer-contact a, a.white {
	transition: color 500ms ease; }

/* Flex 
********************************/
.privacy-wrapper {
	display: -webkit-box;  
  	display: -ms-flexbox;  
  	display: -webkit-flex;
    display: flex; }

.privacy-wrapper {
    justify-content: space-between; }

/* Global 
********************************/
.mw1600 {
	max-width: 1600px;
	margin: 0 auto; }

.footer-contact *, .footer-tagline p {
	padding-bottom: 0; }

/* Banners 
 * - Polygon Shape */
.et_pb_row.banner-right-bottom-corner {
    padding: 4rem 4rem;
    clip-path: polygon(100% 0%, 100% 60%, 90% 100%, 0 100%, 0 0); }

.et_pb_row.banner-right-bottom-corner.mw50 {
	margin-top: -8em; }

/* Contact form
********************************/
div.nf-form-content input[type=submit] {
	padding: .3em 1em; }

.nf-form-fields-required {
	margin-bottom: 1em; }

.nf-response-msg {
    margin-bottom: 2em; }


/* Footer
********************************/
.footer-logo {
	width: 25%; }

.footer-logo svg {
    max-width: 130px;
	height: auto; }

.privacy-wrapper {
    padding: 1rem 0 2rem 0; }

@media all and (min-width: 981px) {
	.et_pb_text_inner h1 {
		font-size: 3.375rem;
		line-height: 3.75rem; }

	.et_pb_text_inner h2 {
		font-size: 2.25rem;
		line-height: 2.625rem; }
	
	/* Global */ 
	.mw1600 {
		width: 80%; }
	
	/* Blue grey banner */
	.et_pb_row.banner-right-bottom-corner.mw50 {
        margin-bottom: 4em; }
	
	.et_pb_row.banner-right-bottom-corner.orange-bg {
		max-width: 70%;
		margin-left: 10%; 
		padding: 2.75rem 4rem; }
	
	/* Footer
	********************************/
	.footer-contact-wrapper > div:not(.footer-contact) {
		width: 25%; }
	
	.footer-contact-wrapper {
		justify-content: space-between;
    	padding: 4rem 0 2rem; }		
}
@media screen and (max-width: 980px) {
	.et_pb_text_inner h1 {
		font-size: 2.625rem;
		line-height: 3rem; }

	.et_pb_text_inner h2, .et_pb_text_inner h3 {
		font-size: 1.5rem;
		line-height: 1.875rem; }
	
	.footer-contact-wrapper {
    	padding: 4rem 0 2rem 0; }

	.et_pb_row.banner-right-bottom-corner {
		padding: 2.75rem 5%; }	
	
	.et_pb_row.banner-right-bottom-corner.mw50 {
        margin-bottom: 2em; 
		width: 95%;
        margin-left: 0; }	
	
	/* Global */ 
	.mw1600 {
		width: 90%; }	
}
@media screen and (max-width: 980px) and (min-width: 768px) {
	.top-page-banner-text-row {
		padding-left: 18%; }
	
	.footer-contact-wrapper {
		justify-content: flex-start; }
}
@media all and (min-width: 768px) {
	body, .et_pb_module p, div.nf-form-content input[type=submit], .nf-form-fields-required {
		font-size: 1.25rem;
		line-height: 1.625rem; }
	
	/* top page banner - homepage*/
	.et_pb_section.top-page-banner {
		padding: 8em 0 6em 0 !important; }	
	
	.et_pb_row.banner-right-bottom-corner.white-polygon-bg {
		clip-path: polygon(100% 0%, 100% 80%, 85% 100%, 0 100%, 0 0); }	

	.et_pb_row.banner-right-bottom-corner.mw50 {
		width: 50%;
		margin-left: 0; }
	
	.footer-contact-wrapper {
		display: -webkit-box;  
		display: -ms-flexbox;  
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2em; }	
}
@media screen and (max-width: 800px) {
	.nf-field-container {
    	margin-bottom: 2rem !important; }
}
@media screen and (max-width: 767px) {
	body, h2.small-heading, .et_pb_module p, div.nf-form-content input[type=submit], .nf-form-fields-required {
		font-size: 1.125rem !important;
		line-height: 1.5rem; }
	
	/* top page banner - homepage*/
	.et_pb_section.top-page-banner {
		padding: 2em 0 6em 0 !important; }
	
	.et_pb_row.banner-right-bottom-corner {
    	clip-path: polygon(100% 0%, 100% 60%, 85% 100%, 0 100%, 0 0); }	
	
	.et_pb_row.banner-right-bottom-corner.white-polygon-bg {
    	clip-path: polygon(100% 0%, 100% 90%, 83% 100%, 0 100%, 0 0); }

	/* Footer
	********************************/
	.footer-contact-wrapper > div:not(:last-of-type) {
		margin-bottom: 2em; }	
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* When a user has selected the option to invert colors, it also inverts the color of images and video. 
  Use CSS invert filter to invert images and videos back */
@media (inverted-colors) {
  img,
  video {
    filter: invert(100%);
  }
}