/*Alexrivera.vegas - neilmclean.com - portfolio code*/
/*Copyright 2024 Estebagel*/
/*Currently using this one right now as main but main should 
only handle global settings like menu, footer, site asthetics. 
and page should handle the pages in general and maybe overwrite 
anything in main. */

/* General Styles */
html, body {
    overflow-x: hidden; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    height: 100%; /* Ensure full height */
  }
  
  /* Footer Styles */
  .footer-credits, .footer-credits-text {
//      color: #000000 !important;
//    background-color: #fbfbfb !important;
  }
  
  #colophon {
//          color: #fbfbfb;
//    background-color: #fbfbfb;
      height: 100vh;
 }
  
  /* Position the menu in the bottom right corner */
  .elementor-widget-uael-nav-menu {
    position: fixed; /* Fixes the position to the viewport */
    bottom: 0; /* Align to the bottom of the screen */
    right: 0; /* Align to the right of the screen */
    z-index: 1000; /* Ensure the menu appears on top of other elements */
    padding: 20px; /* Optional padding around the menu */
  }
  
  /* Style for the menu items (optional) */
  .uael-nav-menu {
  
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
  }
  
  .uael-menu-item {
    color: #fff; /* Menu item text color */
    text-decoration: none; /* Remove underline from links */
    padding: 10px 15px; /* Add some padding to the menu items */
  }
  
  .uael-menu-item:hover {
    color: #00ff5a; /* Change color on hover */
  }
  
  #mobile-vertical-menu {
    position: fixed; /* Fixes the position to the viewport */
    bottom: 0; /* Align to the bottom of the screen */
    left: 0; /* Align to the left of the screen */
    width: 75%; /* Take up the full width of the screen */
    z-index: 1000; /* Ensure it's on top of other elements */
    padding: 85px 0;
    text-align: left;
      max-width: fit-content;
  }
  /* For desktop */
  @media (min-width: 1025px) {
    .elementor-custom-embed-image-overlay img {
      width: 100vw; 
      height: 100vh;
      object-fit: cover; 
      object-position: center; 
    }
  }
  
  /* For mobile devices and tablet */
  @media (max-width: 1024px) {
    .elementor-custom-embed-image-overlay img {
      width: 100vw; 
      height: 100vh;
      object-fit: cover; 
      object-position: center; 
    }
  }
  
  .elementor-custom-embed-image-overlay {
    pointer-events: none; /* Disable clicking on the overlay */
  }
  
  .elementor-custom-embed-play {
  
      pointer-events: auto; /* Enable clicking only on the play button */
  }
  @media (min-width: 1260px) {
  .elementor-custom-embed-play {
  
      position: absolute;
    top: clamp(25%, 50%, 25vw); /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Perfectly center the button */
    z-index: 1001; /* Ensure it stays on top of other elements */
    pointer-events: auto; /* Optional: Ensure the button isn't interactable */
  }
  }
  .elementor-wrapper {
    position: relative; /* Ensure the play button is positioned relative to the wrapper */
  }
  
  
  
  
  
  
  
  
  /* Page and Navigation */
  .body-architect {
    border: 0;
    height: 100%;
  }
  
 /* page-architect {}*/
  
  /* Navigation */
  .nav-architect {
    float: left;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 998;
    width: 200px;
    min-height: 550px;
    left: 50px;
    opacity: 0.95;
    background-color: #ffb4b463;
  }
  
  .nav-container-architect {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 550px;
    text-align: left;
    margin-top: -275px;
    overflow: visible;
  }
  
  .nav-container-top-architect {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: static;
  }
  
  /* Text Wrap */
  .text-wrap {
    word-wrap: break-word; /* For older browsers */
    overflow-wrap: break-word; /* Modern equivalent */
    white-space: normal; /* Prevents unnecessary padding */
  }
  
  /* Elementor Widget Styling */
  .elementor .elementor-widget.selection-architect a:hover {
/*    color: #00ff5a;*/ /* Hover color */
  }
  
  .elementor .elementor-widget.selection-architect-selected {
 /*   color: orange;*/ /* Visited link color */
  }
  
  /* Content and Layout */
  .content-main-architect {
    margin-left: 280px;
    opacity: 1;
    overflow-x: visible;
    min-height: 510px;
    height: 510px;
  }
  
  /* Media Queries */
  @media (min-width: 768px) {
    .content-main-architect {
      min-height: 580px;
      height: 80vh;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect {
      min-height: 580px;
      height: 80vh;
    }
  }


  
  /* Clearfix for Horizontal Scrolling */
  .clearfix-architect {
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -280px;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect {
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect {
      padding-left: 280px;
    }
  }
  
  
  /* Clearfix for Horizontal Scrolling that is google */
  .clearfix-architect-google {
    overflow-x: auto;
      overflow-y: hidden;
    margin-left: -280px;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect-google {
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-google {
      padding-left: 280px;
    }
  }
  
  
  
  /* Asset Containers for Different Scroll Behaviors */
  .assets-architect {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect h3 {
     padding-left: 0px;
  } 
  
  .assets-architect h1, 
  .assets-architect h2, 
  .assets-architect h3, 
  .assets-architect h4, 
  .assets-architect h5, 
  .assets-architect h6,
  .assets-architect p, 
  .assets-architect div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
    .assets-architect {
        width: 15727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
  }
  
  /* The class for google drive api */
  @media (min-width: 768px) {
    .assets-architect-google {
        width: max-content;
        touch-action: pan-x;
        height: 100vh;
            overflow-x: inherit;
        white-space: nowrap;
    }
  }
  
  .assets-architect-dungeon {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect-dungeon h3 {
     padding-left: 0px;
  } 
  
  .assets-architect-dungeon h1, 
  .assets-architect-dungeon h2, 
  .assets-architect-dungeon h3, 
  .assets-architect-dungeon h4, 
  .assets-architect-dungeon h5, 
  .assets-architect-dungeon h6,
  .assets-architect-dungeon p, 
  .assets-architect-dungeon div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
  .assets-architect-dungeon {
    width: 4727px;
    touch-action: pan-x;
    height: 100vh;
    overflow-x: auto;
    white-space: nowrap;
    }
  }
  
  .assets-architect-making {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect-making h3 {
     padding-left: 0px;
  } 
  
  .assets-architect-making h1, 
  .assets-architect-making h2, 
  .assets-architect-making h3, 
  .assets-architect-making h4, 
  .assets-architect-making h5, 
  .assets-architect-making h6,
  .assets-architect-making p, 
  .assets-architect-making div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
    .assets-architect-making {
        width: 50727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
  
  
    .assets-architect-making .elementor-widget-container img {
      height: 650px; /* Set a consistent height for all images */
      width: auto;  /* Allow width to vary to maintain aspect ratio */
      display: inline-block; /* Keep images in a horizontal row */
      vertical-align: center; /* Align images to the top */
    }
  
    .assets-architect-making .elementor-widget-container {
      display: inline-block; /* Ensure the container also maintains horizontal layout */
      vertical-align: top; /* Align container to the top */
    }
  }
  .assets-architect-zobot {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  @media (min-width: 768px) {
    .assets-architect-zobot {
        width: 10727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
      
      .assets-architect-zobot .elementor-widget-container img  {
      height: 500px; /* Set a consistent height for all images */
      width: auto;  /* Allow width to vary to maintain aspect ratio */
      display: inline-block; /* Keep images in a horizontal row */
      vertical-align: center; /* Align images to the top */
    }
  
    .assets-architect-zobot .elementor-widget-container {
      display: inline-block; /* Ensure the container also maintains horizontal layout */
      vertical-align: top; /* Align container to the top */
    }
  }
  
  
  /* Elementor Elements inside Asset Containers */
  .assets-architect > .elementor-element,
  .assets-architect-works > .elementor-element,
  .assets-architect-works-short > .elementor-element,
  .assets-architect-works-mid > .elementor-element {
    display: inline-block;
    height: 100%;
    vertical-align: top; /* Ensure vertical alignment */
  }
  
  /* Image Styles */
  .assets-architect img,
  .assets-architect-works img,
  .assets-architect-works-short img,
  .assets-architect-works-mid img {
    height: 100%; /* Fill height of parent */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Removes inline-block space below the image */
  }
  
  /* Footer Styling */
  .footer-credits {
//    color: #141414;
//    background-color: #141414;
  }
  
  .footer-credits-text {
//    color: #939393;
//    background-color: #141414;
  }
  
  /* Academic History Section */
  .content-main-architect-y {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
  }
  
  @media (min-width: 768px) {
    .content-main-architect-y {
      margin-left: 280px;
      min-height: 580px;
      height: 80vh;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect-y {
      margin-left: 280px;
      min-height: 580px;
      height: 80vh;
    }
  }
  
  /* Clearfix for Vertical Scrolling */
  .clearfix-architect-y {
    overflow-y: scroll;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect-y {
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-y {
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  /* Additional Asset Containers */
  .assets-architect-y {
    height: 2400px;
    touch-action: pan-y;
  }
  
  .content-main-architect-items-y {
    min-height: 620px;
    height: 750px;
  }
  
  @media (min-width: 1025px) {
    .assets-architect-items-scroll-y {
      max-height: 45px !important;
      overflow: auto;
    }
  }
  
  /* Another Academic Section */
  .content-main-architect-xy {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
  }
  
  @media (min-width: 768px) {
    .content-main-architect-xy {
      min-height: 550px;
      height: 550px;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect-xy {
      margin-left: 280px;
      min-height: 550px;
      height: 550px;
      overflow-x: visible;
    }
  }
  
  .clearfix-architect-xy {
    overflow-y: scroll;
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-xy {
      height: auto;
      overflow-x: scroll;
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  .assets-architect-xy {
    height: 2400px;
    touch-action: pan-y;
  }
  
  @media (min-width: 1025px) {
    .assets-architect-xy {
      width: 7227px;
      touch-action: pan-x;
    }
  }
  
  /* Additional Asset Work Containers */
  .assets-architect-works-xy {
    width: 10000px;
    touch-action: pan-x;
  }
  
  .grid-content-xy {
    height: 500px;
    min-height: 600px;
  }