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

/*MAINNOSIDEBAR8*/


   @font-face {
     font-family: "GeosansLight";

     src:url("../geo-sans-light-cufonfonts-webfont/GeosansLight.woff") format('woff');
   }

/*SET STYLES ON ELEMENTS
h1, h2, h3, h3 > a, p, li {
    font-family: "GeosansLight", sans serif;
    font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}*/

: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: 100%;
   }

   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;
	font-family: "GeosansLight", sans serif;
     text-transform: uppercase;
     padding: 0;
   }
   .menu-toggle .bar {
     width: 60px;
     height: 30px;
     margin: 0 auto;
     transition: all 0.3s ease-in-out;
   }
   /*-----content-----*/
   a.galleries-title {
     display: block;
     text-align: center;
     text-transform: uppercase;
     font-size: 1.6rem;
	 padding-bottom:1.3rem;
     letter-spacing: 3px;
     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;
     text-decoration: underline;
   }
   .section-title {
     text-align: center;
     font-size: 2rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: goldenrod;
   }
   .image-title {
     text-align: center;
     font-size: 1.7rem;
     letter-spacing: 2px;
   }
   .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{
	margin-bottom:50px;
}


   p > .to-top {
     max-width: 80px;
	   margin-top:4rem;
	
   }

.to-top:hover{
	
}


   /*--------Rignt Side Fixed Column-----*/
   .RS_container {
     width: 8%;
     position: absolute;
     top: 10px;
     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%;
   }
   .placeholder {
     padding-top: 100px;
   }






   /*=========media queries=========*/
   @media (max-width:800px) {
     .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: -10px;
       padding-top: 100px;
       background-color: white;
       z-index: 100;
       opacity: 1;
       transition: all 1.5s ease;
       font-size: 2.1rem;
     }
     .navbar {
       width: 100%;
     }
     .nav-links {
       text-align: center;
       line-height: 20px;
       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%;
     }
   }