/***** STANDARD
	colors:
	  Beige: #f5ebe0
	  Dark-blue: #24415E
*****/

:root {
    --color-none: none;
    --color-focus: var(--color-none);
}

html, body { 
	font-family: sans-serif;
	height: 100%;
	font-size: 1em;
}
body .layout-container{ padding:0 40px;}

#ram-brand{
	width: 100%;
	max-height: 250px;
	min-width: 350px;
	background-image: url("../images/top/back-1400.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding:0px;
  margin: auto;
	border-top: 3px solid #f5ebe0;
	border-bottom: 10px solid #f5ebe0;
}
#ram-brand .left,
#ram-brand .right{
	z-index: 9;
	position:relative;
}
#ram-brand .right{ float: right;}
#ram-brand img.responsive{
	margin:0 30px;
	max-height: 180px; !important;
}

#topmost {
  font-family: "corbelregular";
  margin: 10px 20px;
  height:20px;
}
#topmost .left{ float:left;}
#topmost .right{ float: right;}

#head-banner {
    left: 120px;
    position: absolute;
    width: 80%;
    height: 180px;
    text-align: center;
    display: inline-block;
    background-image: url(/files/ram/store-front.jpg);
    background-image: url(/files/ram/store-front2a.jpg);
    background-repeat: no-repeat;
    background-size: auto 200px;
    background-position: top;
    opacity: 50%;
    z-index: 1;
}
#head-banner:hover{ opacity: 100%}


ul.menu{
	text-align: center !important;
	font-size: 1em;
	line-height: 1.5em;
	margin:0 0 20px 0;
}

ul.menu li{
	display: inline;
	text-transform: uppercase;
	font-weight:bold;
	padding-right: 10px;
}

ul.menu li + li{
    background:url('../images/top/-div.png') no-repeat;
    background-position: left center;
    padding-left: 20px;
}
a{
	text-decoration: none !important;
	color: #999;
}
ul.maneu a {
	text-decoration: none !important;
	color: #999;
	text-transform: uppercase !important
}
ul .sf-depth-1 li,
ul .sf-depth-1 li a{
	margin: 0 !important;
	background-color: white;
	text-align: left;
	padding:0 5px;
}/*
ul.sf-menu{
	float:right !important;
	position:relative !important;
	left:20% !important;
}*/
/* ul.sf-menu li{float:inherit !important; display: inline}*/
/***********/

/*** ---------- product-categories -------***/
.view-id-categories.view-display-id-block_1{
  clear: both;
  text-align: center;
  max-width: 99%;
  margin: auto
}
.view-taxonomy-term .views-row,
.view-id-categories.view-display-id-block_1 .view-content{
	max-width: 90%; margin: auto;
	margin-bottom: 10px;
	line-height: 2em;
}
.view-id-categories.view-display-id-block_1 .views-view-responsive-grid__item{}
.view-id-categories.view-display-id-block_1 .views-field-title{	margin:10px;}

.view-taxonomy-term .views-view-responsive-grid__item .views-field-simple-popup-views-field .spv_on_hover img,
.view-id-categories.view-display-id-block_1 .views-field-simple-popup-views-field,
.view-id-categories.view-display-id-block_1 .views-field-field-image{
  max-height: 220px;
  background: linear-gradient(to right bottom, #0e3b5c, #f0e7c9);
  padding: 2px;
  display: inline-block;
}

/* .view-taxonomy-term .node--type-product{display:none}
/*.view-taxonomy-term .view-header{display:none} */
	/***** Build your ring *****/
	.path-frontpage .field--name-body img{
		width: 100%;
		height: auto;
	}
/******* end product-categories *****/
.field--name-field-add{
	width: 90%;
	margin: auto;
	text-align: center;
}
.field--name-field-add .field__item{
	clear: both;
	text-align: left;
}

/********* -- simple_popup_views css file (modules/contrib/simple_popup_views/css/simple_popup_views.css) -- indented additions *****/
.spv-popup-wrapper {
/*  position: relative;
  display: inline-block; */
}
.spv-popup-link {/*  cursor: pointer; */}
.spv-popup-content {
/*  display: none;
  position: absolute;
  background:none;
  padding: 5px;
  border-radius: 10px;
  transition: opacity 0.2s;
  z-index: 9999999;
  border: 2px solid #000000;
  width: 300px;
  box-shadow: 0px 0px 17px 2px; */
  		width: auto !important;
  		border: 1px solid #1f33b5;
/*	  	border-radius:0;
	  	border: none !important;
  		box-shadow: 0 0 0 0 !important;*/
}
.spv_close {
/*  cursor: pointer;
  padding: 0px 5px;
  color: #fff;
  position: absolute;
  top: -8px;
  right: -8px;
  border-radius: 7px;
  background: rgb(121, 121, 121);*/
  		background: none;
  		border: none
}
.spv-right-popup {
/*  top: -5px;
  left: 105%;*/
}
.spv-left-popup {
/*  top: -5px;
  right: 105%;*/
}
.spv-top-popup {
  /*bottom: 100%;*/
  		bottom: 90%;
}
.spv-bottom-popup {
/*  top: 100%;*/
}
/********* -- END simple_popup_views css file -- *****/

.path-frontpage  .view-id-leas_ads img{
	max-width: 220px;
	height: auto;
}

.path-frontpage  .view-id-leas_ads .view-header {
	border-bottom: solid thin #ccc;
	font-size: 1.1em;
	color: #4e94ad;
	padding: 0 10px 20px 10px;
	}
.path-frontpage  .view-id-leas_ads .views-field-title{
	text-transform:uppercase;
	padding: 10px;
	color: #AAA;
}
.path-frontpage  .view-id-leas_ads .views-col{
	min-width: 260px;
}
.path-frontpage  .view-id-leas_ads {
	max-width: 98%;
	text-align: center;
	font-size: 1.2em;
	border: thin solid #666;
    border-radius: 25px;
    padding: 20px;
    background-color: #faf7f0
/*  background: url('/files/ram/bk_paper.gif');
  background-position: left top;
  background-repeat: repeat;*/
} 
/**** END -- BANNER node type -- *****/

/**** ----QR Code -- ****/
#ram-qr img{
/*    float: right;
    position: absolute;
    top: 230px;
    right: 20px;
    width: 180px;
    height: 180px; */
}
#ram-qr-code{
	width:98%;
	padding:10px 0 0 0;
	text-align: right;
}
#ram-qr-code a img{	display: none;}
#ram-qr-code a:hover img{
	display: block;
	position: absolute;
}
#ram-qr-code a{
	float: right
}
#ram-qr-code a img{
	position: absolute;
	top: 0;
	right: 150px;
	z-index: 999;
}

#ram-qr-footer{
	text-align:center;
	padding: 10px 0
}
#store-front img,
#ram-qr-footer img{
	height: 250px;
	width: auto;
	margin: 0 10px;
	max-width: 100% !important;
	max-height: auto !important
}
body > #copyright {
  top: 100vh;
  text-align: center;
  padding:10px;
  width: 95%;
  margin: auto;
  margin-top: 10px;
  border: thin solid #ddd;
  border-radius: 5px
}
/**** END ----QR Code -- ****/    

#field_banner .field__item img{
	margin: 10px;
	max-width: 100% !important;
	height: auto
}
#field_banner field__item{
	display: block;
	width: 97%;
	margin: 10px 0;
	clear: both;
	padding: 0 20px;
	padding-top: 20px;
}
.path-frontpage #field_banner-1 h2 img{
	margin-top: 20px;
}
.path-frontpage #field_banner-1 h2{
	padding:20px 0 0 0;
}
.path-frontpage #field_banner-1{
	background-color: #24415E;
	overflow: hidden;
	color: #f5ebe0;
	margin: 10px 0;
    border-radius: 25px;
}/*
************ --END-- FRONT ***************/

#node-10 #field_banner .field__item{
	overflow: hidden;
	margin: 10px 0;
	min-height: 300px;
	clear: both;
	border-bottom: solid thin #ccc;
	padding: 20px;
	font-size: 1.2em;
}
#node-10 #field_banner img{
	max-height: 300px;
	width: auto;
}


#edit-field-gemstone{
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:20vh;
}

/********. #media **********/ /*
@media screen and (max-width: 1300px) {
	#ram-brand{
		background-image: url("../images/top/back-1200.jpg");
				background-size: cover;
		background-size: 100% 100%;
	}
} */
@media screen and (max-width: 1000px){
	#ram-brand img.responsive{
		margin:0 20px;
	}
    #field_banner div.field__item img.align-left,
    #field_banner div.field__item img.align-right,
    #field_banner div.field__item img{
	}
	article#node-8 .field--name-field-banner .field__item{
		display: block !important
	}

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

    #field_banner div.field__item img.align-left,
    #field_banner div.field__item img.align-right,
    #field_banner div.field__item img{
	}
	#ram-brand{
		background-image: url("../images/top/back-1200.jpg");
		background-size: cover;
		background-size: 100% 100%;
	}
	
	#ram-brand img.responsive{
		margin:0 10px;
		max-height: 160px !important;
	}
	#topmost {
	  margin: 5px 10px;
	}
	
	#head-banner {
	    left: 100px;
	    background-size: auto 160px;
    }

} 
/***** MEDIA *******/
article#node-8 .field--name-field-banner .field__item{
    display: flex;
    column-count: 2;
    max-width: 800px;
}
.field--name-field-banner .field__item{
	padding: 10px;
 	clear: both !important
}
.field--name-field-banner .field__item img{
	margin: 15px;
}
.block-quick-node-block .node--type-box h2{
	font-weight: 100;
	font-size: 1.2em;
	font-style: oblique;
	padding: 0px !important;
	margin: 0;
}
.block-quick-node-block .node--type-box{
	text-align: center;
	padding:10px;
}