.section-1 { 
	width: 100vw; 
	height: 100vh; 
	position: relative; 
	overflow: hidden; 
}

.section-1::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: 
	linear-gradient(to bottom, 
   		rgba(0,0,0,0) 0%,
   		rgba(0,0,0,0) 40%,
   		rgba(141,211,236,1) 40%,
   		rgba(110,207,227,1) 52%,
   		rgba(30,186,214,1) 73%,
		rgba(0,94,138,1) 100%);
}

.section-1::after{
  content:"";
  position:absolute; 
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right,
		rgba(0, 97, 149, 0.55) 0%,
      	rgba(32, 189, 216, 0.05) 45%,
      	rgba(32, 189, 216, 0.05) 55%,
      	rgba(0, 97, 149, 0.55) 100%),
    linear-gradient(to bottom,
   		rgba(0,0,0,0) 0%,
   		rgba(0,0,0,0) 80%,
      	rgba(0,84,124,0.70) 100%);
}

.sky-left {
	z-index: 4;
	width: calc( ((100vw - (var(--x700) * 1.6))) / 2 );
	height: var(--x778);
	position: absolute;
	top: 0;
	left: 0;
	background: url("images/skyl.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.sky-right {
	z-index: 4;
	width: calc( ((100vw - (var(--x700) * 1.6))) / 2 );
	height: var(--x778);
	position: absolute;
	top: 0;
	right: 0;
	background: url("images/skyr.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.sky-top {
	z-index: 4;
	width: calc(var(--x700) * 1.6);
	height: var(--x158);
	position: absolute;
	top: 0;
	left: calc( ((100vw - (var(--x700) * 1.6))) / 2 );
	right: calc( ((100vw - (var(--x700) * 1.6))) / 2 );
	background: url("images/skyt.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.vignette-1 {
	z-index: 5;
	width: 100vw;
	height: 100vh;
	position: absolute;
	box-shadow: 0 0 var(--x300) rgba(25,50,75,0.5) inset;
}

.box-1 {
	z-index:20;
	box-sizing: border-box;
	position: relative;
	top: var(--x78);
	height: var(--x700);
	width: calc(var(--x700) * 1.6);
	margin: 0 auto;
	padding: 0 0 0 0;    
    	display: flex;
    	align-items: center;
    	justify-content: center;
   	overflow: hidden;
	border-radius: var(--x78);
	background: #DAC0A0;
	box-shadow:
		0 0 var(--x5) rgba(0,0,0,0.40),
		0 var(--x10) var(--x10) rgba(0,0,0,0.30),
		0 var(--x15) var(--x15) rgba(0,0,0,0.20),
		0 var(--x20) var(--x20) rgba(0,0,0,0.10);
}

.box-1::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 30;
	border-radius: inherit;
	background: rgba(255,255,255,0.01);
	box-shadow:
		0 0 var(--x5)  rgba(0,0,0,0.30) inset,
		0 0 var(--x10) rgba(0,0,0,0.25) inset,
		0 0 var(--x60) rgba(0,0,0,0.20) inset,
		0 0 var(--x90) rgba(0,0,0,0.15) inset,
		0 0 var(--x120) rgba(0,0,0,0.10) inset,
		0 0 var(--x150) rgba(0,0,0,0.05) inset;
}

.box-1 .layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
	overflow: hidden;
}

.box-1 .layer-1 { background: #048789; opacity:0.9; clip-path:polygon(0 0,100% 0,100% 11.8vh,0 27.4vh); z-index: 24; }
.box-1 .layer-2 { background: #503D2E; opacity:0.9; clip-path:polygon(0 0,100% 0,100% 19.6vh,0 35.2vh); z-index: 23; }
.box-1 .layer-3 { background: #D44D27; opacity:0.9; clip-path:polygon(0 0,100% 0,100% 27.4vh,0 43.0vh); z-index: 22; }
.box-1 .layer-4 { background: #E2A72E; opacity:0.9; clip-path:polygon(0 0,100% 0,100% 35.2vh,0 50.8vh); z-index: 21; }

.box-1 img {
	z-index: 31;
	width: calc(var(--x400) * 2.39);
    height: var(--x400);
	position: absolute;
	top: var(--x70);
	display: block;
	pointer-events: none;
	filter:drop-shadow(0px var(--x10) var(--x10) rgba(0,0,0,0.75));
}

.slogan {
	position: absolute;
	left: 50%;
	bottom: var(--x50);           
	transform: translateX(-50%);
	text-align: center;
	z-index:31;

	font-family: Georgia, serif;
	font-style: normal;
	font-size: var(--x34);
	line-height: var(--x48);
	letter-spacing: 0.05em;
	font-weight: bold;
	text-transform: uppercase;

	color: #b89462; opacity: 0.9;        
	text-shadow:
        	0 var(--x1) var(--x1) rgba(0, 0, 0, 0.60),
        	0 var(--x2) var(--x2) rgba(0, 0, 0, 0.50),
			0 var(--x4) var(--x4) rgba(0, 0, 0, 0.25);
}