@charset "utf-8";
/* CSS Document */

*{
	box-sizing: border-box;
}

html, body {
	width:100%;
	height:100%;
	position:relative;
	
	padding:0;
	margin:0;
	
	font-family:'barlow-light','Arial',sans-serif; 
	font-style:normal;
	font-size:93.75%;
	color:rgba(0,0,0,1);
}

html{
	/*	force scrollbars  */
	overflow-y:scroll;
	scroll-behavior: smooth;
}

body{
	background-color:rgba(255,255,255,1);
}

	h1, h2, h3, h4, h5, h6, p, td, ul, li, figure {
		margin:0;
		padding:0;
		font-weight:normal;
	}

	a { 
		font-family:'barlow-light','Arial',serif; 
		font-style:normal;
		font-weight:normal;
		text-decoration:none; 
	}

	strong{
		font-family:'barlow-regular','Arial Bold',serif; 
		font-style:normal;
		font-weight:normal;
	}

	.yellow { color:rgba(255,204,0,1); }


.flex{
	display:flex;
}

.flexRow{
	display:flex;
	flex-flow:row;
	flex-wrap:nowrap;
}
.flexCol{
	display:flex;
	flex-flow:column;
	flex-wrap:nowrap;
}
.flexSpaceBetween	{ justify-content:space-between; }
.flexSpaceAround	{ justify-content:space-around; }
.flexCenterMain		{ justify-content:center; }
.flexCenterSub		{ align-items:center; }
.flexTop			{ align-items:flex-start; }
.flexEnd			{ justify-content:flex-end; }
.flexWrap			{ flex-wrap:wrap; }

.fullWidthImg{
	width:100%;
	height:auto;
}
.fullHeightImg{
	height:100%;
	width:auto;
}

.khppb_innerSize{
	width:100%;
	max-width:1440px;
	position:relative;
	margin:0 auto;
}


/*	---------------------------------------------------------------------------------------  HEADER  */




/*	-----------------------------------------------------------------------------------------  MAIN  */

.exmex_mainWrp{
	width:100%;
	height:auto;
	
	padding:0 30px;
	
	position:relative;
	
	background-image:linear-gradient(90deg, rgba(170,170,170,1) 0%, rgba(170,170,170,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100% )
}

	.exmex_main{
		width:100%;
		max-width:1440px;
		height:auto;
		min-height:100vh;

		overflow:hidden;

		margin:0 auto;

		position:relative;
	}

@media only screen and (max-width:999px){
	.exmex_mainWrp{
		background:none;
		padding:0;
	}
		.exmex_main{
			overflow:visible;
		}
}


	/*	-----------------------------------------------------------------------  THE SOCRATEC BLOCK  */
		.exmex_srdWrp{
			width:63.5%;
			max-width:889px;
			height:20000px;

			position:absolute;
			top:0;
			right:50%;
			z-index:200;

			display: flex;
			flex-flow: row;
			justify-content: flex-end;

		/*	overflow:hidden;  */

			background-color:rgba(170,170,170,1);

			transform-origin: top right;
			transform:translate(21.2%,0) rotate(12deg);
		}
			.exmex_srd{
				width:100%;
				height:auto;

				transform-origin: top right;
				transform: rotate(-12deg);
				
				padding:0 0 100px 0;
			}
				.exmex_srd .titleImg{
					width:157.5%;
					height:auto;
					
					display:block;
					margin:13.5% 0 100px 0;
				}

				.exmex_srd .titleImgM{
					display:none;
				}
					.exmex_srd .logo{
						margin:20px 0 20px -15px;
					}

					.exmex_srd .c{
						width:100%;
						max-width:600px;
						padding:0 0 1rem 130px;
					}

					.exmex_srd .c p,
					.exmex_srd .more p,
					.exmex_srd .c ul,
					.exmex_srd .c ol{
						padding:0 0 0.7rem 0;
						font-family: 'barlow-regular',sans-serif;
						font-size:1.40rem;
						text-align: justify;
						color:rgba(255,255,255,1);
					}
						li{
							padding:0 0 1rem;
						}

					.exmex_srd .c p:last-of-type{
						padding:0 0 40px 0;
						border-bottom:1px solid rgba(255,255,255,0.3);
						margin: 0 0 20px 0;
					}

				.exmex_srd .more{
					width:100%;
					max-width:600px;
					min-height:200px;
					padding:0 0 0 130px;
				}
					.exmex_srd .more p{
						text-align: left;
					}
						.exmex_srd .more span{
							font-size:1.2rem;
						}
						/*
						.exmex_srd .more span::before{
							content:'•';
							padding:0 5px 0 0;
						}
						*/

@media only screen and (max-width:1440px){
	.exmex_srd .c,
	.exmex_srd .more{
		max-width:470px;
		padding-left: 0;
	}
}

@media only screen and (max-width:1140px){
	.exmex_srd .c,
	.exmex_srd .more{
		max-width:400px;
		padding-left: 0;
	}
}

@media only screen and (max-width:999px){
	.exmex_srdWrp{
		width:100%;
		max-width:100%;
		height:auto;

		position:relative;
		top:initial;
		right:initial;
		background-color:rgba(170,170,170,1);
		
		display:block;

		transform-origin: top right;
		transform:translate(0,0) rotate(0);
	}
		.exmex_srd{
			padding:0 30px 0;
			transform: rotate(0deg);
		}
	
			.exmex_srd .titleImg{ display:none; }
	
			.exmex_srd .titleImgM{ 
				width:100%;
				max-width:510px;
				height:auto;
				
				display:block; 
				padding:70px 0 70px 130px;
			}
	
			.exmex_srd .c,
			.exmex_srd .more{
				max-width:100%;
				padding-left: 130px;
			}
				.exmex_srd .c p,
				.exmex_srd .more p{
					text-align:left;
				}
}

@media only screen and (max-width:600px){
	.exmex_srd .titleImgM{ 	
		padding-left:0;	
	}
	
	.exmex_srd .c,
	.exmex_srd .more{
		padding-left: 0;
	}
	
	.exmex_srd .logo{
		width:100%;
		height:auto;
	}
}



	/*	--------------------------------------------------------------------------  THE DINOX BLOCK  */

		.exmex_dnxWrp{
			width:100%;
			max-width:1400px;
			height:auto;
			min-height:100%;

			position:relative;
			margin:0 auto;

			background-color:rgba(255,255,255,1);
		}

			.exmex_dnx{
				width:100%;
				
				display:flex;
				flex-flow:column;
				align-items: flex-end;

				padding:0 0 3rem;
				
			}
				.exmex_dnx .titleImg{
					width:100%;
					height:auto;
					
					display:block;
					visibility: hidden;
					margin:8.5% 0 120px 0;
				}

				.exmex_dnx .titleImgM{
					display:none;
				}
				.exmex_dnx .logo{
					width:200px;
					height:auto;
					margin:20px 0 25px;
				}

				.exmex_dnx .c{
					width:470px;
					padding:0 0 1rem;
				}
					.exmex_dnx .c p,
					.exmex_dnx .more p,
					.exmex_dnx .c ul,
					.exmex_dnx .c ol{
						padding:0 0 0.7rem 0;
						font-family: 'barlow-regular',sans-serif;
						font-size:1.40rem;
						text-align: justify;
						color:rgba(0,0,0,0.50);
					}

				.exmex_dnx .c p:last-of-type{
					padding:0 0 40px 0;
					border-bottom:1px solid rgba(0,0,0,0.1);
					margin: 0 0 20px 0;
				}

				.exmex_dnx .more{
					width:100%;
					max-width:470px;
					min-height:200px;
				}
					.exmex_dnx .more p{
						text-align: right;
					}
						.exmex_dnx .more span{
							font-size:1.2rem;
						}
						/*
						.exmex_dnx .more span::before{
							content:'•';
							padding:0 5px 0 0;
						}
						*/
@media only screen and (max-width:1140px){
	.exmex_dnx .c,
	.exmex_dnx .more{
		max-width:400px;
		padding-left: 0;
	}
}

@media only screen and (max-width:999px){
	.exmex_dnx{
		width:100%;

		display:flex;
		flex-flow:column;
		align-items: flex-start;

		padding:100px 30px 3rem;

	}
		.exmex_dnx .titleImg{
			display:none;
		}
		.exmex_dnx .titleImgM{ 
			display:none; 
		}

		.exmex_dnx .c,
		.exmex_dnx .more{
			width:100%;
			max-width:100%;
		}

			.exmex_dnx .more p{
				text-align: left;
			}

}
	
	
	/*	-----------------------------------------------------------------------  CTA  */
	.cta{
		width:100%;
		max-width:470px;
		
		position:relative;
	}
		.cta a{
			display:block;
			padding:5px 10px;
			font-family:'barlow-regular',sans-serif;
			font-size:1.4rem;
			text-align:center;

			border-radius: 4px;
			box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.5);
			
			transition:background 0.1s;
		}
		.exmex_srd .cta{ margin-left: 130px;}
		.exmex_srd .cta a:link, .exmex_srd .cta a:visited{ background-color:rgba(0,108,194,1); color:rgba(255,255,255,1); }
		.exmex_srd .cta a:hover, .exmex_srd .cta a:active{ background-color:rgba(255,108,0,1); color:rgba(255,255,255,1); }

		.exmex_dnx .cta a:link, .exmex_dnx .cta a:visited{ background-color:rgba(232,17,147,1); color:rgba(255,255,255,1); }
		.exmex_dnx .cta a:hover, .exmex_dnx .cta a:active{ background-color:rgba(0,190,220,1); color:rgba(255,255,255,1); }

		.pointer{
			width:26px;
			height:34px;
			display:block;

			position:absolute;
			
			bottom:-15px;
			left:10px;
			
			transform:rotate(7deg); 
			transition:opacity 0.25s;
			
			filter:drop-shadow(5px 2px 5px rgba(0,0,0,0.35));
		}
			.cta:hover .pointer{ opacity:0; }

	/*	--------------------------------------------------------------------  FOOTER  */
	section footer{
		width:100%;
		padding:10px 0 40px 0;
		margin: 20px 0 20px 0;
	}
		section footer ul{
			display:flex;
			flex-flow:row;
			padding:10px 0 30px 0;
		}
			section footer li{
				list-style:none;
			}
			section footer a{
				font-family:'barlow-regular',sans-serif;
			}

		.exmex_srd footer ul{
			margin-left:130px;
			border-top:1px solid rgba(255,255,255,0.3);
		}
			.exmex_srd footer li{
				padding-right:20px;
				color:rgba(255,255,255,1);
			}
			.exmex_srd footer a:link, .exmex_srd footer a:visited { color:rgba(255,255,255,1); }
			.exmex_srd footer a:hover, .exmex_srd footer a:active { color:rgba(0,108,194,1); }


		.exmex_dnx footer ul{
			border-top:1px solid rgba(0,0,0,0.1);
			justify-content: flex-end;
		}
			.exmex_dnx footer li{
				padding-left:20px;
				color:rgba(0,0,0,0.5);
			}
			.exmex_dnx footer a:link, .exmex_dnx footer a:visited { color:rgba(0,0,0,0.5); }
			.exmex_dnx footer a:hover, .exmex_dnx footer a:active { color:rgba(232,17,147,1); }


@media only screen and (max-width:1440px){
	.exmex_srd .cta{
		max-width:470px;
		margin-left: 0;
	}
	.exmex_srd footer ul{
		margin-left: 0;
	}
}
@media only screen and (max-width:1140px){
	.exmex_srd .cta{
		max-width:400px;
		margin-left: 0;
	}
	.exmex_dnx .cta{
		max-width:400px;
	}
}
@media only screen and (max-width:999px){
	.exmex_srd .cta{
		max-width:calc(100% - 130px);
		margin-left: 130px;
	}
	.exmex_srd footer{
		padding-bottom:0;
	}
	.exmex_srd footer ul{
		margin-left: 130px;
	}
	
	
	.exmex_dnx .cta{
		width:100%;
		max-width:100%;
	}
	.exmex_dnx footer{
		padding-bottom:0;
	}
		.exmex_dnx footer ul{
			justify-content: flex-start;	
		}
			.exmex_dnx footer li{
				padding-left:0;
				padding-right:20px;
			}
}
@media only screen and (max-width:600px){
	.exmex_srd .cta,
	.exmex_srd footer ul{
		max-width:100%;
		margin-left: 0;
	}
}

@media only screen and (max-width:400px){
	.firm{
		display:none;
	}
}



/*	----------------------------------------------------------------------------------  SKEWED ENDS  */
.topTriangle{
	width: 100%;
	height:0;
	padding-bottom: 12.5%;
	
	display:none;
	
	position:relative;
	
	background-image:url("../media/images/exmex_triangle_gray40.svg");
	background-size: 100% 100%;
	background-color:rgba(255,255,255,1);
	background-position:0 -1px;
	background-repeat:no-repeat;
	
	transform: rotateZ(180deg);
}

.bottomTriangle{
	width: 100%;
	height:0;
	padding-bottom: 12.5%;
	
	display:none;
	
	position:relative;
	
	background-image:url("../media/images/exmex_triangle_gray40.svg");
	background-size: 100% 100%;
	background-color:rgba(255,255,255,1);
	background-position:0 -1px;
	background-repeat:no-repeat;
}

@media only screen and (max-width:999px){
	.bottomTriangle{
		display:block;
	}
}



/*	---------------------------------------------------------------------------------  FIXED FOOTER  */
.exmex_ftrWrp{
	width:800px;
	height:100px;
	
	position: fixed;
	right:0;
	bottom:0;
	z-index: 1000;
	
	display:none;
}
	.exmex_ftrDnx{
		width:100%;
		height:100%;
		
		display:block;
		position: absolute;
		top:100px;
		left:0;
		
		background-image:url("../media/images/exmex_triangle_footer_white_opt.svg");
		background-size: 100% 100%;
		background-position:0 0;
		background-repeat:no-repeat;
		
		transition:top 0.5s;
	}
		.exmex_ftrLogoDnx{
			width:140px;
			height:auto;

			position:absolute;
			top:25px;
			right:30px;
		}

	.exmex_ftrSrd{
		width:100%;
		height:100%;
		
		display:block;
		position: absolute;
		top:100px;
		left:0;
		
		background-image:url("../media/images/exmex_triangle_footer_gray_opt.svg");
		background-size: 100% 100%;
		background-position:0 0;
		background-repeat:no-repeat;
		
		transition:top 0.5s;
	}
		.exmex_ftrLogoSrd{
			width:220px;
			height:auto;

			position:absolute;
			top:38px;
			right:30px;
		}

@media only screen and (max-width:999px){
	.exmex_ftrWrp{
		display:block;
	}
}