html {
    scroll-snap-type: y mandatory; scroll-padding: 10px;
}

#peterGabriel {
    position:fixed; z-index:4; top:0; left:0; width:100%; height:100vh;
}

#colorBack {
    position:fixed; z-index:2; top:0; left:0; width:100%; height:100vh; overflow: hidden; perspective: 1000px;
    background-color: rgb(200, 200, 200); transition: background-color 500ms linear;
}
    .colorBackIn {
        position: absolute; height: 100vw; width: 100vw; top:50%; left:50%; margin:-50vw auto auto -50vw;
        background: radial-gradient(circle at 50%, rgb(255, 255, 255) 10%, transparent 30%);
        transform-style:preserve-3d; transition: all 500ms  ease-in-out; opacity: 1;
    }

main#sledgeHammer {
    z-index: 5; position: relative;
}

    main#sledgeHammer article.redRain {
        position: relative; height:100vh; width:100%; scroll-snap-align: start end;
    }

    main#sledgeHammer article.redRain section {
        position: relative; height:100%; width:100%;
    }
    main#sledgeHammer article.redRain section.forPinar {
        overflow: hidden;
    } 


    .blockText {
        position:relative; padding:3rem; background-color: rgba(255,255,255, .6); width:50%; 
        box-shadow: 0 5rem 1rem -2rem rgba(0,0,0, .2); backdrop-filter: blur(1px);
    }
        .blockText h1 {
            font-size: clamp(2rem,5vw,3.5rem);
        }
        .blockText h2 {
            font-size: clamp(2rem,4vw,3rem); padding:0 1rem; margin:1rem 0; line-height:1;
        }
        .blockText p {
            font-size:clamp(.85rem,-0.5rem + 1.5vw ,1rem); text-align: justify;  padding:0 2rem;
        }
		
.caffeGlassGlobal {
	position: absolute; top:50%; left:50%;
	height:500px; width:500px; transition:all 500ms ease-in-out;
}
	.so_01So .pHoneStrat .caffeGlassGlobal {
		translate:-30px -130px; scale:.6;
	}
	
	.so_02So .pHoneStrat .caffeGlassGlobal,.so_03So .pHoneStrat .caffeGlassGlobal,.so_04So .pHoneStrat .caffeGlassGlobal,.so_05So .pHoneStrat .caffeGlassGlobal {
		translate:200dvw -130px; scale:0;
	}
	
	#so_03 .blockText {
		background: linear-gradient(135deg,rgba(240, 56, 0, 0.66) 20%,rgba(123, 12, 0, 0.77) 45%);
		color: rgb(255,255,255);
	}
	
	#so_04 .blockText {
		background:radial-gradient(circle at 0 0, rgba(38, 133, 106, 0.46) 40%, rgba(105, 181, 13, 0.57) 80%);
		color:rgb(255,255,255);
	}
	
	#so_05 .blockText {
		background:radial-gradient(circle at 0 0, rgba(255, 0, 60, 0.6) 20%, rgba(213, 6, 6, 0.7) 80%);
		color:rgb(255,255,255);
	}
	
	.so_06So .pHoneStrat .caffeGlassGlobal {
		translate:-130px -130px; scale:1; z-index:2;
	}
	
	.box3d.redmi3d .theRedmi.poseSmart {
		transform:rotateX(68deg) rotateZ(-7deg) rotateY(0deg) scale3d(.75,.75,.75) translate3d(0dvw,-42dvh,-48dvw);
		box-shadow: 2px 8px 11px rgba(0, 0, 0, 0.67);
	}
	
	.backFront {
		position:absolute; box-sizing:border-box; top:1px; left:0; height:calc(100% - 2px); width:calc(100% - 2px); 
		transform-style:preserve-3d; transform:translate3d(0px,0px,-1px); background:rgb(113, 113, 113); border-radius:30px;
	}
	
	.forSite {
		width:324px; height:604px;
	}

@media only screen and (max-width: 500px ) {
    .blockText {width:100%;}
}


@media only screen and (max-width: 800px ) {
	.box3d.redmi3d .theRedmi.poseSmart {
		transform:rotateX(68deg) rotateZ(-7deg) rotateY(0deg) scale3d(.75,.75,.75) translate3d(-8dvw,-42dvh,-48dvw);
	}
}