@charset "utf-8";


/*-----------------------------------------------------------------
COLUMNATION
-----------------------------------------------------------------*/
.container12 {
    margin:0 auto;
    padding:0px;
    width:100%;
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	letter-spacing:normal;
}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
	width:100%;
    display:inline-block;
	position:relative;
	padding:0px 35px 0px 35px;
}

@media only screen and (min-width:768px) {
    .container12 {
		width:100%;
		max-width:1320px;
		padding-right:50px;
		padding-left:50px;
		flex-direction:row;
	}
    .container12 .column1 {width:8.333%;}
    .container12 .column2 {width:16.666%;}
    .container12 .column3 {width:25%;}
    .container12 .column4 {width:33.333%;}
    .container12 .column5 {width:41.666%;}
    .container12 .column6 {width:50%;}
    .container12 .column7 {width:58.333%;}
    .container12 .column8 {width:66.666%;}
    .container12 .column9 {width:75%;}
    .container12 .column10 {width:83.333%;}
    .container12 .column11 {width:91.666%;}
    .container12 .column12 {width:100%;}
	
	.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
		padding-left:0px;
		padding-right:0px;
		padding-top:0px;
		padding-bottom:0px;
	}
}


/*-----------------------------------------------------------------
GENERAL AND DEFAULTS
-----------------------------------------------------------------*/
html, body, .post, .page{
    margin:0px;
	background:#ffffff;
}
*{
    -moz-box-sizing:border-box !important;
    -webkit-box-sizing:border-box !important;
    box-sizing:border-box !important;
}
*:focus{
	outline:none !important;
}
*:focus-visible{
	outline:2px solid #000000 !important;
}

p{
	position:relative;
	z-index:2;
	font-family:inherit;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	margin:0px;
}
p + p, p + ul, ul + p, ol + p, p + ol, p + ul, li ul{
	padding:15px 0px 0px 0px;
}
p + h2, p + h3, ul + h2, ul + h3, ul + h4, ol + h2, ul + h3{
	padding-top:50px;
}
p + h4, ul + h4{
	padding-top:35px;
}
h2 + h3, h2 + h4{
	padding-top:10px;
}
	
a.skip {
	display:inline-block;
	padding:10px;
	background:#000;
	color:#FFF !important;
	z-index:9999;
	position: absolute;
	top: -1000px;
	left: -1000px;
	text-align: left;
	overflow: hidden;
}
a.skip:active,  
a.skip:focus, 
a.skip:hover {
	font-size:15px;
	line-height:normal;
	color:#FFF;
	left: 0; 
	top: 0;
	width: auto; 
	height: auto; 
	overflow: visible; 
}

h1{
    color:#000;
	font-family: "Raleway", sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 600;
	line-height: 106%;
	margin:0px;
	padding:0px 0px 20px 0px;
	text-transform: none;
}
h2{
    color:#000;
	font-family: "Raleway", sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 105%;
	margin:0px;
	padding:0px 0px 20px 0px;
}
h3{
    color:#000;
	font-family: "Raleway", sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	margin:0px;
	padding:0px 0px 20px 0px;
}
h4{
    color:#000;
	font-family: "Raleway", sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	margin:0px;
	padding:0px 0px 20px 0px;
}
h5{
	color:#e01f3b;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	margin:0px;
	padding:0px 0px 20px 0px;
}

body{
    color:#000;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}
.small{
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 125%;
}
.large{
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}

@media only screen and (min-width:1280px) {
	h1{
		font-size: 46px;
	}
	h2{
		font-size: 38px;
	}
	h3{
		font-size: 28px;
	}
	h4{
		font-size: 20px;
	}
}

.light{
	font-weight:300;
}
.regular{
	font-weight:400;
}
.bold,
strong{
	font-weight:600;
}
.black{
	font-weight:900;
}

a:link,
a:visited{
	color:#000;
	font-weight:600;
}
a:hover,
a:active,
a:focus{
	color:#e01f3b;
}

ul{
	margin:0px;
	padding:0px;
}
ul li{
	margin-left:30px;
    padding-left:0px;
	padding-top:5px;
	padding-bottom:5px;
}
ol{
	margin:0px;
	padding:0px;
}
ol li{
	margin-left:20px;
	padding-top:10px;
	padding-bottom:0px;
}
ol li:first-child{
	padding-top:0px;
}
ol li:last-child{
	padding-bottom:0px;
}

hr, hr.wp-block-separator{
	width:100%;
	margin:50px 0px 50px 0px;
	padding:0px;
	border:0px;
	height:0px;
	border-bottom:2px solid #eae2d6;
}

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

img, object, embed {
	max-width:100%;
}
img {
	height:auto;
}
figure{
	margin:0px !important;
}

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

.wpcf7-form input,
.wpcf7-form textarea{
	width:100%;
	border:1px solid #000;
	border-radius:0px;
	font-family: "Raleway", sans-serif;
}
.wpcf7-form textarea{
	height:100px;
}
input[type="submit"]{
	width:auto;
	background:#e01f3b;
	color:#FFF;
	font-weight:700 !important;
	font-size:16px !important;
	text-transform:uppercase;
	padding:10px 20px !important;
	border-radius:30px;
	border:0px !important;
	line-height:150% !important;
	font-family: "Raleway", sans-serif;
}


/*-----------------------------------------------------------------
GUTENBERG OVERRIDES
-----------------------------------------------------------------*/
.wp-block-spacer{
	height:40px !important;
}
.wp-block-spacer.half{
	height:20px !important;
}

a.wp-block-button__link{
	background:#e01f3b;
	color:#FFF;
	font-weight:700;
	font-size:16px;
	text-transform:uppercase;
	padding:10px 20px;
}

@media only screen and (max-width:781px) {
	:where(.wp-block-columns.is-layout-flex) {
		gap:40px !important;
	}
	.wp-block-columns.is-layout-flex.mobile_no_gap{
		gap:0px !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 100% !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.stack_mobile_center{
		text-align:center !important;
	}
	.wp-block-columns.stack_mobile_center figure.alignright{
		float:none;
		text-align:center;
		display:inline-block;
	}

	.mobile_center{
		text-align:center;
	}
}

@media only screen and (min-width:782px) {
	:where(.wp-block-columns.is-layout-flex){
		gap:30px !important;
	}
	.is-layout-flex.center_content{
		/* center_content - my custom style to allow columns to be vertically centered */
		align-items:center !important;
	}

	.wp-block-column.border p{
		border-left:1px solid #000;
		padding-left:20px;
	}
}

@media only screen and (min-width:782px) and (max-width:1023px) {
	.is-layout-flex.tablet_fullwidth{
		display:block;
	}
	.is-layout-flex.tablet_fullwidth .wp-block-column{
		margin-bottom:40px !important;
	}
	.is-layout-flex.tablet_fullwidth .wp-block-column:last-child{
		margin-bottom:0px !important;
	}
}

@media only screen and (min-width:1024px) {
	:where(.wp-block-columns.is-layout-flex){
		gap:40px !important;
	}
}

@media only screen and (min-width:1280px) {
	:where(.wp-block-columns.is-layout-flex){
		gap:60px !important;
	}
}


/*-----------------------------------------------------------------
BOXED CONTENT
-----------------------------------------------------------------*/
.boxed_content{
    position:relative;
    display:inline-block;
    width:100%;
    margin:0px;
    padding:20px;
	background:#f4f1e9;
}
.boxed_content .wrapper{
    position:relative;
    list-style:none;
    display:inline-block;
    width:100%;
    height:auto;
}

@media only screen and (min-width:768px) {
	.boxed_content{
		padding:40px;
	}
}


/*-----------------------------------------------------------------
PDFS
-----------------------------------------------------------------*/
.pdfs{
    position:relative;
    display:grid;
	gap:20px;
    width:100%;
	grid-template-columns: repeat(1, 1fr);;
}
.pdfs a{
    position:relative;
    display:inline-block;
    width:100%;
    height:auto;
	padding-bottom:70%;
	background:#f4f1e9;
	text-decoration:none !important;
}
.pdfs a::before{
	content:"";
	width:80px;
	height:80px;
	position:absolute;
	display:inline-block;
	right:0px;
	top:0px;
	background:url(/wp-content/uploads/2024/10/pdf-icon.png) top right no-repeat;
	background-size:contain;
}
.pdfs a h4{
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:auto;
	padding:30px !important;
}

@media only screen and (min-width:500px) {
	.pdfs a{
		padding-bottom:50%;
	}
}

@media only screen and (min-width:768px) {
	.pdfs{
		grid-template-columns: repeat(2, 1fr);;
	}
	.pdfs a{
		padding-bottom:80%;
	}
}

@media only screen and (min-width:1024px) {
	.pdfs{
		grid-template-columns: repeat(3, 1fr);;
	}
	.pdfs a{
		padding-bottom:100%;
	}
}

@media only screen and (min-width:1280px) {
	.pdfs{
		grid-template-columns: repeat(4, 1fr);;
	}
	.pdfs a{
		padding-bottom:95%;
	}
}


/*-----------------------------------------------------------------
PAGE BANNER
-----------------------------------------------------------------*/
.page_banner{
	display:inline-block;
	width:100%;
	position:relative;
	overflow:hidden;
	line-height:0px;
}

.page_banner .image_container{
	display:inline-block;
	position:relative;
	width:100%;
	height:auto;
	padding-bottom:40%;
	left:0px;
	top:0px;
	z-index:1;
}
.page_banner .image_container img{
	position:absolute;
	left:0px;
	top:0px;
	object-fit:cover;
	width:100%;
	height:100%;
}
.page_banner .image_container.top img{
	object-position: top;
}
.page_banner .image_container.center img{
	object-position: center;
}
.page_banner .image_container.bottom img{
	object-position: bottom;
}

.page_banner .page_banner_cover{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background: linear-gradient(50deg, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.2));
}

.page_banner .content_container{
	position:absolute;
	z-index:3;
	left:0px;
	bottom:0px;
	width:100%;
	height:auto;
}
.page_banner .content_container .content_wrapper{
	width:100%;
	padding:20px;
	position:relative;
	line-height:normal;
	color:#FFF !important;
}
.page_banner .content_container .content_wrapper h1{
	color:#e01f3b;
	font-style:italic !important;
	font-weight:800;
	font-size: 50px;
	font-style: normal;
}

@media only screen and (min-width: 768px) {
	.page_banner .content_container .content_wrapper{
		padding:40px;
	}
	.page_banner .image_container{
		padding-bottom:35%;
	}
}

@media only screen and (min-width: 1280px) {
	.page_banner .content_container .content_wrapper{
		padding:60px;
	}
	.page_banner .image_container{
		padding-bottom:30%;
	}

	.page_banner .content_container .content_wrapper h1{
		font-size: 60px;
	}
}


/*-----------------------------------------------------------------
TOP STYLES AND CONTAINERS
-----------------------------------------------------------------*/
#TOP {
	height: auto;
	position: relative;
	z-index:10;
	width: 100%;
	background:#f4f1e9;
}
#TOP .header{
	display:flex;
	flex-direction:row;
	vertical-align: middle;
}
#TOP .header #logo {
	z-index: 14;
	position: relative;
	display: inline-block;
	width: auto;
	height: 90px;
	padding-top:10px;
	padding-bottom:10px;
}
#TOP .header #logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position:left;
}

#TOP button.menu-toggle {
	z-index: 16;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	width: 30px;
	height: 100%;
	position: absolute;
	cursor: pointer;
	right: 35px;
	top: 0;
	background: url(/wp-content/uploads/2024/10/diplosol-menu-icon.svg) left center no-repeat;
	background-size: contain;
}
#TOP button.menu-toggle-active {
	background: url(/wp-content/uploads/2024/10/diplosol-close-icon.svg) left center no-repeat;
	background-size: contain;
}

#TOP ul#primary-menu {
	z-index: 11;
	display: none;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform:translateX(-100%);
	list-style: none;
	position: fixed;
	display:inline-block;
	visibility:hidden;
	vertical-align: middle;
	background: #000000;
	margin: 0;
	padding: 100px 35px 0 35px;
	transition: all .3s ease-in-out;
}
#TOP.active ul#primary-menu {
	visibility:visible;
	transform:translateX(0);
	transition: all .3s ease-in-out;
}
#TOP ul#primary-menu li {
	background: none;
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0;
	margin: 0;
}
#TOP ul#primary-menu li a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	line-height: normal;
	padding: 15px 0;
	font-weight: 400;
	font-size: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

#TOP .header_cta{
	position:absolute;
	top:24px;
	right:85px;
}

@media only screen and (min-width: 1024px) {
	#TOP{
		background:#FFF;
	}
	#TOP .header #logo {
		height: 100px;
		padding-top:10px;
		padding-bottom:10px;
	}
	#TOP button.menu-toggle {
		display: none;
	}
	#TOP .nav_bg{
		height:50px;
		width:100%;
		position:absolute;
		left:0px;
		bottom:0px;
		background:#f4f1e9;
	}
	#TOP ul#primary-menu {
		list-style: none;
		position: relative;
		top: auto;
		margin: 0;
		padding: 0;
		display: block;
		height:auto;
		width: 100%;
		visibility: visible;
		transform: none;
		background: none;
	}
	#TOP ul#primary-menu li {
		display: inline-block;
		width: auto;
		margin:0px 20px 0px 0px;
		padding: 0;
		height: 100%;
		vertical-align: middle;
		text-align: center;
	}
	#TOP ul#primary-menu li a {
		padding: 15px 0px 10px 0px;
		margin:0px;
		background: none;
		border: 0;
		color: #000;
		text-transform:uppercase;
		font-size:16px;
		font-weight:700;
		border-bottom:5px solid #f4f1e9;
	}
	#TOP ul#primary-menu li a:hover,
	#TOP ul#primary-menu li a:focus{
		color:#e01f3b;
		border-bottom:5px solid #e01f3b;
	}

	#TOP .header_cta{
		top:28px;
		right:0px;
	}
}


/*-----------------------------------------------------------------
FOOTER
-----------------------------------------------------------------*/
footer{
	position:relative;
	background:#000000;
	color:#FFF !important;
	font-size:12px;
	text-align:center;
	padding-top:15px;
	padding-bottom:15px;
}