/* ==========================================================================
   MAIN CSS FOR RAIC LABS
   ========================================================================== */

/**
*
* CSS: Mostly raiclabs Main CSS
* Author: Gareth Davies
* Structure:
* 
*	- CSS Variables
*	- Global
*		- Tags
* 		- Classes
*		- ID
*	- Homepage
*	- Content
*	- Overrides
*		-breakpoints
*
* George Maxwell : You... It's you! But you're dead!
* Edward Lionheart : No. Another critical miscalculation on you part. 
*                    I am well. It is you who are dead.
*
* Theatre of Blood - 1973
*
**/

/* ==========================================================================
   CSS Variables
   ========================================================================== */

   :root {
    --raic-yellow: #FFDD00;
    --raic-graphite: #1F2833;
    --raic-cyan: #66FFFF;
    --raic-teal: #44AA99;
    --raic-black: #0F0F10;
    --raic-white: #FFFFFF;
    --raic-gray: #EFEFEF;

    --raic-rasin: #231F20;

    --raic-green:#4ABF81;
    --raic-ink:#1E2733;
    --raic-orange:orange;

    --raic-font: "Open Sans", sans-serif;
    --raic-font-size: 1.8rem;
    --raic-font-weight: 400;
    --raic-line-height: 160%;
    --raic-letter-spacing: 0.1rem;


    --raic-heading-font: "roboto", sans-serif;

    --raic-padding: 1rem;
    --raic-spacing: 2.7rem;
    --raic-margin: 0rem;
    --raic-border-radius: 0.25rem;

    --raic-section-padding:7rem;
    --raic-container-max-width: 110rem;
}

.alignright img,
.alignleft img 
{
  display:block;
  margin:0 0 3rem 0;
  width:100%;
  height:auto;
}

.alignright
{
  display:inline-block;
  width:25%;
  float:right;
  margin:10rem;
  position:relative;
  top:5rem;
  left:5rem;
}

.alignleft
{
  display:inline-block;
  width:25%;
  float:left;
  margin:10rem;
  position:relative;
  top:5rem;
  left:3rem;
}




/* ==========================================================================
   Global
   ========================================================================== */


/* Tags */
html {
    font-size: 10px;
}

body {
    font-family: var(--raic-font);
    font-size: var(--raic-font-size);
    font-weight: var(--raic-font-weight);
    margin: 0;
    padding: 0;
    background-color: var(--raic-white);
    color: var(--raic-white);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--raic-heading-font);
    font-weight: 500;
    margin-top:0rem;
    margin-bottom:var(--raic-spacing);
}

h1 {
    font-size: 4.8rem;
    line-height: 120%;
}

h2 {
    font-size: 3.2rem;
    line-height: 140%;
}

h2.col-title
{
  font-size: 4.2rem!important;
  margin-top:0;
}

h3 {
    font-size: 2.4rem;
    line-height: 160%;
    margin:1rem 0;
}

.image-aside h3 {
  font-size:3rem;
}

h4 {
    font-size: 2rem;
    line-height: 160%;
}

a {
    text-decoration:none;
}

em {
    color: var(--raic-yellow);
}

.bg-light em {
    color: var(--raic-slate);
    font-style:normal;
    font-size:1.6rem;
}

.bg-black a {
  color:var(--raic-yellow);
}

p {
    line-height: var(--raic-line-height);
    letter-spacing: var(--raic-letter-spacing);
    margin-top:0;
    font-size:1.8rem;
}

p:empty { display:none; }

.post p {
    color:#303030!important;
}

.post .summary
{
    background:var(--raic-gray);
    border:1px solid #A5A5A5;
    padding:2rem;
    margin-bottom:4rem;
}

.post .summary li 
{
    margin:1rem 0;
}

/* Classes */
.container {
    max-width: var(--raic-container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.inline-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.inline-list li {
    display: inline;
}

.responsive,
.img-responsive{
    max-width: 100%;
    height: auto;
}

.size-full,
.img-full
{
  width: 100%;
    height: auto;
}

.img-full
{
  margin:3rem 0;
}

.img-breakout
{
  width: 120%;
  aspect-ratio: 16 / 9;
  object-fit:cover;
  margin-left:-10%
}


.img-fullscreen
{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    object-fit:cover;
    margin-left:calc(((100vw - 110rem) / 2 ) * -1)  
}

.image-aside.fullwidth .copy
{
    margin:0;
    height:70rem;
    background:var(--raid-white);
    
}

.sec-padding.fullwidth
{
    margin:0!important;
    padding:0!important;
}


.image-aside.fullwidth .text
{
    display: table-cell;
  vertical-align: middle;
    height:70rem;
}

.image-aside.fullwidth h1
{
    font-size:2.4rem;
}

.image-aside.fullwidth 
{
    margin:0;
}

.image-aside .fullwidth
{
    width:50vw!important;
    height:70rem;
    object-fit:cover;
    aspect-ratio: 4 / 3;
    position:absolute;
    left:0;
    z-index:-1
}

.flip.image-aside .fullwidth
{
    left:auto;
    right:-1.6rem;
}

.container section.no-pad
{
    margin:0!important;
    margin-bottom:0!important;
}

.fill {
    width: 100%;
    height: auto;
}

.fill-1-1 {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit:cover;
}

.fill-2-1 {
    width: 100%;
    aspect-ratio: 91 / 59;
    object-fit:cover;
}

.fill-13-1 {
    width: 100%;
    aspect-ratio: 1.3 / 1;
    object-fit:cover;
}

.card-position
{
    min-height:5rem;
}

.fill-profile{
    width: 100%;
    aspect-ratio: 1 / 1.5;
    object-fit:cover;
}

.fill-free
{
  max-width:125%;
  margin-left:-25%;
  margin-bottom:-25%;
}

.page-id-811 .fill-free
{
  margin-top:-5%;
}

.page-id-671  .fill-free
{
  margin-top:-8%;
}

.fill-icon {
    width:20rem;
}

.category-text
{
    text-transform:uppercase;
    display:block;
    min-height:2rem;
    font-size:1.1rem;
  letter-spacing:3px;
  color:var(--raic-yellow)!important;
}

.card-title a
{
  font-weight:300;
  color:var(--raic-white)!important;
}


.sec-padding.image-aside
{
  padding: var(--raic-section-padding) 0;
}

.sec-padding.image-aside:last-child
{
  padding-bottom: 0;
}

.sec-padding.image-aside:first-child
{
  padding-top: 0;
}

.image-aside .copy {
  padding:0 4rem;
}

.image-aside .copy h3
{
  margin:0;
  margin-bottom:2rem;
}

.stat {
  text-align:center;
}

.stat h3 {
  font-size:7rem;
  padding:4rem;
}

.card {
    background: #0f0f10;
    z-index:11;
    color:#fff;
    margin:0;
    padding:2.5rem;
    margin-top:-.5rem;
   min-height:20.5rem;
}

.download-card
{
      min-height:11.5rem; 
}

.download-card .card-title
{
    min-height:8rem;
}

.card-short
{
    
   min-height:12.5rem;
}

.card-position
{
    font-size:1.4rem;
}


.card img {
    margin:0;
    padding:0;
}

.card a{
    color:var(--raic-yellow);
}

.grid
{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--raic-spacing);
  grid-column: span 12;
}

.grid .span-1 {
    grid-column: span 1;
}

.grid .span-2 {
    grid-column: span 2;
}

.grid .span-3 {
    grid-column: span 3;
}

.grid .span-4 {
    grid-column: span 4;
}

.grid .span-5 {
    grid-column: span 5;
}

.grid .span-6 {
    grid-column: span 6;
}

.grid .span-7 {
    grid-column: span 7;
}

.grid .span-8 {
    grid-column: span 8;
}

.grid .span-9 {
    grid-column: span 9;
}

.grid .span-10 {
    grid-column: span 10;
}

.grid .span-11 {
    grid-column: span 11;
}

.grid .span-12 {
    grid-column: span 12;
}

.boxes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap:var(--raic-spacing);
}

.boxes .box {
    grid-column: span 3;
    border:0.4rem solid var(--raic-gray);
    padding:2rem;
    text-align:center;
}

.box .stat{
    font-size: 4rem;
    font-weight: 600;
    font-family: var(--raic-heading-font);
}

.box p 
{
    font-size:1.4rem;
    margin:.5rem;
    line-height:160%;
}

.post p {
    padding:1rem 1rem;
}

.highlights {
    grid-auto-rows: 1fr;
}

.highlights > div {
    padding:1rem;
    background:var(--raic-white);
}

.highlights h3 {
    margin-bottom:0rem;
}

.industries {
    grid-auto-rows: 1fr;
}

.auto-row {
  grid-auto-rows: 1fr;
}

.industries > div {
    color:var(--raic-white);
    background-color:var(--raic-graphite);
    padding:2rem;
    text-align:center;
    font-weight:200;
    background-blend-mode: overlay;
    background-image:url(img/background.png);
    background-size: cover;
}

.industries h3 {
    margin-bottom:0rem;
    color:var(--raic-yellow);
    font-weight:200;
}

.industries a {
    color:var(--raic-yellow);
    font-weight:200;
}

.services {
    grid-auto-rows: 1fr;
    padding:0;
}

.services > div {
    padding:0rem;
    background:var(--raic-white);
    border-radius:1rem;
    overflow:hidden;
}

.services h3 {
    margin:0rem;
    background:#ccc;
    padding:1rem;
    font-size:3.2rem;
    position:relative;
}

.services h3::after {
    content: " ";
    display:block;
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom:0;
    right:1rem;
    background-image: url("img/raic-icon-isolated.svg");
    background-size:auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
}
.services p {
    margin:0rem;
    padding:2rem;
}

.services > div > a {
    display:inline-block;
    margin:0 2rem 2rem 2rem;
}

.bg-dark {
    color: var(--raic-white);
    background-color: var(--raic-graphite);
}

.container .bg-dark {
  background-color: transparent;
}

.bg-dark::after {
    background-color: var(--raic-graphite);
    background-image:url('/wp-content/themes/RAICLabsV2/img/background.png');
    background-blend-mode: overlay;
}

.bg-dark a {
  color:var(--rai-yellow)!important;
}

.bg-light {
    color: var(--raic-black);
}

.bg-light::after {
}

.bg-medium {
    color: var(--raic-black);
}

.bg-medium::after {
    background-color: var(--raic-gray);
}

.bg-black { 
    color: var(--raic-white);
}

.container .bg-medium
{
    margin-bottom:4rem!important;
}

.bg-black::after {
    background-color: var(--raic-black);
}

.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4, .bg-black h5, .bg-black h6 {
    color: var(--raic-yellow);
}

.bg-green {
    background:var(--raic-green)!important;
    color:var(--raic-white);
}

.bg-ink {
    background:var(--raic-ink)!important;
    color:var(--raic-white);
}

.bg-rasin {
    background:var(--raic-rasin)!important;
    color:var(--raic-white);
}

.bg-rasin a {
    color:var(--raic-yellow);
}

.bg-rasin a.internal-link::after {
    background-image: url("img/arrow-yellow.svg");
}

.bg-orange {
    background:var(--raic-orange)!important;
    color:var(--raic-white);
}

.button,
.bg-dark a.button {
    display: inline-block;
    padding: 1.5rem 2.5rem;
    border: none;
    border-radius: var(--raic-border-radius);
    background-color: var(--raic-yellow);
    color: var(--raic-graphite)!important;
    text-transform: lowercase;
}

#banner .button {
  margin-top:3rem;
}

.image-aside .button {
  margin-top:3rem;
}

.internal-link {
    font-size:1.6rem;
    color: var(--raic-black);
    font-weight:600;
    padding-right:2rem;
    position:relative;
    display:inline-block;
    text-transform:capitalize;
}

.internal-link::after {
    content: " ";
    display:block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top:4px;
    right:0;
    z-index:999;
    background-image: url("img/arrow.svg");
    background-size:auto;
    background-repeat: no-repeat;
    background-position: center;
}

.right {
    float:right;
  margin-top:3rem;
}


.alternate-flow:nth-child(odd),
.flip
{
  direction: rtl;
  text-align:left;
}

.alternate-flow *,
.flip *
{
  direction: ltr;
}

.small {
    font-size:1.6rem;
}

.center {
    text-align:center;
}

.logo-list img {
    width: 12rem;
    height:6rem;
    object-fit:cover;
    margin: 1rem;
}

.quote,
.quote .copy {
  font-size:2rem;
  font-weight:100;
}

.quotes .quote
{
  display:none
}

.quotes .active {
  display:grid;
}

.quote-active li {
  color:var(--raic-gray);
  opacity:0.3;
  width:100%;
  font-size:4rem;
  margin:1rem;
}

.quote-active li.selected
{
  opacity:1;
}

.cite {
  font-size:1.4rem;
  font-weight:100;
  color:var(--raic-yellow);
}

.testimonial
{
    margin:2rem 0;
    padding:2rem;
    border-left:0.6rem solid var(--raic-yellow);
    
}

.caption {
    font-size:1.2rem;
    margin-top:-3rem;
    margin-left:0rem;
}


.relative
{
  position:relative;
}

.half-img {
  width:45%;
  height:100%;
  position:absolute;
  top:0;left:0;
  background-size:cover;
  background-position:center center;
}

.blog-main h2 {
    border-left:2px solid var(--raic-yellow);
        padding-left:1rem;
}

section:has(.hide-section)
{
  display:none;
}

/* ID */

header {
    padding: var(--raic-padding) 0;
    margin: var(--raic-margin) 0;
    position:relative;
	background-size:cover;
}

section {
    padding: var(--raic-section-padding) 0;
    margin: var(--raic-margin);
    position:relative!important;
}

section.center {
  text-align:center;
}

.sec-padding
{
  padding: 2rem 0;
}

h2.full {
  grid-column: span 12!important;
  text-align:center!important;
  font-size:6rem;
}


.container section {
  margin-top: var(--raic-section-padding);
}

.bg-dark + .bg-medium,
.bg-medium + .bg-dark
{
  margin:-2.7rem 0 !important;
}

.industries .icon 
{
  max-width:10rem;
}




section::after {
    content: '';
    position: absolute;
    top:0;
    width: 100vw;
    height: 100%;
    left:50%;
    transform:translateX(-50%);
    background-size: cover ;
    background-repeat: no-repeat;
    z-index:-1;
}



.image-aside img.fill-cover {
  width:250%;
  margin:0 -62.5% -12.5% 0;
  aspect-ratio: 1 / 1;
  object-fit:cover;
}

.flip.image-aside img.fill-cover {
  width:250%;
  margin:-12.5% -62.5% 0 0;
}

body {
  
  overflow-x:hidden;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.top-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 0;
    position:relative;
    z-index:99;
    margin-bottom:-11.3rem;
}

.top-nav .logo img {
    width: 22rem; 
    line-height:0;
}

.top-nav ul {
    display: inline-block;
}

.top-nav ul ul {
    display: none;
}

.top-nav li  {
    position:relative;
}

.top-nav li:hover ul
{
  display: block!important;
  position:absolute!important;
  top:2.5rem!important;
  left:0;
  width:20rem;
  background:var(--raic-graphite);
  padding:1rem 0;
  z-index:999;
}

.top-nav li:hover ul li {
  display:block;
  margin:1rem 0;
}

.top-nav ul ul li a
{
  color:#fff!important;
}

.top-nav ul ul li:last-child a {
    display: inline;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color:#fff!important;
    text-transform:none;
}

.top-nav ul a {
    color: inherit;
    font-size: inherit;
    line-height: 1.6rem;
    margin: 0 1.5rem;
}

.top-nav ul li:last-child a {
    display: inline-block;
    padding: 1.5rem 2.5rem;
    border: none;
    border-radius: var(--raic-border-radius);
    background-color: var(--raic-yellow);
    color: var(--raic-graphite)!important;
    text-transform: lowercase;
}

#banner {
  padding-top:9.2rem;
  position:relative;
  min-height:25rem;
}

#banner .icon {
    position:absolute;
    width:22rem;
    bottom:-5rem;
    right:0;
}

#blog-banner {
    position:relative;
}

#blog-banner h1 {
    margin:20rem 0;
}

#blog-banner .icon {
    position:absolute;
    width:33rem;
    bottom:-5rem;
    right:0;
    opacity: 0.2;
}

.raiclabs-home #banner {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    margin-top:14.8rem;
    position:relative
}

.raiclabs-home #banner .copy {
    width:55%;
    margin-top:-2rem;
    padding-bottom:10rem;
	
}

header:has(.raiclabs-home #banner .landing)
{
	overflow:visible;
}

.raiclabs-home #banner .icon {
    position:absolute;
    width:43rem;
    bottom:-5rem;
    right:0;
}

.raiclabs-home #banner .landing {
    width:45%;
    margin-top:-2rem;
    padding-bottom:5rem;
	font-weight:100;
}

.raiclabs-home #banner .form {

    width:45%;
    right:0;
  margin-right:4rem;
	margin-bottom:-4rem;
	margin-top:-10rem;
	
}

header {
    overflow-y:hidden;
}

.breadcrumb {
    margin:2rem 0;
}

.breadcrumb a, .breadcrumb li {
    color: var(--raic-white);
    font-size: 1.6rem;
    font-weight: 600;
}

.breadcrumb li + li::before {
    content: "/";
    margin: 0 1rem;
}



.blog-image
{
    position: absolute;
    width:100%;
    height:100%;
    top:0;left:0;
    background-size: cover;
    background-position: center center;
    z-index:0;
    filter:grayscale(1);
}

.grayscale
{
  filter:contrast(1.1) brightness(1) grayscale(1);
}

.bar-header {
  border-left:1px solid var(--raic-yellow);
  padding-left:2rem;
}

.quote-flourish
{
  font-size:15rem;
  font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  display:block;
  color:var(--raic-yellow)!important;
  margin-bottom:-8rem;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */


.image-block
{
  position:relative;
}

.quote-bar
{
    border-left:2rem solid var(--raic-yellow);
    padding:2rem;
    margin:2rem 0;

}

.quote-bar .quote
{
    font-size:2.4rem;
    font-weight:100;
}

.quote-bar .small
{
    font-size:1.4rem;
    font-weight:100;
}

.grid.banner-split
{
   display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rem;
}

.grid.banner-split::after
{
  
}





/* ==========================================================================
   FOOTER
   ========================================================================== */

footer .logo {
  max-width:30rem;
}




footer ul.social-menu li {
	display: inline-block;
	padding:0 5px;
}


footer ul.social-menu li a {
	text-decoration: none;
	color: var(--raiclabs-white);
	display: inline-block;
	width:30px;
	height:30px;
	overflow:hidden;
	position:relative;
	text-indent:5px;
	background-color:var(--raiclabs-white);
}

footer ul.social-menu li a::before
{
	content:"\f082";
	font-family: FontAwesome;
	padding-right:50px;
	font-size:25px;
	line-height:30px;
	color:var(--raiclabs-blue-graphite)
}

footer ul.social-menu li a.share-facebook::before
{
	content:"\f09a";
}

footer ul.social-menu li a.share-linkedin::before
{
	content:"\f0e1";
}

footer ul.social-menu li a.share-twitter::before
{
	content:"\f099";
}

footer {
    padding: var(--raic-section-padding) 0;
    margin: var(--raic-margin);
    text-align:center;
  margin-top:-7.5rem;
}
.page-home footer {
  margin-top:0;
}

footer ul {
    margin:5rem 0!important;
}
footer li {
    display:inline;
    margin:0 1rem;
}

footer a {
    color: var(--raic-white);
}

.menu-toggle {
    display: none; /* Hide the toggle button by default */
    background: none;
    border: none;
    font-size: 2.4rem;
    color: var(--raic-white);
    cursor: pointer;
}


  .image-block .laptop {
      width: 150%;
      height: auto;
      margin-left:-20%;
      margin-bottom:-30%;
      margin-top:-10%;
    position:relative;
    z-index:99;
  }

  .image-block .laptop-image
  {
    position:absolute;
    top:-24px;
    left:22px;
    width:342px;
    height:290px;
    z-index:0;
    transform: skew(4.6deg, -1.3deg);
    object-fit:cover;
  }


.blog-main
{
    margin-top:-3rem;
}


   /* small screens */
@media only screen and (max-width: 900px) {
  
       :root {

--raic-font-size: 1.4rem;
    --raic-section-padding:2rem;
}
  
    .boxes
    {
    grid-template-columns: 1fr!important;
    }

    .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
        grid-column: span 12!important;
    }
  
  .grid > div {
     grid-column: span 12!important;
  }

	.container {padding:2rem;}
    #banner { padding-top:2rem; margin-top:7rem!important;}
    #banner .icon {display:none!important;}
    #banner .copy {width:100%!important;}
  
    #blog-banner h1 {margin: 10rem 0;}
  
    #blog-banner .icon {
        position: absolute;
        width: 15rem;
        bottom: -5rem;
        right: 0;
        opacity: 0.2;
    }
  
  
footer {
  margin-top:0rem;
}
  
  .half-img {
    display:none;
  }
  
  .quote  img {
    display:none;
  }
  
   .top-nav .container {
        padding: 2rem;
        position: relative;
    }

    .menu-toggle {
        display: block; /* Show the toggle button on smaller screens */
        position: absolute;
        right: 2rem;
        top: 3rem;
    }
    
    .top-nav ul.inline-list {
        display: none; /* Hide the menu by default on smaller screens */
        position: absolute;
        background: var(--raic-graphite);
        left: 0rem;
        top: 8rem;
        width: 100%;
        flex-direction: column;
        padding: 3rem 2rem;
        gap: 1rem;
        z-index: 100;
    }
  
  .top-nav ul ul {
    display: block;
    margin:0;
    padding:0;
}
  
  .top-nav ul ul li {
    display:block;
    text-indent:3rem;
  }
  
  .top-nav ul ul li::before{
    content:"- ";
  }
  
  .top-nav li:hover ul
{
  display: block!important;
  position:inherit!important;
  top:auto!important;
  left:auto!important;
  width:auto!important;
  background:transparent!important;
  padding:0;
  z-index:999;
}

.top-nav li:hover ul li {
  display:block;
  margin:1rem 0;
}
  
  .top-nav ul.inline-list li {
    margin:1rem 0;
  }

    .top-nav ul.inline-list.active {
        display: flex; /* Show menu when toggle button is active */
    }

    .top-nav ul.inline-list a {
        color: var(--raic-white); /* Style for the menu links on small screens */
    }
  
  .laptop {
    display:none;
  }
  
  .laptop-image
  {
    max-width:100%;
    margin:0;
  }
  
  .image-block .laptop {
      width: 100%;
      height: auto;
      margin-left:0%;
      margin-bottom:0%;
      margin-top:0%;
    position:inherit;
    z-index:99;
  }

  .image-block .laptop-image
  {
    position:inherit;
    top:0;
    left:0;
    width: 100%;
      height: auto;
    z-index:0;
    transform: skew(0, 0);
    object-fit:cover;
  }
  
  .bg-header
  {
    padding-top:1rem;
  }
  
  .image-aside .copy
  {
    padding:0;
  }
    
.img-breakout,
    .img-fullscreen,
    .fullwidth 
    
{
  width: 100%!important;
  aspect-ratio:auto!important;
  height:auto!important;
  margin-left:0%!important
}
    

    


}