/*
Theme Name: SiteOrigin Corp Child
Author: SiteOrigin
Author URI: https://siteorigin.com/
Theme URI: https://siteorigin.com/theme/corp
Description: SiteOrigin Corp Child Theme
Version: 1.0.0
Template: siteorigin-corp
Text Domain: siteorigin-corp
Domain Path: /languages/
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

/* Cuando entra en viewport */
.new-bounce-in-right, .new-bounce-in-left, .new-bounce-in-top {
    opacity: 0;   
}

.delay-2 {
	animation-delay: .15s;
}

.delay-5 {
	animation-delay: .3s;
}

/* 2. Cuando JS añade la clase, se dispara la animación */
.animate-active {   
    animation-duration: 2s !important;
    animation-timing-function: ease !important;
    animation-fill-mode: forwards !important;
}

/* 3. Definición de qué animación usa cada clase SOLO cuando está activa */
.new-bounce-in-right.animate-active {
    animation-name: bounce-in-right;
}

.new-bounce-in-left.animate-active {
    animation-name: bounce-in-left;
}

.new-bounce-in-top.animate-active {
	animation-name:bounce-in-top;
}

@keyframes bounce-in-right {
    0% {
      transform: translateX(2000px);
    }
	30% {
		opacity: 0;
	}
    60% {        
        transform: translateX(-30px);
    }
    80% { transform: translateX(10px); }
    100% { 
        opacity: 1;
        transform: translateX(0); 
    }
}

@keyframes bounce-in-left {
    0% {
       
        transform: translateX(-2000px);
    }
	30% {
		opacity: 0;
	}
    60% {
        transform: translateX(30px);
    }
    80% { transform: translateX(-10px); }
    100% { 
        opacity: 1;
        transform: translateX(0); 
    }
}

@keyframes bounce-in-top {
    0% {
        
        transform: translateY(2000px);
    }
	30% {
		opacity: 0;
	}
    60% {
        transform: translateY(-30px);
    }
    80% { transform: translateY(10px); }
    100% { 
        opacity: 1;
        transform: translateY(0); 
    }
}

body {
	max-width:100%;
	overflow-x: hidden;
	font-size:18px !important;
	line-height:25px !important;
}

.corp-container {
    max-width: 80% !important;
}

.site-header .site-branding img {
	max-width: 270px;
}

.main-navigation {
	display: flex;
    width: 100%;
	align-items: baseline;
}

.menu-primary-container {
	width: 100%;	
}

.main-navigation ul  {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 30px;
}

.main-navigation ul li {
	text-transform: none !important;
	font-size:18px !important;
	margin: 0 !important;
	text-align: center !important;
	position:relative;
}

#primary-menu > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-1 * (30px / 2)); /* la mitad del gap */
	top: 30%;
    transform: translateY(-50%);
    width: 2px;
    height: 100%;
    background-color: #b7b7b7;
}

.main-navigation .search-toggle {
	top:0;
}

.hero-home h1 {
	font-size:70px;
	font-weight:700;
	line-height: 80px;
}

.video-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* perfecto si lo usas como hero o fondo */
	display:block;
}


.hero-img .sow-image-container, .hero-img .so-widget-sow-image, .hex-right, .hex-left, .hex-dark, .liquid-biopsy-img .sow-image-container, .hero-video, .hero-video .video-bg, .page-hero-img .sow-image-container, .workflow .sow-image-container, .workflow .panel-grid-cell, .footer-img .sow-image-container {
	position:relative;	
}

.hero-img .sow-image-container:after {
	position: absolute;
	content:'';
	width: calc(100% + 30px);
    height: calc(100% + 30px);
    top: -5px;
    left: -10px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
}

.hero-video .video-bg:after {
	position: absolute;
	content:'';
	width: calc(100% + 30px);
    height: calc(100% + 30px);
    top: -5px;
    left: -10px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
}

.hero-img .so-widget-sow-image:after, .hero-video:after {
	position: absolute;
	content:'';
	width: 35%;
    height: auto;
	aspect-ratio: 307 / 331;
    bottom: 0px;
    left: -12%;
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	filter: invert(15%) sepia(100%) saturate(3005%) hue-rotate(209deg) brightness(94%) contrast(110%);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-2;
	transform: scale(0);
	animation-name: pop;
  	animation-duration: 1s;
	animation-delay: .7s;
	animation-fill-mode: forwards;
}

.hero-img .so-widget-sow-image:before, .hero-video:before {
	position: absolute;
	content:'';
	width: 30%;
    height: auto;
	aspect-ratio: 307 / 331;
    top: 0px;
    right: -10%;
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	filter: invert(15%) sepia(100%) saturate(3005%) hue-rotate(209deg) brightness(94%) contrast(110%);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-2;
	transform: scale(0);
	animation-name: pop;
  	animation-duration: 1s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

@keyframes pop  {
	0% {		
		transform: scale(0);
	}
	50% {		
		transform: scale(1.05);
	}
	70% { transform: scale(.9); }
	100% { transform: scale(1); }
}
 

.hero-img img, .hero-video video {
	-webkit-mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	z-index:1;
}

.hex-right .panel-grid-cell, .hex-left .panel-grid-cell, .hex-dark .panel-grid-cell {
	z-index:2;
}

.hex-right:after {
	position: absolute;
	content:'';
	width: 60%;
    height: 100%;	
    top: 0px;
    left: -15%;
	opacity:.4;
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Hex-Lines-Tex.svg");		
	background-repeat: repeat;
  	background-size: 317px 280px;
	z-index:0;
}

.hex-right:before {
	position: absolute;
	content:'';
	width: 60%;
    height: 100%;	
    top: 0px;
    left: -15%;
	background: #FFFFFF;
    background: radial-gradient(ellipse at left center, #ffffff00 0%, #ffffff 60%);
	z-index:1;
}

.hex-left:after {
	position: absolute;
	content:'';
	width: 60%;
    height: 100%;	
    top: 0px;
    right: -15%;
	opacity:.4;
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Hex-Lines-Tex.svg");		
	background-repeat: repeat;
  	background-size: 317px 280px;
	z-index:0;
}

.hex-left:before {
	position: absolute;
	content:'';
	width: 60%;
    height: 100%;	
    top: 0px;
    right: -15%;
	background: #FFFFFF;
    background: radial-gradient(ellipse at right center, #ffffff00 0%, #ffffff 60%);
	z-index:1;
}

.hex-right-grey:before {	
	background: #FFFFFF;
    background: radial-gradient(ellipse at left center, #f2f2f200 0%, #f2f2f2 60%);	
}

.hex-blue:after {
	filter: invert(100%);
}

.hex-blue:before {	
	background: #FFFFFF;
    background: radial-gradient(ellipse at left center, #0047bb00 0%, #0047bb 60%);	
}

.hex-dark:before {
	position: absolute;
	content:'';
	width: 100%;
    height: 50%;	
    bottom: 0px;
    right: 0;
	opacity:.4;
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Hex-Lines-Tex.svg");		
	background-repeat: repeat;
  	background-size: 317px 280px;
	z-index:0;
	filter: invert(100%);
}


.hex-dark:after {
	position: absolute;
	content:'';
	width: 100%;
    height: 50%;	
    bottom: 0px;
    right: 0;
	background: radial-gradient(ellipse at center bottom, #33333300 0%, #333333 60%);
}

.liquid-biopsy h2 {
	color:#0047bb;
	font-size:30px;
	line-height:35px;
	font-weight:700;
}

.liquid-biopsy-img .sow-image-container:before, .footer-img .sow-image-container:before  {
	position: absolute;
	content:'';
	width: 100%;
    height: 100%;
	top: -40px;
    right: -40px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(100%);
	transform: scale(0);
	animation-name: pop;
  	animation-duration: 1s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

.liquid-biopsy-img .sow-image-container:after, .footer-img .sow-image-container:after {
	position: absolute;
	content:'';
	width: calc(100% + 30px);
    height: calc(100% + 30px);
	top: -60px;
    right: -60px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-2;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
	transform: scale(0);
	animation-name: pop;
  	animation-duration: 1s;
	animation-delay: .2s;
	animation-fill-mode: forwards;
}

.footer-img img {
	-webkit-mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-repeat: no-repeat;
	mask-position: center;	
}

.new-header {
	justify-content: space-between;
    display: flex;
    align-items: center;
}

.new-header .read-news {
	background:#0047bb;
	color: white;
	padding:10px 15px;
	border-radius:10px;
	cursor:pointer;
	transition: .3s;
}

.new-header .read-news:hover {
	background:#ff4c02;
}

.bio-news-grid {
	display: grid;
	grid-template-areas: 
		"featured featured"
		"secondary1 secondary2";
	grid-gap: 30px;
}

.news-featured { 
	grid-area: featured;
	display: flex;
	gap: 0px;
	background:#f2f2f2;
	padding:0;
	border-radius:20px;
	align-items: center;
	position: relative;
}

.news-secondary {
	display: flex;
	gap: 20px;
	background:#f2f2f2;
	padding:0px; 
	border-radius:20px;
	align-items: center;
	position: relative;
}

.new-read {
	background:#ff4c02;
	border-radius:10px;
	color: white;
	font-weight:700;
	padding:10px 20px;
	float: right;
    margin-top: 20px;
	transition: .3s;
}

.new-read:hover {
	color: white;
	background:#0047bb;
}

.new-read:visited {
	color: white;
	background:#333333;
}

.normal-news {
	position: absolute;
	bottom:0;
	right:0;
}

.news-image {
	height:400px; 	
	aspect-ratio: 3/2;
	flex-grow: 1;
}

.news-secondary .news-image {
	height:250px;		
}

.news-image img {
	width:auto; 
	height:100%; 
	border-radius:20px;
	object-fit:cover;
}

.news-content { 
	flex-grow: 2;
	padding:30px 50px;
}

.news-secondary .news-content {
	padding:20px;
}

.news-content h3, .news-content h4 {
	margin:20px 0 10px;
	max-height: 52px;
    overflow: hidden;
}

.news-content .news-date {
	background: white;
	border-radius:10px;
	padding:10px;
	white-space: nowrap;
    display: inline-block;
}

.news-readmore {
	display:inline-block;
	padding:8px 12px;
	background:#ff6600;
	color:#fff;
	text-decoration:none;
	border-radius:4px;
	margin-top:10px;
}

.page-hero-img img {
	-webkit-mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Page-Hero.svg);
	mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Page-Hero.svg);
	mask-repeat: no-repeat;
	mask-position: right center;
	mask-size:cover;
	z-index:1;
	min-height:550px;
	width:auto;
	object-fit: cover;
}

.mask-rota img {
	-webkit-mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Page-Hero-R.svg) !important;
	mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Page-Hero-R.svg) !important;	
	mask-position: left center;
}

.page-hero-img .sow-image-container:after {
	position: absolute;
	content:'';
	width: auto;
    height: calc(100% + 30px);
    top: -15px;
    right: -40px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
	aspect-ratio: 1 / 1;
}

.mask-rota .sow-image-container:after {
	left: -40px;
}

.work-number p {
	font-size:45px;
	color: white;
	text-align:center;
	position:absolute;
	font-weight:700;
	left: 30px;
    top: 40px;
    z-index: 2;
}

.work-number p:after {
	position: absolute;
	content:'';
	width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
}

.workflow img {
	-webkit-mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-image: url(https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	text-align:center;
	margin: 0 auto;
}

.workflow .sow-image-container:before {
	position: absolute;
	content:'';
	width: calc(100% + 15px);
    height: calc(100% + 15px);
    top: -7px;
    left: -7px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(100%);
}

.workflow .sow-image-container:after {
	position: absolute;
	content:'';
	width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-2;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
}

.steps .panel-grid-cell {
    background-color: #f2f2f2;
    border-radius: 20px 20px 20px 20px;
}

.steps p {
	display:flex;
}

.steps strong {
	position: relative;
    font-size: 45px;
    color: white;
    font-weight: 700;
    z-index: 2;
    flex: 0 0 60px;
    text-align: center;
	margin-right:10px;
	margin-top: 15px;
}

.steps strong:after {
	position: absolute;
	content:'';
	width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
	top: -15px;
    left: 50%;
    transform: translateX(-50%);	
	background-image: url("https://internetmarketingraleighnc.com/wp-content/uploads/2025/12/BioFluidica-Website-home.svg"); 	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:-1;
	filter: invert(40%) sepia(35%) saturate(7185%) hue-rotate(357deg) brightness(102%) contrast(104%);
}

.hex-blue, .hex-dark {
	margin-right: -14%;
    margin-left: -14%;
	padding:80px 14% !important;
}

.hex-blue h2 {
	margin-top:0;
}

.hex-blue h2, .hex-blue p {
	color: white !important;
}

.package .panel-grid-cell {
	position: relative;
}

.package .panel-grid-cell:after {
	content:'';
	position:absolute;
	width:100%;
	left:0;
	bottom:0;
	height:65%;
	border-radius:20px;
	background:#f2f2f2;
	z-index:-3;
}