.panelSection { position:relative; width:100vw; /* aspect-ratio:1000 / 279;*/  display: flex; flex-direction:row; align-items: center;
 /* background: #587e8b; */   justify-content: center;

/* background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); z-index:0; */
	
/*()	background: linear-gradient(0deg, rgba(1,0,22,1) 0%, rgba(9,94,122,1) 35%, rgba(0,188,255,1) 100%); z-index:0; */
  flex-wrap:wrap;
}




.panelSection img {position:relative; z-index:0}
.panelSection img {max-width:100%; max-height:100%; height:auto; width:100%; height:auto; padding: 2px 1px; }
	
/*
        @keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}	
		 @keyframes slideInFromRight {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0);
  }
}

.leftColSplash, .rightColSplash {  opacity: 0; position:relative;
 -moz-transition: opacity 1.5s 1.5s;
-webkit-transition: opacity 1.5s 1.5s;
-o-transition: opacity 1.5s 1.5s;
transition: opacity 1.5s 1.5s;
z-index:1
}
*/
.loaded .leftColSplash, .loaded .rightColSplash { opacity: 1; cursor:pointer}
.leftColSplash a,  .rightColSplash a { position:absolute; top:0; right:0; bottom:0; left:0; z-index:4; text-shadow: 0px 0px 5px rgba(0,0,0,0.74); cursor:pointer}
	.leftColSplash, .rightColSplash {  
  /* This section calls the slideInFromLeft animation we defined above */
 width:33.3%;
	Height:100%;
		
}
.leftColSplash  {  animation: 1s ease-out 1.5s 1 slideInFromLeft; display: flex;  align-items: center;
  justify-content: center;  background: #000;}
.leftColSplash,  .rightColSplash {position:relative; color:#fff; overflow:hidden; cursor:pointer}
.leftColSplash a, .rightColSplash a { position:absolute; top:0; bottom:0; left:0; right:0;width:100%; height:100%; cursor:pointer !important }
.rightColSplash  {  animation: 1s ease-out 1.5s 1 slideInFromRight; display: flex;  align-items: center;
  justify-content: center; margin-left:0}
.panelSection h2 {color:#fff; font-size:33px; font-size: clamp(22px, 3vw, 48px); font-family: 'Playfair Display', serif; margin-bottom:22px; line-height:.9; text-shadow: 2px 2px #000;}
.topHead {position:absolute; bottom:3%; text-align:center;  z-index:3; width:100%}
.leftColSplash:hover img, .rightColSplash:hover img {opacity:.3}
.topHead {top:70%; position:absolute;  left:0; right:0; margin:auto; z-index:2; transition: all .4s ease-out; }
.leftColSplash:hover .topHead,   .rightColSplash:hover .topHead  { top:15%; cursor:pointer}
.leftColSplash p,  .rightColSplash p { max-width:80%; margin:0 auto; color:#fff;  font-size:18px; font-size: clamp(12px, 2vw, 22px);text-align:center; display:none;   }
.topHead button {display:none; margin:22px auto; background:none; color:#fff; border:1px solid #fff; padding:11px 18px; text-transform:uppercase; line-height:1;  font-size:13px; font-size: clamp(13px, .6vw, 16px); }

.rightColSplash a:hover {cursor:pointer !important}


.loaded .leftColSplash  button:hover, .loaded .rightColSplash.topHead button:hover {cursor:pointer; background:#000; }
.leftColSplash:hover p,  .rightColSplash:hover p,   .leftColSplash:hover button, .rightColSplash:hover button {display:block; font-weight: 500;text-shadow: 1px 1px #000; }
.leftColSplash:hover  span,  .rightColSplash:hover  span {opacity:0 !important; display:none}
		
@media only screen and (max-width: 980px) {
	.leftColSplash:hover .topHead,  .rightColSplash:hover .topHead  { top:11%}
	.topHead button {margin:17px auto; max-width:150px;}
	
	.topHead button {display:none; margin:28px auto; background:none; color:#fff; border:1px solid #fff; padding:6px 11px; text-transform:uppercase; line-height:1;  font-size:13px; font-size: clamp(12px, .6vw, 16px); }
	
		}
		
@media only screen and (max-width: 740px) {
	
	.leftColSplash:hover .topHead,   .rightColSplash:hover .topHead  { top:22%;}
	
	
	.leftColSplash:hover .topHead,   .rightColSplash:hover .topHead  { top:0}
	.leftColSplash p,  .rightColSplash p {margin-bottom:6px;}
	.panelSection h2 {margin-bottom:6px;}
	.topHead button {margin:8px auto}
	.topHead {top:60%;}
	
		.leftColSplash, .rightColSplash {  
  /* This section calls the slideInFromLeft animation we defined above */
 width:50%;

		
}
	
	
		}
		
@media only screen and (max-width: 740px) {
	.leftColSplash:hover p,  .rightColSplash:hover p   {display:none !important; }
		.leftColSplash:hover .topHead,   .rightColSplash:hover .topHead  {top:22% !important}
}