html { scroll-behavior: smooth; }

.hide { display: none; }

body {  margin: 0; }

p, h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; text-align: center; }
p { color:#3C3C3C ; }
h1 { color:#005d88 ; }
h2 { color:#58c2db ; }

p { font-size: 16px; padding-right: 10%; padding-left: 10%; margin-top: 0; margin-bottom: 10px; }
h1 { font-size: 33px; line-height: 33px; }
h2 { font-size: 15px; }
h3 { font-size: 50px; font-weight: 600; color: #FFFFFF; }
h4 { font-size: 30px; font-weight: 100; line-height: 100%; color: #005d88; }
h1, h2, h3, h4 { margin:0; padding:0; }

.nav-bar { display: none; position: fixed; width: 100%; height: 90px; padding-top: 18px; margin-top: 0px; background: #FFFFFF; z-index: 2; }
.logo { text-align: center; }
.hero-image { text-align: center; width: 100%; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }
.arrow { width: 100%; bottom: 0; position: absolute; text-align: center; }
.arrow img { width: 35px; padding: 0px 0px 15px 0px; }
.statement { text-align: center; width: 100%; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }

.intro { text-align: center; width: 100%; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }
.section { position: relative; width: 100%; min-height: 100vh; background: #FFFFFF; scroll-snap-align: start; }
.section4 { padding-top: 68px; }
.section4 .row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; padding-left: 20px; padding-right: 20px; z-index: 1; position: relative; }
.section4 .col { position: relative; } 
.section4 .col img { width: 100%; display: block; } 
.section4 .col a { text-decoration: none; color: #fff; background: #B0B7BA; padding: 0.5rem 0.75rem; border-radius: 2px; display: inline-block; }
.section4 .col .bloc { background: #ffffff00; z-index: 10; position: absolute; border: 0 solid #fdeee6; box-sizing: border-box; transition: all 0.4s ease-in-out; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.overlay { position: absolute; left: 50%; top: 10px; transform: translate(-50%, 0); width: 37vw; display: grid; grid-template-columns: 1fr; z-index: 20; height: calc(100% - 20px); width: calc(100% - 20px); top: 10px;  }
.overlay h4 { color: #B0B7BA; font-weight: 600; text-transform: uppercase; align-self: end; transition: all 0.8s ease-in-out; opacity: 0; }
.overlay p { padding: 0; transition: all 0.4s ease-in-out; opacity: 0; }
.overlay p.opensea { font-size: 0.75rem; align-self: end; transition: all 1.0s ease-in-out; opacity: 0; }
.OpenSea { align-self: end; }

.image-grid { width: 100%; }
.number { width: 50%; height: auto; background-color: #1d3646; display: none; top: 0px; left: 0px; position: absolute; z-index: 10; }

span:hover + .number { display: block; }
#col-0001 { background-color: 000000; }
#logo-style { width: 250px; height: auto; text-align: center; }
#hero-image { position: relative; width: 65%; height: auto; }
#arrow { width: 35px; padding: 0px 0px 15px 0px; }
.section5 { padding: 3rem 0; background: #fff; }
.external img { height: 50px; width: auto; }


/*Tablet View*/
@media (max-width: 641px) {
    .section4 .col .bloc { left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
}

@media (min-width: 768px) {
    .section4 .row { grid-template-columns: 1fr 1fr; }	
	.image-griddouble { width: 50%; float: left; }	
	h1 { font-size: 50px; line-height: 50px; }	
	p { font-size: 18px; line-height: 26px; font-family: 'Poppins', sans-serif; margin-bottom: 20px; padding-right: 25%; padding-left: 25%; }	
	h2 { font-size: 18px; }	
    .section4 .col a { padding: 1rem; }
    .overlay { top: 12px; grid-template-rows: 2fr 1fr 2fr; height: calc(100% - 24px); width: calc(100% - 24px); }
}


@media (min-width: 1024px) {
    .section4 .row { grid-template-columns: 1fr 1fr 1fr; }		
	.image-griddouble { width: 50; float: left; }	
	h1 { font-size: 55px; line-height: 55px; }	
	p { font-size: 20px; line-height: 28px; font-family: 'Poppins', sans-serif; margin-bottom: 20px; padding-right: 25%; padding-left: 25%; }	
	h2 { font-size: 20px; }	
    .overlay { top: 16px; grid-template-rows: 2fr 1fr 0.5fr; height: calc(100% - 32px); width: calc(100% - 32px); }
    .section4 .col a { padding: 0.5rem 1rem; }
}

@media (min-width: 1234px) {
    .section4 .row { grid-template-columns: 1fr 1fr 1fr 1fr; }	
}

/* Text fade in & grow */
.fademe { opacity: 0; scale: 0.95; transition: all 1.0s ease-in-out; }
.inView { opacity: 1; scale: 1; }

@media(hover: hover) {
    .overlay { grid-template-rows: 1.75fr 1fr 1fr; }
    .section4 .col:hover .bloc { background: #ffffffe6; z-index: 10; position: absolute; }
    .section4 .col:hover h4, .section4 .col:hover p, .section4 .col:hover p.opensea { transform: translateY(0px); opacity: 1; }
    .overlay h4 { transform: translateY(-5px); font-size: clamp(1rem, 2rem + 1.1719vw, 3rem); }
    .overlay p { transform: translateY(5px); font-size: clamp(0.6rem, 1rem + 0.25vw, 1rem); }
    .overlay p.opensea { transform: translateY(20px); }
}

@media(hover: none) {
    /*.section4 .col:active .bloc { background: #ffffffe6; z-index: 10; position: absolute; }
    .section4 .col:active h4, .section4 .col:active p, .section4 .col:active p.opensea { transform: translateY(0px); opacity: 1; }*/
    .section4 .col.hover_effect .bloc { background: #ffffffe6; z-index: 10; position: absolute; }
    .section4 .col.hover_effect h4, .section4 .col.hover_effect p, .section4 .col.hover_effect p.opensea { opacity: 1; }
    .overlay h4 { font-size: 2rem; }
    .overlay p { font-size: 2rem; }
}