/*
 Theme Name:   MEV 35
 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{
	--mev-pale-yellow:#FFFEF2;
	--mev-lt-green:#9FCEB4;
	--mev-dk-green:#369C64;
	--mev-blue:#27425D;
	--mev-orange:#D29D3B;
	--main-corner-size: 3.9vw;
}

.bricks-button {
	--before-height: 0%;
	position:relative;
	z-index:1;
	overflow:hidden;
	cursor:pointer;
	min-width:290px;
	
    clip-path: polygon(
        100% 0%,
        100% 52.3%,
        92.3% 100%,
        0% 100%,
        0% 47.7%,
        8.1% 0%
    );
}

.bricks-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--mev-orange);
    transition: height 0.3s ease-in-out;
    z-index: -1;
}

.bricks-button:hover::before {
    height: 100%;
}

.bricks-button::before {
    height: var(--before-height);
}


.header-cta{
	position:relative;
	cursor:pointer;
}

.hero-grid-main-copy, .hero-grid-main-logo{
	opacity:0;
}

.header-cta:hover:after{
	content:"";
	width:100%;
	height:5px;
	background:var(--mev-orange);
	position:absolute;
	bottom:-10px;
	left:0;
}

.footer-list .title{
	position:relative;
}

.footer-list .title:hover:after{
	content:"";
	width:100%;
	height:5px;
	background:var(--mev-orange);
	position:absolute;
	bottom:-10px;
	left:0;
}

.tl-corner,
.tr-corner,
.bl-corner,
.br-corner {
    
}

.tl-corner::before,
.tr-corner::before,
.bl-corner::after,
.br-corner::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
	z-index:3;
}

.tl-corner::before {
    top: 0; left: 0;
    border-width: var(--main-corner-size) var(--main-corner-size) 0 0;
    border-color: var(--corner-tl) transparent transparent transparent;
}
.tr-corner::before {
    top: 0; right: 0;
    border-width: var(--main-corner-size) 0 0 var(--main-corner-size);
    border-color: var(--corner-tr) transparent transparent transparent;
}

/* Use ::after for bottom corners */
.bl-corner::after {
    bottom: 0; left: 0;
    border-width: 0 0 var(--main-corner-size) var(--main-corner-size);
    border-color: transparent transparent transparent var(--corner-bl);
}
.br-corner::after {
    bottom: 0; right: 0;
    border-width: 0 0 var(--main-corner-size) var(--main-corner-size);
    border-color: transparent transparent var(--corner-br) transparent;
}

.mev-tl-yellow  { --corner-tl: var(--mev-pale-yellow); }
.mev-tl-green   { --corner-tl: var(--mev-lt-green); }
.mev-tl-orange  { --corner-tl: var(--mev-orange); }
.mev-br-blue    { --corner-br: var(--mev-blue); }
.mev-br-dk-green { --corner-br: var(--mev-dk-green); }

.mev-logo-wrapper{
	max-width:230px;
	cursor:pointer;
}

.mev-logo-2{
	position:absolute;
	left:0;
	top:66px;
	transition:top .2s ease-out;
	opacity:1;	
}

.mev-logo-wrapper:hover .mev-logo-2 {
    top: 0px;
}

.mev-logo-2-debug {
	clip-path: polygon(
	        20% 0%, 
	        100% 0%, 
	        100% 76.8%, 
	        78.6% 100%,
	        0% 100%,
	        0% 24%
	    );
    width:69px;
	height:100%;
}

.hero-grid-block{
	position:relative;
	overflow:hidden;
}

.hero-grid-block-1{
	--corner-tl:var(--mev-pale-yellow);
}

.hero-grid-block-3{
	--corner-tl:var(--mev-orange);
	--corner-br:var(--mev-dk-green);
}

.hero-grid-block-4{
	--corner-br:var(--mev-orange);
}

.hero-grid-block-7{
	--corner-tl:var(--mev-dk-green);
	--corner-br:var(--mev-pale-yellow);
}


/* home page styles */
.hero-grid-wrapper{
	aspect-ratio:680/698;
	width:49%;
}

.header-grid-icon{
	width:70%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

@keyframes scale-it-up {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes bump-up {
	0%   { transform: translate(-50%, -50%); }
	50%  { transform: translate(-50%, calc(-50% + 10px)); }
	100% { transform: translate(-50%, -50%); }
}

@keyframes bump-down {
	0%   { transform: translate(-50%, -50%); }
	50%  { transform: translate(-50%, calc(-50% - 10px)); }
	100% { transform: translate(-50%, -50%); }
}

.bump-top:hover .header-grid-icon{
	animation: bump-up 0.6s ease-in-out;
}
.bump-bottom:hover .header-grid-icon{
	animation: bump-down 0.6s ease-in-out;
}
.mev-scale-up:hover {
	transform-origin:center;
	animation: scale-it-up 0.9s ease-in-out;
}

@keyframes loop-from-top {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(140%); }
    51%  { transform: translateY(-140%); }
    100% { transform: translateY(0); }
}

.hero-grid-block-3:hover img {
    animation: loop-from-top 0.6s ease-in-out;
}

.big-bottom-corner:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
	z-index:3;
    bottom: 0; 
	right: 0;
    border-width: 0 0 10vw 10vw;
    border-color: transparent transparent var(--mev-pale-yellow) transparent;
}

.big-top-corner:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
	z-index:3;
    top: 0; 
	left: 0;
    border-width: 10vw 10vw 0 0;
    border-color: var(--mev-orange) transparent transparent transparent;
}

@media screen and (max-width:1000px){
	:root {
		--main-corner-size: 3.1vw;
	}
}

@media screen and (max-width:768px){
	.bricks-button{
		min-width:210px;
	}
	:root {
		--main-corner-size: 7.5vw;
	}
	.footer-list{
		display:flex;
		column-gap:3rem;
		justify-content:center;
		align-items:center;
	}
}