/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root{
	--clear-dark-blue:#00323D;
	--clear-slate-blue:#6B98A7;
	--clear-light-blue: #B3E9F6;
	--clear-red:#F45525;
	--shift-text-distance:100px;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
	overflow-x:hidden;
}

.red-serif-span{
	color:var(--clear-red);
	font-family: "IBM Plex Serif", serif;
	font-weight: 600;
	font-style:italic;
}

.blue-serif-span{
	color:var(--clear-light-blue);
	font-family: "IBM Plex Serif", serif;
	font-weight: 600;
	font-style:italic;
}

.home-hero-background-image{
	width:90vw;
	height:90vh;
	padding:0px 0px 10vh 0px;
	margin:0;
	position:absolute;
	z-index:-1;
	top:0;
	background-position:50% -20%;
	animation: 3s cubic-bezier(0.22, 1, 0.36, 1) panBackground forwards;
}

.home-hero-background-image::after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:10%;
	background:linear-gradient(to top, var(--clear-dark-blue) 0%, rgba(0,50,61,0) 100%);
	pointer-events:none;
	z-index:0;
}

.clear-north-hero-header{
	animation: 3s cubic-bezier(0.22, 1, 0.36, 1) shiftTextUp forwards;
}

@keyframes shiftTextUp {
	from { transform: translateY(var(--shift-text-distance)); }
	to   { transform: translateY(0px); }
}


@keyframes panBackground {
	from { background-position: 50% 20%; }
	to   { background-position: 50% 0%; }
}


.hero-top-gradient{
	position:absolute;
	height:200%;
	width:100%;
	background:linear-gradient(to top, rgba(0,50,61,0) 0%, rgba(0,50,61,.9) 20%, var(--clear-dark-blue) 100%);
	animation: 3s cubic-bezier(0.22, 1, 0.36, 1) fadeInUp forwards;
}

@keyframes fadeInUp {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-200vh);
  }
}


p a{
	color:var(--clear-light-blue);
	font-weight:700;
}

p a:hover{
	text-decoration:underline;
}

.red-plus-square:before{
	content:"";
	position:absolute;
	width:100%;
	left:0;
	top:50%;
	height:2px;
	background:var(--clear-red);
}

.red-plus-square:after{
	content:"";
	position:absolute;
	width:100%;
	left:0;
	top:50%;
	height:2px;
	background:var(--clear-red);
	transform-origin:center center;
	transform:rotate(90deg);
}

.red-line{
	height:1px;
	width:100%;
	background:var(--clear-red);
}

.clear-north-prefooter{
	position:relative;
	z-index:1;
}

.clear-north-prefooter:before{
	content:"";
	background:url('../../uploads/2026/09/corner-gradient.png');
	background-repeat:no-repeat;
	background-position:right top;
	background-size:contain;
	position:absolute;
	width:15%;
	left:0;
	bottom:0;
	height:auto;
	z-index:1;
	aspect-ratio:55/100;
	transform:scaleX(-1);
	z-index:-1;
}

.clear-north-prefooter:after{
	content:"";
	background:url('../../uploads/2026/09/corner-gradient.png');
	background-repeat:no-repeat;
	background-position:right top;
	background-size:contain;
	position:absolute;
	width:15%;
	right:0;
	bottom:0;
	height:auto;
	z-index:1;
	aspect-ratio:55/100;
	z-index:-1;
}

@media (max-width: 768px){
	:root{
		--shift-text-distance: 50px;
	}
}