*,
*::before,
*::after{margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth}

body {font-family:Helvetica, sans-serif;}


.contain {position:relative; z-index:1; width:100%; overflow:hidden; height:90vh;}

.bg-img {position:relative; z-index:1; width:100%; height:90vh;}
	.bg-img img {height:auto; width:100vw;}

.top-img {position:absolute; z-index:3; top:0px; left:0px; width:50%; height:90vh; transition: all 0.4s ease;}
	.top-img .img {position:relative; z-index:3; width:calc(100% - 25px); height:90vh; clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%); transition: all 0.4s ease;}
		.top-img .img img {height:auto; width:100vw; position:relative; z-index:3;}
	.top-img .shadow {position:absolute; top:0px; left:0px; z-index:2; background:white; width:100%; height:90vh; clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%); transition: all 0.4s ease;}
		
	@media (min-width:1024px) {
		.top-img:hover {width:85%}
		.top-img:hover .img {width:calc(100% - 25px);}	
		.top-img:hover .shadow  {width:100%;}		
	}
	@media (max-width:1023px) {
		.contain {height:auto;}
		.bg-img {height:auto;}
		.top-img {height:100%; width:55%;}
		.top-img .img {width:calc(100% - 10px); height:100%; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%)}
		
		.top-img .shadow {width:100%; height:100%; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); transition: all 0.4s ease;}
		
	}





/* Press */
.press-statement {position:absolute; z-index:10; bottom:0rem; left:0px; padding:2vh 2vw; width:100%; background:white; box-shadow:0 0 10px rgba(0, 0, 0, 0.25);transition: all 0.4s ease;}
	.press-statement .grid{
	    display: flex;
	       flex-wrap: nowrap;
	       justify-content: center;
	       align-items: flex-end;
	       align-content: flex-end;
		   gap:5%;
	}
	.press-statement .grid img {height:auto; width:100%;}

	h6 {font-weight:normal; text-transform:uppercase; color:#888; letter-spacing:1px; margin:0 0 1em;}
	h1 {font-weight:bold; font-size:1.5em; color:#333; letter-spacing:-0.02em;}
	
	button {cursor:pointer; background:#b20629; color:white; font-size:1rem; border:0; padding:0.75rem; font-weight:bold; border-radius:5px; display:block; width:100%;}

	@media (min-width:1024px) {
		.press-statement {min-height:10vh;}
		.press-statement:hover { padding:2vh 2vw 4vh;}
	}
	@media (max-width:1023px) {
		.press-statement {position:relative; padding:1rem; margin-top:-1rem; box-shadow:none; border-top:5px solid #eee;}	
		.press-statement .grid{ display:grid;grid-template-columns:auto 110px; grid-template-rows:1fr;grid-column-gap:1rem;}
		
		h1 {font-size:1.2em}	
	}



/* The Modal */
.modal{display:none;position:fixed;z-index:10;padding:50px 0;left:0;top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.7);}
.modal-content{position:relative; background-color:white;margin:auto;padding:4vw;width:90%; max-width:1200px;}
.close{color:#333; font-size:35px; line-height:35px; position:absolute; z-index:5; top:0.6rem; right:1rem;}
.close:hover,
.close:focus{color:#333;text-decoration:none;cursor:pointer;}

	.modal-content h2 {color:#b20629; margin:4vw 0; font-size:2rem;}
	.modal-content p {margin:1rem 0; line-height:1.5rem;}
	
	@media (max-width:1023px) {
		.modal-content h2 {font-size:1.5rem;}
		.modal-content h2 br {display:none;}
	}