@media screen and (min-width: 800px) { 

body {
    
    margin: 0px;
    
}

.logo {
	height: 250%;
	
	
}

.fpgigDiv {
    
    height: 500px;
    
    
    
}


.introimage {
	
	position:relative;
	right: 25%;
	left: 25%;
	max-width: 50%;
	max-height: 50%;
	
	
}

.introtext {
	
	font-family: verdana;
	position: relative;
    text-align: center;
	white-space: pre-line;

}

.introdiv {
		
	display: inline; 

}


.opendiv {
	
	position: relative;
	float: right;
	z-index: 1;
	width: 1%;
	
	
	
}

.opendiv span:hover {

	transform: scale(1.1);
	transition: 0.9s;
	color: grey;
	
	

}

.frontlogo {
	
	position: relative;
	font-family: Brush Script MT, cursive;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 0;
	
	text-align: center;
	font-size: 45px;
	height: 75px;
	
	
}



.frame {
	position: relative;
	z-index: 0;
	float: right;
	left: -20%;
	width: 60%;
    margin-top: 2rem;
	border-style: none;
	
	 

}

.framediv {
	margin-top: 4rem;
	position: relative;
	
	z-index: 0;
	width: 100%;

}

.insta {
	width: 5%;
	height: 5;
	background-color: #eee;
	position: relative;
	float: right;
	left: -46.5%;
	cursor: pointer;
}

.insta:hover {
	transform: scale(1.1);
	transition: 0.9s;
	
}


.exhibitdiv {
	
	
	border-radius: 5px;
	
	
}

.exhibitdiv:hover {
	
	border-radius: 5px;
	background-color: #eee;
	
	
}

.exhibitheader {
	
	font-size: 30px;
	width: 100%;
	text-align: center;
	
}

.exhibitimage {
	
	position: relative;
	left: 30%;
	right: 30%;
	width: 40%;
	
	
}

.exhibittext {
	
	font-size: 20px;
	width: 100%;
	text-align: center;
	
}


/*classes for orderforms*/


.orderform {
	position: relative;
	width: 80%;
	right: 10%;
	left: 10%;
	
	
	
	
}

.label {
	
	
	
}

.field {
	border-radius: 5px;
	
	
	
	
}

.bigfield {
	
	width: 100%;

}

.button {
	border-radius: 5px;
	padding: 5px;
	

}

.button:hover {
	background-color: blue;
	color: white;

	
}







}




@media screen and (max-width: 800px) { 
    
    
    body {
    
    margin: 0px;
    
}
    
    
.fpgigDiv {
    
    height: 500px;
    
    
    
}

.opendiv {
	
	position: relative;
	top: 10px;
	float: right;
	z-index: 1;
	width: 1%;
	
	
	
	
}

.opendiv span:hover {

	transform: scale(1.1);
	transition: 0.9s;
	color: grey;
	background-color: #eee;
	

}

.frontlogo {
	
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 0;
	
	
	
}

.logo {
	position: relative;
	right: 25%;
	left: 25%;
	max-height: 50%;
	max-width:50%;
	
}


.frame {
	z-index: 0;
	width: 100%;
	height: 150vw;
	margin-top: 2rem;
	border-style: none;
	position: relative; 

}

.framediv {
	
	position: relative;
	margin-top: 4rem;
	z-index: 0;

	width: 100%;

}

.insta {
	max-width: 20%;
	max-height: 20%;
	background-color: #eee;
	position: relative;
	right: 40%;
	left: 40%;
	cursor: pointer;
}

.insta:hover {
	transform: scale(1.1);
	transition: 0.9s;
	
}

.exhibitdiv {
	
	
	border-radius: 5px;
	
	
}

.exhibitdiv:hover {
	
	border-radius: 5px;
	background-color: #eee;
	
	
}

.exhibitheader {
	
	font-size: 30px;
	width: 100%;
	text-align: center;
	
}

.exhibitimage {
	
	position: relative;
	left: 30%;
	right: 30%;
	width: 40%;
	
	
}

.exhibittext {
	
	font-size: 20px;
	width: 100%;
	text-align: center;
	
}


/* classes for intro.php*/
.introimage {
	
	position:relative;
	margin: 0px;
	max-width: 100%;
	max-height: 100%;
	
}

.introtext {
	
	font-family: verdana;
	position: relative;
    text-align: center;

}

.introdiv {
		
	display: inline; 

}



/*classes for orderforms*/


.orderform {
	
	
	
	
}

.label {
	
	
	
}

.field {
	border-radius: 5px;
	width: 100%;
	
	
	
}

.bigfield {
	
	width: 100%;

}

.button {
	border-radius: 5px;
	padding: 5px;
	

}

.button:hover {
	background-color: blue;
	color: white;

	
}





}



@media screen and (min-width: 800px) { 

.dropdown {
  position: relative;
  display: inline-block;
  z-index:3;
  padding: 10px;
 
  
}

.thumb {
  
  
  
  padding: 4px;
  max-width:250px;
  max-height: 250px;
  z-index: 0;
  position: relative;


}

.thumb:hover {
	
	transform: scale(1.1);
	transition: 0.5s;


}

.jewelthumb {
	
	padding: 4px;
  max-width:250px;
  max-height: 250px;
  z-index: 0;
  position: relative;

}

.jewelthumb:hover {

	transform: scale(1.02);
	transition: 0.5s;
}



.figcaption {
	
	


}	

.image {
		position: relative;
		max-width: 800px;
		max-height: 800px;

}



.figure {
	position: relative;
	float: right;
	left: -20%;
	
}


.imglink {
	

}



}




/* settings for mobile screens*/

@media screen and (max-width: 800px) { 

.dropdown {
  position: relative;
  display: inline-block;
  z-index:3;
 
 
  
}

.thumb {
  
  
  
  padding: 4px;
  max-width: 95%;
  max-height: 95%;
  z-index: 0;
  position: relative;


}



.jewelthumb {
	
	padding: 4px;
  max-width:250px;
  max-height: 250px;
  z-index: 0;
  position: relative;

}

.jewelthumb:hover {

	transform: scale(1.02);
	transition: 0.5s;
}



.figcaption {
	
	


}	

.image {
		position: relative;
		float:right;
		max-width: 100%;
		

}

.figure {
	position: relative;
	float:right;
	max-width: 100%;
	
	
}


.imglink {
	

}




}