@charset "UTF-8";
/* CSS Document */

 /*      MAIN STRUCTURE.      */

	#beautysupply  {
  scroll-margin-top: 10px;
}
		
		 #oftheworldly, #z-space, g#rid3  {
  scroll-margin-top: 100px;
}

	
		#stretchmannequin, #ladder, #pulleyhanger, #androidmannequin, #steelwires, #tracksystem, #pipecabinet, g#rid3   {
  scroll-margin-top: 100px;
}
	

 body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
			background: transparent;
			 cursor: url('images/mousemouse.png');
        }

	
        .outer-container {
            width: 100%;
            height: 100%;
            overflow: auto;
			overflow-x: hidden;
			background: transparent;
        }

        .inner-container {
            display: flex;
            height: max-content;
        }

        .column-a {
            width: 300px;
            padding-top: 70px;
            background-color: #fff;
            position: sticky;
            top: 0;
            min-height: 100vh;
			padding-left: 10px; padding-right: 10px;
        }

        .column-b {
            flex: 1;
            padding-top: 70px;
            background-color: #fff;
            overflow-y: auto;
			overflow-x: hidden;
            height: 100vh;
        }

		.hiddenForB {display: none;}


  .section {
            height: auto;
            min-height: 1100px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: left;
			overflow-x: hidden;
            font-size: 20px;
            color: white;
            padding: 0px;
			
        }
		
		.sectioninfo {
    width: 100%; /* Set width to fill container */
    max-width: 900px; /* Limit the maximum width */
    margin: 0 auto; /* Center the element horizontally */
    overflow-x: hidden; /* Enable horizontal scrolling if needed */
    line-height: 20px;
    text-align: center; /* Center the text horizontally */
	color:black;
	margin-top: 20px;
}
		
		.scroll {
    width: 100%; /* Set width to fill container */
    height: auto; /* Adjust height */
    overflow-x: auto; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent content from wrapping */
    display: flex;
    justify-content: left; /* Center content horizontally */
    align-items: center; /* Center content vertically */
	padding-left:10%;
	
}

.scroll img {
    width: 60%; /* Adjust image size */
    height: auto;
    padding-right: 2%;
	padding-left: 2%;
    display: inline-block;
}

.noscroll {
    width: auto; /* Set width to adjust based on content */
    max-width: 100%; /* Ensure the container does not exceed the parent's width */
    height: auto; /* Adjust height */
    overflow: auto; /* Enable scrolling */
    white-space: normal; /* Allow content to wrap */
    display: flex;
    flex-direction: column; /* Update to column layout */
    align-items: flex-start; /* Align content to the start of the container */
    justify-content: flex-start; /* Align content to the start of the container */
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px; /* Adjust padding as needed */
	color:black;
}

.spacer {height: 30px;}
		
		.sticky-bottom {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

.image-link {
    float: right;
    padding-right: 4%;
    height: 100px; /* Assuming the height of the sticky div is 100px */
    display: flex;
    align-items: center; /* Vertically center the content */
}

.normal-image, .hover-image {
    width: 60px; /* Adjust the width of the image as needed */
    height: 60px; /* Adjust the height of the image as needed */
}

.hover-image {
    display: none; /* Initially hide the hover image */
}

.image-link:hover .normal-image {
    display: none; /* Hide the normal image on hover */
}

.image-link:hover .hover-image {
    display: inline-block; /* Show the hover image on hover */
}

		.additional-div {
    float: right;
    padding-right: 2%; /* Adjust as needed */
    height: 100%; /* Adjust as needed */
    display: flex;
    align-items: center; /* Vertically center the content */
	color:black;
}

.scroll img.tootall {
    width: 45%; /* Set the width for the image in the special case */
}

.scroll img.tootall2 {
    width: 28%; /* Set the width for the image in the special case */
}

.scroll img.spacer {
    width: 7%; /* Set the width for the image in the special case */
}

		.hiddenForB {
  /* Define styles for content displayed in Column A */
  /* For instance, change font size or color */
  font-size: 18px;
  color: red;
}

.logoslot {
    width: 90%;
    display: flex;
	align-content: center;
    justify-content: space-between; /* Distributes space between logos */
	margin-top: 10px;
}

.logo {
    box-sizing: border-box; /* Includes padding and borders in the width */
}

.logo img {
    width: 100%; /* Ensures images take full width of their containers */
    margin: 0 10px; /* 10px margins on left and right */
}

		.column-b::-webkit-scrollbar {
    width: 0; /* Hide scrollbar for Chrome, Safari, and Opera */
}
		
		.scroll::-webkit-scrollbar {
    height: 0; /* Hide scrollbar for Chrome, Safari, and Opera */
}


.secondnav {padding-left: 10px; padding-bottom: 10px; }
		
		.center-nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Ensure the height matches the logo and toggle height */
}

.center-nav-logo img {
    height: 50px; /* Ensure the logo fills the height */
    cursor: pointer; /* Add pointer cursor to indicate interactivity */
}

		
/* Adjust styles for smaller screens using media queries */
@media (max-width: 768px) {
    .nav-content {
        flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
		padding-right: 20px;
		padding-top:  20px;
    }
    .nav-content a {
        font-size: 32px; /* Reduce font size for smaller screens */
     padding-right: 5px; 
		
    }
}

	
	/* Default styles for Column A and Column B */
.column-a {
    width: 300px; /* Adjust width as needed */
    /* Other styles */
}

.column-b {
    flex: 1; /* Allow Column B to expand */
    /* Other styles */
}

/* Media query for smaller screens (e.g., mobile devices) */
@media only screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Change layout to column */
    }

    .column-a {
       display: none/* Set Column A width to 5% */
        /* Other styles */
    }

    .column-b {
        width: 100%; /* Set Column B width to 95% */
        margin-left: 0; /* Remove left margin */
    }
}

@media (max-width: 768px) {
  .column-b {
    margin-left: 0; /* Reset the left margin */
   
}
	
	
	
		@media (max-width: 768px) {
  .noscroll {
    padding-right: 10px;
	  padding-left: 10px;
	  font-size:14px;
			}}}

@media (max-width: 767px) {
  .scroll {
	  padding-left: 10px;
	  
  }
}
	

	
			
	
		
@media (max-width: 767px) {
  .section {
    padding-left: 0; /* Reset left padding */
    padding-right: 0; /* Reset right padding */
    margin-left: 0; /* Reset left margin */
    margin-right: 0; /* Reset right margin */
	  min-height: 600px;
  }
	
}
	

/*.    */

	/* NAVIGATION STRUCTURE ================== */
		.responsive-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    z-index: 1001; /* Ensure the nav stays above other content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px; /* Adjust padding as needed */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

.nav-logo img {
    height: 60px; /* Ensure the logo fills the nav height */
	padding-top:5%;
}

.nav-toggle img {
    height: 60px; /* Ensure the nav toggle button fills the nav height */
    cursor: pointer; /* Add pointer cursor to indicate interactivity */
}

.nav-content {
    position: fixed;
    top: 70px; /* Ensure the nav starts below the responsive nav */
     flex-wrap: wrap; /* Allow flex items to wrap to the next line */
    justify-content: flex-start; /* Align flex items at the start of the container */
    width: 100%;
	left:0;
	padding-left: 10px;
    height: 100%;
    background-color: #ffffff;
    z-index: 1000; /* Ensure the nav content stays above other content */
    display: none; /* Initially hide the nav content */
	
    /* Add additional styling as needed */
}

.nav-content.show {
    display: block; /* Show the nav content when toggled open */
}

.nav-toggle {
    margin-right: 1%; /* Add margin to the right side */
}

.nav-content a {
    font-family: 'titling-gothic-fb-wide', sans-serif;
    font-size: 7vw;
    font-weight: 500;
    color: #eee;
    text-decoration: none;
    position: relative;
    text-shadow: -1px -1px 0 #000,  
                 1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
    transition: color 0.3s;
    padding-right: 2%; 
    overflow-wrap: break-word;
    hyphens: auto; /* Enable automatic hyphenation */
}

.nav-content a:hover {
    color: #ceff00; /* Change text color on hover */
}


/* */

/*   FOOTER STRUCTURE    */


.fakefoot {
            height: 80%;
			position: relative;
            background:transparent;
			  background-image: url('images/construction.png');
      background-size: auto 80%; /* Set the height to 50% of the container height */
      background-position: center bottom;
      background-repeat: no-repeat;
			background-attachment: fixed;
			overflow: hidden;
    }
        

      
		
	

			
		
		
		
		.child {
    position: absolute;
    bottom: 0;
    width: 100%;
			height: 60%;
    background-image: url('images/fence.png');
    background-size: auto 100%; /* Auto width, 100% height */
			background-position: center;
    background-repeat: repeat-x; /* Repeat horizontally */
    padding: 0px;
}
		
		.footerinfo {
        display: flex;
			background: none;
    align-items: center;
    justify-content: space-between; /* Distribute space evenly between child elements */
    height: 100%;
    width: 90%;
    margin: 0 auto; /* Center the container */

}
		@media (max-width: 767px) {
  .footerinfo {
    width: 100% !important;
=  }
}
		

.column {
    width: 20%;
    height: 100%; /* Set a specific height for demonstration */
   /* background-color: rgba(255, 103, 211, 0.3); /* just for visualization */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Center the content vertically */
	margin-top:50px;
}

.middle-column {
    width: 80%;
	font-size: 12px;
    background: none;
	position: relative;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items:flex-start; /* Center the content vertically */
}
		
		.innercolumn {
    width: 85%;
			position: relative;
    background: none;
    margin-top: 35px;
    opacity: .7;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}
		
		.class {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background: none;
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    height: 20%;;
    flex-wrap: wrap; /* Allow flex items to wrap */
    object-fit: contain;
}



.title img {
   max-height: 100%;
   max-width: 100%;
   margin: 10px;
   object-fit: contain;
   display: inline-block;
   vertical-align: middle;
	
}


		
		
		.title {
    background: none;
    width: 100%;
    height: 90%;
    object-fit: contain;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}

 .image-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-grid a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 5px; /* Adjust margin as needed */
}

.image-grid a {
    display: inline-block;
    margin: 5px; /* Adjust margin as needed */
    text-decoration: none;
    width: auto; /* Ensure the anchor tags do not interfere with image sizing */
}

.image-grid a {
    display: inline-block;
    max-width: 25%; /* Adjust the width as needed */
    height: auto;
	
    margin: 5px;
   padding-left: 3%; padding-right: 3%;
    text-decoration: none; /* Remove underline from links */
    text-align: center; /* Center the image and text */
}

.image-grid a img {
    max-width: 100%;
    height: auto;
	
}
		
		.image-grid a img {
    max-width: 100%;
    height: auto;
			cursor: url('images/mousemouse.png'), auto;
}

.footerinfo a {
}
		
		   .sticky-div {
      position: absolute;
      bottom: 0;
			   margin-bottom: 70px;
      width: 100%;
      background:none;
			color:white;
			   padding-left: 20px;
			   padding-left: 20px;}
			   
		
		@media only screen and (max-width: 767px) {
    .sticky-div {
        font-size: 8px; /* Change the font size to 8 pixels */
    }
}

		
		.columnal {width: 85%;}
			
		@media (max-width: 767px) {
    .columnal {
        /* Your styles for smaller screens */
        width: 110%;  margin-top: 7%;/* Adjust as needed */
    }
}

		.columnal2 {width: 85%;}
			
		@media (max-width: 767px) {
    .columnal2 {
        /* Your styles for smaller screens */
        width: 110%; margin-top: 9%;  /* Adjust as needed */
    }
}
@media only screen and (max-width: 767px) {
    .class {
        margin: 5px; /* Apply a 5px margin on all sides */
    }
}
@media only screen and (max-width: 767px) {
    .innercolumn {
        margin: 5px; /* Apply a 5px margin on all sides */
    }
}
		@media only screen and (max-width: 767px) {
    .image-row {
        flex-direction: column; /* Change the direction to column */
    }

    .image-grid a {
        max-width: 60%; /* Ensure full width for each item */
        margin: 5px 0; /* Adjust margin as needed */
    }
}
		

/*      */

.arbox {
  width: 100%;
	height: 100%;
	
  display: flex;
  justify-content: center;
  align-items: center;
}