@charset "UTF-8";
   /* CSS Document */
   @font-face {
     font-family: 'GeosansLight';
     font-style: normal;
     font-weight: normal;
     src: local('GeosansLight'), url("geo-sans-light-cufonfonts-webfont/GeosansLight.woff") format('woff');
   }
   :root {
     --clr-primary: white;
     --clr-text: #666;
     --clr-heading: #999;
     --clr-gold-L: #c3a52a;
     --clr-gold-D: #988228;
     --clr-bg-main: #ffffff;
     --clr-bg-1: #ddd;
     --clr-bg-2: #fcf8ed;
   }
   * *::before, *::after {
     box-sizing: border-box
   }
   html {
     scroll-behavior: smooth;
   }
   body {
     font-family: 'GeosansLight';
     color: var(--clr-body);
     background: var(--clr-bg-1);
   }
   .main-container {
     width: 100%;
     max-width: 1200px;
     position: relative;
     margin: -30px auto 0 auto;
     padding-top: 150px;
     background: white;
     border-color: gold;
     border-style: solid;
     border-width: 0 3px 3px 3px;
   }
   .left-side {
     padding-bottom: 3rem;
     width: 90%;
   }
   header {
     margin-top: -160px;
     padding-top: 30px;
     border-bottom: 2px solid gold;
     width: 85%;
     max-width: 1000px;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     position: fixed;
     opacity: 0.8;
     z-index: 100;
   }
   .logo {
     width: 5rem;
   }
   .logo2 {
     display: none;
     transition: all 0.3s ease-in-out;
   }
   li {
     letter-spacing: 0.2rem;
   }
   a {
     text-decoration: none;
     color: black;
     font-weight: bold;
   }
   a:hover {
     color: goldenrod;
   }
   /*==================*/
   .nav-menu {
     display: grid;
     grid-template-columns: repeat(5, auto);
     gap: 2em;
     letter-spacing: 2px;
     padding-top: 20px;
     margin: 1em 0;
     list-style-type: none;
     font-size: 1rem;
     text-transform: uppercase;
     font-weight: 800;
     padding: 0;
   }
   .menu-toggle .bar {
     width: 60px;
     height: 30px;
     margin: 0 auto;
     transition: all 0.3s ease-in-out;
   }
   /*-----content-----*/

.image-title {
     text-align: center;
	 padding-top:0;
     font-size: 1.7rem;
     letter-spacing: 2px;
   }

.top-arrows{
		color:goldenrod;
		font-size: 4rem;
		padding:0 5rem;
	
	}
	
	.top-arrows:hover{
		color:#999;
	}
	
	@media (max-width:50em){
		.top-arrows{
			font-size: 4rem;
		padding:0 0.5rem;
			
	}
		
	}
	
	

   a.galleries-title {
     display: block;
     text-align: center;
     text-transform: uppercase;
     font-size: 1.3rem;
     letter-spacing: 2px;
     cursor: pointer;
   }

   a.galleries-title:hover {
     color: #a63d32;
   }

   a.lab-link {
     color: goldenrod;
     cursor: pointer;
     transition: color 2s ease-out;
   }

   a.lab-link:hover {
     color: orangered;
     border-bottom:1px solid #F0A11D;
   }
   .section-title {
     text-align: center;
     font-size: 2rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: goldenrod;
   }

   

   .details_title {
     margin-top: 3em;
     border-top: 2px solid gold;
     padding-top: 3em;
     text-align: center;
     font-size: 2.3rem;
     letter-spacing: 3px;
     text-transform: uppercase;
   }
   .sizes {
     font-size: 1.2rem;
     text-align: center;
   }

/*------IMAGES---------*/
/*------IMAGES---------*/
/*------IMAGES---------*/
   img {
     width: 100%;
   }
   .image-main {
     width: 85%;
     margin: 0 auto;
	   text-align: center;
	   
   }

   .image-display {
     width: 90%;
     margin: 0 auto;
     margin: 30px auto;
     justify-content: center;
   }
   .image-holder {
     width: 80%;
     margin: 0 auto;
   }
   .placeholder {
     width: 100%;
     margin: 0 auto 10px;
     text-align: center;
   }
   .image-control-small {
     max-width: 1000px;
   }

/*----footer navigation ARROWS-----*/
	
	.arrows-container{
		width:500px;
		margin:2rem auto;
		display:flex;
		gap:2rem;
		justify-content:space-between;

	}
	
	.arrow{
		max-width:70px;
		
	}
	
	.arrow:hover{
		opacity:0.5;
	}
	
	.left-arrow{
		 -webkit-transform:rotate(-90deg);
   -moz-transform:rotate(-90deg);
   -o-transform:rotate(-90deg);
		transform:rotate(-90deg);
	}
	
	.right-arrow{
		-webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
   -o-transform:rotate(90deg);
			transform:rotate(90deg);
	}
	

.footer{
	margin-bottom:50px;
}

 







   /*--------Rignt Side Fixed Column-----*/
   .RS_container {
     width: 8%;
     position: absolute;
     top: 0px;
     right: 0px;
   }
   .right-side {
     position: fixed;
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 100px;
     margin-right: 0;
   }
   .RS_container-thumbs {
     position: absolute;
     width: 10%;
     top: 20px;
     right: 0;
     padding: 2rem 0;
     height: 100vh;
   }
   .right-side-thumbs {
     position: fixed;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-content: flex-start;
     height: 100vh;
   }
   .thumbs {
     width: 100%;
	   opacity: 1;
   }
.thumbs:hover{
	opacity: 0.7;
}
   .placeholder {
     padding-top: 100px;
   }






   /*=========media queries=========*/
@media (max-width:1200px) {

.main-container {
     width: 100%;
		}
	
	.arrows-container{
		width:300px;
		
	}
	

}

   @media (max-width:50em) {
	   
	  
	   
     .RS_container, .RS_container-thumbs {
       display: none;
     }
     .right-side, .right-side-thumbs {
       display: none;
     }
     .main-container {
       border: none;
     }
     .left-side {
       width: 100%;
     }
     header {
       width: 100%;
     }
	   
     .logo {
       display: none;
     }
	   
	   
     .menu-toggle .logo2 {
     }
	   
	   
     .nav-container {
       position: relative;
     }
     .nav-menu {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       width: 103%;
       position: absolute;
       top: 50px;
       height: 100vh;
       left: -100%;
       opacity: 0;
       transition: all 0.5s ease;
     }
     .nav-menu.active {
       left: 0px;
       background-color:whitesmoke;
       z-index: 100;
       opacity: 1;
       transition: all 1.5s ease;
       font-size: 1.8rem;
     }
     .navbar {
       width: 100%;
     }
     .nav-links {
       text-align: center;
       line-height: 20px;
		 padding-top:2rem;
       width: 100%;
     }
     .nav-links:hover {
		 
       background-color: hsla(60, 23%, 97%, 0.86);
       transition: all 0.4s ease-out;
     }
     #mobile-menu {
       position: absolute;
       top: 20px;
       right: 46%;
       transform: translate(5%, 20%);
     }
     .menu-toggle .bar {
       display: block;
       cursor: pointer;
     }
     .menu-toggle:hover {
       cursor: pointer;
     }
     .logo2 {
       display: block;
       width: 50px;
       margin: 0 auto;
       z-index: -100;
     }
	   
	 
     .menu-toggle .logo2 {
     }
	   
	   
	   
     /*#mobile-menu.is-active .bar:nth-child(1){
		transform: translateY(0px) rotate(45deg);
	}
	
	#mobile-menu.is-active .bar:nth-child(2){
		transform: translateY(-6px)rotate(-45deg);
	}*/
	   
	   
	   
     .logo2.is-active {
       transform: rotate(180deg);
     }
	   
	   
	   .details_title{
		   margin-top:1em;
		   padding-top:1em;
	   }
	   
	/*------- images-----*/
	     /*------- makes main image bigger-----*/
	   
	   .image-main {  
     width: 100%;
   }
	   
	.image-holder {
     width: 100%;
		margin-top:-1rem;
   
   }   
	   
	   
	   
     .footer {
       width: 100%;
     }
	   
	   .arrows-container{
		width:300px;
		margin:2rem auto;
		   flex-direction: row;
	}
	   
	   .arrow{
		   width:50px;
	   }
   }