@charset "UTF-8";

/* this style sheet contains the responsive styles */
@viewport{
    zoom: 1.0;
    width: device-width;
}

/* define some fonts */
@font-face{
    font-family: 'FranklinGothicBook';
    src: url('fonts/franklingothic-book-webfont.eot');
    src: url('fonts/franklingothic-book-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/franklingothic-book-webfont.woff') format('woff'),
	     url('fonts/franklingothic-book-webfont.ttf') format('truetype'),
	     url('fonts/franklingothic-book-webfont.svg#webfont') format('svg');
}

/* don't use the demi version
@font-face{
	font-family: 'FranklinGothicDemi';
	src: url('fonts/franklingothic-demi-webfont.eot');
	src: url('fonts/franklingothic-demi-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/franklingothic-demi-webfont.woff') format('woff'),
	     url('fonts/franklingothic-demi-webfont.ttf') format('truetype'),
	     url('fonts/franklingothic-demi-webfont.svg#webfont') format('svg');
}
*/
@font-face {
    font-family: 'museo_sans500';
    src: url('fonts/MuseoSans_500-webfont.eot');
    src: url('fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSans_500-webfont.woff2') format('woff2'),
         url('fonts/MuseoSans_500-webfont.woff') format('woff'),
         url('fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url('fonts/MuseoSans_500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;
}





/* John's styles */

/* for Freefind */
.freefind-nav > li.dropdown:hover .dropdown-menu {
    display: table;
    width: 100%;
    text-align: center;
    right: 0;
    overflow: hidden;
}

.image-auto-resize {
    width: 100%;
}

.bg-gray {
    background: #b8b8b8;
}

.align-top {
    vertical-align: top;
}

.img-responsive-90-percent {
    max-width: 90%; /* or to whatever you want here */
    max-height: auto; /* or to whatever you want here */
}

.padding-bottom {
    padding-bottom: 12px;
}

.padding-around-25px {
    padding: 25px;
}

.padding-top-bottom-30px {
    padding-bottom: 30px;
    padding-top: 30px;
}

.image-border-1px {
    border: 5px;
    color: #000000;
}

.row.category-types-row .col-md-12 {
display: flex;
flex-wrap: wrap;
}

.row.category-types-row .col-md-12 .column {
min-height: 100%;
}

.row.category-types-row .col-md-12 .column .thumbnail {
min-height: calc(100% - 22px);
}

/* end John's styes  */


/* Link Styles */

a:hover {
    color: #0288d1;
    text-decoration: underline;
}

a:link {
    color: #039BE5;
    text-decoration: none;
}

a:active {
    color: #039BE5;
    text-decoration: none;
}

a:visited {
    color: #039BE5;
    text-decoration: none;
}

p a:hover {
    color: #0288d1;
    text-decoration: underline;
}

td a:hover {
    color: #0288d1;
    text-decoration: underline;
}
/* end Link Styles */

/* bootstrap overrides */
.noscript {
    position: fixed;
    right: 3px;
    top: 40px;
}

#defaultNavbar1,
#defaultNavbar11 {
    height: 90vh;
    max-height: 90vh;
}


.jd-btn {
    padding: 8px;
    background-color: #039BE5;
    color: #EEEEEE;
    border: none;
}
.jd-btn:hover {
    background-color:#1E7CC2;
}

.jd-btn a {
    color: #EEEEEE;
}
.jd-btn-reset {
    padding: 8px;
    background-color: #777;
    color: #EEEEEE;
    border: none;
}
.jd-btn-reset:hover {
	background-color:#555;
}

.jd-btn-catalog {
    padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
    background-color:#EEE;
	background-image: linear-gradient(to bottom right, #EEE, #CCC);
	/*border-radius: 5px;*/
    color: #039BE5;
    border: #1E7CC2;
	border-width: 1px;
	border-style: solid;
	font-size: 14px;
	/*box-shadow: 2px 2px 2px #777;*/
}
.jd-btn-catalog:hover {
    background-color:#1E7CC2;
	background-image: linear-gradient(to bottom right, #1E7CC2, #186196);
	color: #FFF;
}

#cv2, #cv1 {
	/* checkout Pay Now button*/
	height: 80px;
	border: solid thin #333;
}
#cv2:hover, #cv1:hover {
	/* checkout Pay Now button*/
	background-color: #0E4D81;
}
#cv2 #title, #cv1 #title {
	font-size: 1.5em;
	font-weight: bold;
}
#cv2 #sub, #cv1 #sub {
	font-size: 1em;
}

.removegem {
    padding: 5px;
    background-color: transparent;
    color: #A7A7A7;

    /* border:solid thin #A7A7A7; */
    border: none;
    font-size: 15px;
    cursor: pointer;
}

.removegem a {
    color: #039BE5;
}

.dropdown a {
    text-decoration: none;
}

#menu-toggle-button,
#menu-toggle-button1 {
    width: 90px;
    margin-top: 7px;
}

#banner,
#banner1 {
    background-image: url(art/resp-bg-gems-62.png);
    background-repeat: no-repeat;
    background-color: #413F3F;
}

#banner-background {
    background-image: url(art/resp-bg-gems.png);
    background-repeat: no-repeat;
    background-color: #413F3F;
    height: 123px;
    box-shadow: 0px 5px 5px #727272;
}

#banner-background-img {
    position: absolute;
}

.shaded {
    background-color: rgba(65, 63, 63, 0.65);
}

.dropdown-toggle a {
    text-decoration: none;
    cursor: pointer;
}

.dropdown-toggle:hover {
    background-color: transparent;
}

.navbar {
    border-bottom: none;
}

.navbar-box-shadow {
    box-shadow: 0px 5px 5px #727272;
}

.dropdown-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    padding: 0px 0;
}

.dropdown {
    font-size: 16px;
}

.navbar-header button {
    margin-top: 15px;
}

#dropdown-gemcatalog,
#dropdown-geminfo,
#dropdown-aboutjohn,
#dropdown-gems2jewelry {
    width: 1200px;
    background-color: transparent;
    font-family: FranklinGothicBook, sans-serif;
    color: #777;
    font-size: 16px;
    padding-bottom: 25px;

    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}

#displayAbout,
#displayAwards,
#displayGemcatalog,
#displayInfo {
    max-width: 1200px;
    margin: auto;
    background-color: #fefefe;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#displayShoppingCart {
    width: 100%;
    position: static;
    margin: auto;

    /* background-color: #fefefe;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    padding: 20px;
}

#generic-table-noborder {
    border: none;
    padding: 5px;
}

#generic-table-noborder-white {
    border: none;
    padding: 5px;
    background-color: #FFFFFF;
}

.generic-table {
    border: solid, thin, #252525;
    padding: 5px;
}

.inline {
    display: inline-block;
    width: 48%;
}

.generic-table2 {
    border: 1px solid #777;
    width: 97%;
    padding: 5px;
    background-color: #FFFFFF;
}

.generic-table2 th,
td {
    border: 1px solid #777;
    width: auto;
    padding: 5px;
}

/* set up the hamburger to turn to an X when clicked */
.navbar-toggle  .icon-bar {
    width: 22px;
    transition: all 0.2s;
}

.navbar-toggle  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggle  .middle-bar {
    opacity: 0;
}

.navbar-toggle  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggle.collapsed  .top-bar {
    transform: rotate(0);
}

.navbar-toggle.collapsed  .middle-bar {
    opacity: 1;
}

.navbar-toggle.collapsed  .bottom-bar {
    transform: rotate(0);
}

/* These nav bar styles are for the shopping cart and login/logout links */
.navbar-login {
    display: inline-block;
    margin-top: 19px;
    margin-right: 30px;
    height: 41px;
    background-color: rgba(65, 63, 63, 0.65);
}

.navbar-login a {
    color: #bebeb5;
    text-decoration: none;
}

.navbar-login:hover {
    background-color: transparent;
    color: #F7F7F7;
}

/* override the bootstrap heading font */
h1 {
    /* Styling for main headings */
    color: #323131;
    font-family: museo_sans500, arial,  san-serif;
    font-style: normal;
    font-size: 40px;
}

h2 {
    /* Styling for main headings */
    color: #323131;
    font-family: museo_sans500, arial,  san-serif;
    font-style: normal;
    font-size: 30px;
}

h3 {
    /*Captions ot Taglines */
    font-family: FranklinGothicBook, arial, san-serif;
    text-align: left;
    font-style: normal;
    color: #323131;
}

h4 {
    /*Captions ot Taglines */
    font-family: FranklinGothicBook, arial, san-serif;
    text-align: left;
    font-style: normal;
    color: #323131;
}

/* general positioning and formatting */
.right {
    float: right;
}

.left {
    float: left;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

.logo-img {
    height: 60px;
    margin-top: 56px;
    margin-left: 20px;
}

.quote {
    font-size: 16px;
    font-weight: 700;
    font-family: FranklinGothicBook, san-serif;
}

.shadow {
    box-shadow: 2px 2px 3px #727272;
}

.shadow-white {
    box-shadow: 2px 2px 3px #727272;
    background-color: #FFFFFF;
    padding: 10px;
    margin: 2px;
}

.hide-mobile {
    display: inline-block;
}

.login-table .td {
    color: #323131;
    display: inline-block;
    width: 45%;
    margin-bottom: 5px;
}

.addheight {
    height: 100px;
}

.change-to-pointer {
    cursor: pointer;
}

/******* overlay ******/
#blocked {
    position: fixed;
    height: 100%;
    widows: 100%;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFF;
    z-index: 10005;
    padding: 25%;
}

/******* Social Media ******/
#fb-break {
    clear: both;
    width: auto;
}

.facebook {
    width: 95%;
}

.fb-like {
    width: 95%;
    height: 30px;
}

.fb {
    color: #FFFFFF;
    background-Color: #3C61A4;
    border-Color: #555555;
}

.social_media_fb {
    float: left;
    width: 100px;
}

.social_media_twitter {
    float: left;
    width: 70px;
}

.social_media_email {
    float: left;
    width: 200px;
}

#search-freefind {
    color: #323131;
    font-family: FranklinGothicBook, san-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#view_cart {
    float: right;
}

#shopping_cart_table {
    width: 100%;
}

#shopping_cart_table td {
    border: none;
}

#shopping_cart_table a {
    width: 100%;
    color: #039BE5;
}

#shopping_cart_table a:hover {
    color: #EEEEEE;
    background-color: #039BE5;
}

.small_image_size {
    width: 120px;
    height: 120px;
}

#keep-shopping {
    font-size: 12px;
    color: #3A3A3A;
    position: relative;
    bottom: 10px;
}

#keep-shopping:focus,
#keep-shopping:hover {
    color: #039BE5;
}

#cart-checkout-btn {
    position: relative;
    height: 32px;
    padding: 5px;
    font-weight: bold;
    width: 130px;
}

#cart-header {
    width: 100%;
    margin-top: 20px;
}

#cart-title,
#cart-btns {
    display: inline-block;
}

#cart-btns {
    position: absolute;
    right: 20px;
    top: 50px;
}

.checkout-btn {
    display: table-cell;
    padding: 3px;
}

#cart-msg {
    width: 100%;
    margin-top: 20px;
}

#cart-msg .cart-msg-btn {
    float: right;
}

#cart-msg .cart-msg-content {
    display: inline-block;
}

#login-from-cart {
    width: 100%;
}

#login-btn {
    position: relative;
    display: table-cell;
}

#login-btn .jd-btn {
    font-weight: bold;
    width: 160px;
}

#login-prompt {
    position: relative;
    display: table-cell;
}

/* Zebra striping */
#shopping_cart_table tbody tr:nth-of-type(odd) {
    background: #eee;
}

/* for the shopping cart button */
#shopping-cart {
    position: fixed;
    top: 14px;
    right: 15px;
    padding: 5px;
    z-index: 10000;
    border: none;
    color: #DDDDDD;
    width: 70px;

    /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
}

#shopping-cart:hover {
    color: #FFFFFF;
}

.close-shopping-cart {
    float: right;
}

.empty-cart {
    background-color: transparent;
}

/* hack to leave space for the shoppig cart button next to the bootstrap toolbar */
#room4cart {
    width: 70px;
}

.cart_error {
    clear: both;
    display: block;
}

#inline_link a {
    display: inline;
    background-color: transparent;
    font-size: auto;
}

.show {
    display: block;
}

/******** styles for the checkout page  ********/
#orderbody {
    float: left;
}

#ordersummary {
    width: 250px;
    font-size: 16px;
    float: right;
}

#ordersummary td,
table {
    border-style: none;
    border: none;
    margin: 0px;
    padding: 2px;
}

#ordersummary button {
    width: 100%;
}

#ordersummary table {
    width: 100%;
}

#ordersummary hr {
    padding: 0px;
    margin: 0px;
    border-color: #413F3F;
}

.table-row-checkout div {
    display: inline-block;
    margin: 3px;
    width: 45%;
    vertical-align: middle;
}

.checkout {
    margin-bottom: 20px;
    max-width: 500px;
}

.checkout p {
    max-width: 500px;
}

#checkout-body {
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
}

.btn-full {
    width: 100%;
}

#shippingaddress {
    display: none;
}

.thinbox {
    border: solid thin #413F3F;
    padding-top: 5px;
    padding-bottom: 5px;
}

.satisfactiong {
    width: 240px;
}

#checkout-body input[type="text"] {
    width: 220px;
}

#shipping-domestic,
#shipping-international {
    display: none;
    position: static;
}

/* On the checkout page, hide the US state dropdown when page first loads */
#us-state-ship,
#us-state-bill {
    display: none;
}

/*****  styles for Elavon page   ******/
#checkout-body tr {
    border: none;
}

/************ Styles for Converge Response Page ******/
.gem_link a:hover {
    color: #0288d1;
    text-decoration: underline;
}

/******** Individual gem catalog page styles ********/
#gemcontainer {
    width: 100%;
    margin-bottom: 20px;
}

#gemRetail {
    font-family: FranklinGothicBook, arial, sans-serif;
    font-style: normal;
    font-size: 15px;
    color: #6A6868;
    background-color: #FFFFFF;

    /* box-shadow: 2px 2px 3px #727272; */
    vertical-align: top;
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    clear: both;
    max-width: 1000px;
}

#gemRetail td {
    color: #6A6868;
}

#gemWholesale {
    font-family: FranklinGothicBook, arial, sans-serif;
    font-style: normal;
    font-size: 15px;

    /* box-shadow: 2px 2px 3px #727272; */
    background-color: #413F3F;
    color: #F7F7F7;
    vertical-align: top;
    display: inline-block;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    clear: both;

    /* width:100%; */
}

#gemWholesale a:hover {
    text-decoration: underline;
}

#gemWholesale h3 {
    margin-top: 0px;
}

#gemWholesale p {
    color: #F7F7F7;
}

#gemWholesale td {
    color: #F7F7F7;
}

#gemBigPhoto {
    display: inline-block;
    vertical-align: top;
    width: 45%;
}

#gemBigPhoto img {
    display: block;
    width: 100%;
    padding-bottom: 10px;
}

#gemDesc {
    width: 53%;
    text-align: left;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
}

#gemDesc table {
    width: 100%;
}

#gemDesc td {
    min-width: 170px;
}

#gemDesc table tr {
    vertical-align: top;
}

#gemVideo {
    max-width: 400px;
}

/*  add style for mobile square video support */
#gemvideo-youtube {
	width: 100%;
	height: 400px;
	overflow-y: hidden;
}

/******** Block the retail catalog for logged in wholesale customers ********/
#show_login {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(50,50,50,0.5);
    top: 0px;
    left: 0px;
    z-index: 1000;
}

#show_login_content {
    height: 50%;
    width: 50%;
    margin: auto;
    padding: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fefefe;
}

/******** Catalog Styles ********/
#mainCatalogPage {
    /* catalog sections on the main catalog page */
    display: inline-block;
    margin-right: 20px;
}

.mainCatalogPage-col {
    display: inline-block;
    vertical-align: top;
    width: 170px;
}

#mainCatalogPage article {
    /* catalog sections on the main catalog page */
    width: 135px;
    display: block;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: left;
    font-family: FranklinGothicBook, arial, sans-serif;
    font-style: normal;
    font-size: 15px;

    /* box-shadow: 2px 2px 3px #727272; */
    background-color: #FFFFFF;
}

#mainCatalogSearch {
    /* catalog sections on the main catalog page */
    margin-left: 20px;
    display: inline-block;
    width: 70%;
}

#main-search-table tr {
    vertical-align: top;
}

.catalog {
    margin-bottom: 0px;
    text-align: justify;
    justify-content: space-between;
}

.catalog::after {
    content: '';
    width: 100%; /* Ensures justification for single lines */
    display: inline-block;
}

.catalog article {
    /* Individual gem catalog items */
    /* width: 155px; */
    height: 335px;
    width: 18%;
    margin-top: 15px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;

    /* float: left; */
    display: inline-table;
    padding-left: 0px;
    padding-top: 10px;
    text-align: center;
    font-family: FranklinGothicBook, arial, sans-serif;
    font-style: normal;
    font-size: 15px;

    /* box-shadow: 2px 2px 3px #727272; */
    padding-bottom: 10px;
    background-color: #FFFFFF;
}

.catalog .catalog-spacer {
    width: 18%;
    height: 2px;
    display: inline-table;
    background-color: transparent;
    margin: 0px;
}

#look4more {
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    display: none;
}

.catalog article img {
    /*width:150px;
	height:150px;	*/
    max-width: 100%;
    height: auto;
    width: auto; /* For IE8 */
}

.gem-header {
    height: 60px;
}

.gem-photo {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.gem-footer {
    height: 111px;
    margin-top: 10px;
}

.gem-footer a:hover {
    color: #0288d1;
    text-decoration: underline;
}

.catalog article p {
    text-align: center;
}

.catalog {
    /* max-width:1000px; */
    width: 100%;
    margin: auto;
}

.catalog img:hover {
    outline: 2px solid #0288D1;
}

#catalogIntroContent {
    width: 100%;
}
.catalog .sold {
	display: none;
}
.catalog .sold-show {
	display: inline-table;
}
.catalog .jdselect {
	display: none;
}
.catalog .jdselect-show {
	display: inline-table;
}
#toggle_sold, #toggle_jdselect {
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	display: inline;
}
.toggles {
	display: inline;
}
/******* Body content wrapper ******/
.mainPageContent {
    margin-top: 133px;
}

#mainWrapper {
    margin-top: 133px;
    display: inline-block;
    width: 100%;
}

#mainContent {
    /* Container for text body content */
    margin-top: 40px;
    display: block;
}

#mainContent #searchresults {
    /* Container for search results content */
    margin-top: 20px;
    display: block;
}

#mainContent .catalog {
    /* make the catalog a bit wider */
    width: 100%;
}

#mainContent li {
    color: #323131;
}

#mainContent #sidebar {
    /* Sidebar*/
    width: 252px;
    padding-left: 2%;
    padding-right: 2%;
    float: right;
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-top: 2%;
    font-family: FranklinGothicBook, san-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

#sidebar {
    /* give sidebar some margin in desktop */
    margin-left: 10px;
}

#sidebar #adimage {
    /* Container for Image in sidebar */
    width: 252px;
    height: 346px;
    background-color: #A4A3A3;
    margin-top: 0px;
    float: none;
    overflow: auto;
}

/******* footerbar ******/
#footerbar {
    /* Footer bar at the bottom of the page */
    clear: both;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 50px;
    font-family: FranklinGothicBook, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #413F3F;
    min-height: 250px;	/* make the height at least this so we don't have a white bar underneath it */
}

#footer-content {
    width: 80%;
}

#footer-content a:hover {
    color: #0288D1;
    text-decoration: underline;
}

.footer-buttons {
    float: left;
}

#bottom-nav-buttons a:hover {
    color: #0288D1;
    text-decoration: underline;
}

#bottom-nav-buttons a:link {
    color: #039BE5;
    text-decoration: none;
}

#bottom-nav-buttons a:active {
    color: #039BE5;
    text-decoration: none;
}

#bottom-nav-buttons a:visited {
    color: #039BE5;
    text-decoration: none;
}

#bottom-nav-buttons img {
    margin-right: 20px;
}

#mainContent #bannerImage img {
    /* Actual banner image */
    width: 100%;
}

#videoFaceting {
    width: 640px;
    height: 480px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* gem catalog backgrounds */
.wholesale-title {
    color: #F7F7F7;
}

.catalog .wholesale {
    background-color: #413F3F;
    color: #F7F7F7;
    border-style: none;
}

.catalog .retail {
    background-color: #FFF;
    color: #413F3F;
    border-style: none;
}

#gem-body-wholesale {
    background-color: #413F3F;
    color: #F7F7F7;
    border-style: none;
    clear: both;
}

#gem-body-retail {
    background-color: #F7F7F7;
    color: #413F3F;
    border-style: none;
    clear: both;
}

#gem-body-footer {
    clear: both;
}

#gem-table {
    float: left;
    border: solid;
    border-color: #413F3F;
    background-color: #F7F7F7;
    color: #6A6868;
    font-family: FranklinGothicBook, san-serif;
    font-style: normal;
}

#gem-big-photo {
    max-width: 400px;
    float: left;
}

/* wholesale main catalog page */
#mainWholesaleCatalog {
    width: 100%;
}

#mainWholesaleSidebar {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #fefefe;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#wholesale-info {
    text-align: left;
}

#wholesale-intro {
    text-align: left;
}

#wholesaleCatalogContent {
    width: 100%;
    display: block;
}

#search .search-option {
    display: inline;
}

#wholesaleLogin {
    float: right;
    position: relative;
}

#wholesale-landing-page {
    clear: both;
    text-align: left;
}

#wholesale-landing-page #browse_search #browse {
    width: 100%;
}

#wholesale-landing-page #BtnColor,
#wholesale-landing-page #BtnShape,
#wholesale-landing-page #BtnGemstone,
#wholesale-landing-page #BtnStyle,
#wholesale-landing-page #BtnCategory {
    width: 16%;
}

#wholesale-reg-form td {
    color: #413F3F;
    border: none;
}

#wholesale-reg-form legend {
    margin-bottom: 5px;
	padding: 0px;
	font-size: 22px;
	font-weight: bold;
	color: #000;
}

#wholesale-reg-form input[type=text], #wholesale-reg-form input[type=tel], #wholesale-reg-form input[type=number], #wholesale-reg-form input[type=password], #wholesale-reg-form select, #wholesale-reg-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.wsreg-section {
	background-color: #EEEEEE;
	padding: 20px;
	margin-bottom: 20px;
}
.ws-reg {
    width: 100%;
}

.ws-reg .tdlabel {
    color: #413F3F;
    display: inline-block;
}

.ws-reg .td {
    color: #413F3F;
    display: inline-block;
    width: 100%;
}

.ws-reg .table-row {
    display: block;
	margin-bottom: 10px;
}
/*.ws-reg input[type=text] {
	width: 300px;
}
.ws-reg input, .ws-reg select {
	border: solid thin #2E2D2D;
}*/
#ws-reg-complete {
    width: 90%;
}

#ws-reg-complete td {
    color: #413F3F;
}

/* from generic styles css */
#footerbar a {
    text-decoration: none;
}

.menu_links {
    font-size: 9pt;
    font-family: FranklinGothicBook, Helvetica, Arial, san serif;
}

.awards_pg {
    color: #FFFFFF;
    background-color: rgb(0, 0, 0);
    background-image: url(art/designgallery/designbkgrnd.jpg);
}

.logged_in {
    color: #0277bd;
    font-family: FranklinGothicBook, Helvetica, Arial, san serif;
    text-align: right;
    display: inline;
}

.title {
    font-size: 18pt;
    font-weight: bold;
    color: #003300;
    font-family: FranklinGothicBook, Helvetica, Arial, san serif;
}

.page_title {
    font-size: 18pt;
    font-weight: bold;
    font-family: FranklinGothicBook, Helvetica, Arial, san serif;
}

.highlight {
    background-color: #FDB700;
}

.spacer {
    margin-top: 20px;
}

.spacer-bot {
    margin-bottom: 20px;
}

.bigspacer {
    /* height:100px;	*/
    height: 15vh;
}

.spacer-checkout {
    height: 25vh;
}

.right-spacer20 {
    margin-right: 20px;
}

.white {
    color: #FFFFFF;
}

.blueBold {
    color: #039BE5;
    font-weight: bold;
}

.grayedout {
    color: #868686;
}

.clear {
    clear: both;
}

.view_cart {
    float: right;
    margin-right: 20px;
}

.page_numbers {
    border-top: thin solid #DDD;
    border-bottom: thin solid #DDD;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 10px;
    clear: both;
}

.page_numbers p {
    font: bold 13px FranklinGothicBook, arial, san-serif;
    text-align: center;
    width: 88%;
    line-height: 2.5em;
}

.page_numbers a {
    padding: 5px;
    border: thin solid #DDD;
    text-decoration: none;
}

.page_numbers a:hover {
    background-color: #EEE;
    color: #0288D1;
    text-decoration: underline;
}

.search-radio {
    display: inline-block;
    margin: 5px;
}

.searchtext {
    font: bold 13px FranklinGothicBook, arial, san-serif;
}

.searchtext a:hover {
    color: #0288d1;
    text-decoration: underline;
}

.searchtext_nobold {
    font: FranklinGothicBook, arial, san-serif;
}

.searchtitle {
    font: bold 16px FranklinGothicBook, arial, san-serif;
    text-align: center;
}

#mainCatalogSearch td {
    color: #6A6868;
    font-family: FranklinGothicBook, arial, san-serif;
    text-align: left;
}

#main-search-table {
    border: 1px solid #777;
    width: 100%;
    padding: 10px;
	background-color: #777;
}
#main-search-table label {
	font-size: 1.5em;
	color: #fff;
	margin-top: 20px;
}
#main-search-table .search {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	width: 100%;
	color: #fff;
	border-bottom: 2px solid #999;
}
#range, #mmrange, #carat-sort, #price-sort, #soldgems {
	background-color: #DDD;
	color: #777;
	font-size: 16px;
}
#range, #mmrange, #soldgems {
	padding: 10px;
}
#carat-sort, #price-sort {
	padding: 0px;
}
#range input, #mmrange input {
	width: 75px;
	display: inline-block;
}
#soldgems {
	height: 65px;
}

#main-search-table th,
td {
    border: 1px solid #777;
    width: auto;
    padding: 5px;
}

/* these styles are for the popups on the individual stone pages */
#dropdown-ship,
#dropdown-sg,
#dropdown-sold,
#dropdown-pd,
#dropdown-agta,
#dropdown-memo,
#dropdown-bz,
#dropdown-mail,
#dropdown-misc {
    color: #039BE5;
}

#shippingInfo {
    clear: both;
    display: inline-block;
    width: 100%;
}

.popup-desc {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    padding: 10px;
    border: none;
    box-shadow: 0px 5px 5px #727272;
    color: #413F3F;
    font-size: 12pt;
    z-index: 200;
}

.popup-desc .small {
    font-size: 10px;
}

.popup-desc a {
    color: #039BE5;
}

.popup-desc a:hover {
    color: #0288D1;
}

#popup-sg {
    width: 50%;
}

#popup-ship {
    width: 50%;
    display: none;
}

#popup-sg-checkout {
    width: 240px;
}

#popup-sold,
#popup-pd,
#popup-agta,
#popup-memo,
#popup-bz,
#popup-mail,
#popup-misc {
    width: 200px;
}

#popup-sold p {
    color: #413F3F;
}

#popup-pd p {
    color: #413F3F;
}

#popup-agta p {
    color: #413F3F;
}

#popup-memo p {
    color: #413F3F;
}

#popup-bz p {
    color: #413F3F;
}

#popup-mail p {
    color: #413F3F;
}

#popup-misc p {
    color: #413F3F;
}

.popup-close {
    float: right;
    margin: 8px;
    font-size: 16px;
    color: #999999;
    z-index: 1000;
    opacity: .5;
    cursor: pointer;
}

/* the following styles are for the depth popups on the category pages*/
.pop_cat {
    position: relative;
    color: #3300FF;
    text-decoration: underline;
    z-index: 100;
}

.pop_cat:hover {
    background-color: transparent;
}

.pop_cat span { /*CSS for enlarged image*/
    position: absolute;
    background-color: #FFFFFF;
    padding: 5px;
    left: 100px;
    width: 150px;
    border: none;
    box-shadow: 0px 5px 5px #727272;
    visibility: hidden;
    color: #666666;
    text-decoration: none;
}

.pop_cat:hover span { /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 5px;
    left: 10px; /*position where enlarged image should offset horizontally */
}

/* the following styles are for the email updates button */
.email_update {
    margin: 0;
    padding: 0;
    z-index: 100;
}

.email_update li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: 12px FranklinGothicBook, arial, san-serif;
}

.email_update li a {
    display: block;
    margin: 0 1px 0 0;
    padding: 4px 5px;
    width: 150px;
    background: #006699;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    border: none;
}

.email_update li a:hover {
    background: #BBBBBB;
}

/* the following style is for the Connect with John on Facebook buttons */
input.groovybutton {
    font-size: 16px;
    font-family: FranklinGothicBook, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-color: #3c61a4;
    border-style: none;
    border-width: 0px;
    white-space: normal;
}

#browse_search {
    padding: 10px;
    clear: both;
    font-family: FranklinGothicBook, sans-serif;
    font-style: normal;
    color: rgba(146,146,146,1.00);
    font-size: 12px;
    margin: 0px;
    background-color: #DDD;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.search_options {
    padding: 10px;
    margin-top: 0px;
    text-align: left;
    display: inline-block;
}

#browse {
    display: inline-block;
}

#catalog-nav-button {
    clear: both;
    display: none;
    width: 100%;
    background-color: #777;
    color: #FFF;
    font-size: 20px;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-family: FranklinGothicBook, sans-serif;
    text-align: right;
}

#wholesaleCatalogContent .dropbtn { /* make the drop-downs on the wholesale page slightly narrower */
    background-color: #777;
    color: #FFF;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-family: FranklinGothicBook, sans-serif;
    width: 90px;
    display: inline-block;
    margin: 10px;
}

.dropbtn {
    background-color: #777;
    color: #FFF;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-family: FranklinGothicBook, sans-serif;
    width: 120px;
    display: inline-block;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #70b2e2;
}

.dropdown-content-gemstone1 {
    background: #FFF;
    color: #777;
    overflow: scroll;
    font-family: FranklinGothicBook, sans-serif;
    font-size: 16px;
    box-shadow: 2px 2px 3px #727272;
    text-align: left;
}

.dropdown-content-gemstone1 a {
    padding: 5px 5px;
    text-decoration: none;
    display: inline-block;
    color: #777;
    width: 160px;
}

.dropdown-content-gemstone1 a:hover {
    background-color: #70b2e2;
    color: #FFF;
}

.modal-links {
	/* show in columns */
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	-o-column-width: 150px;
	-ms-column-width: 150px;
	column-width: 150px;
}

/* Styles for the hamburger bars */
.hamburger {
    display: inline-block;
    cursor: pointer;
    z-index: 0;
}

#hammy {
    display: inline-block;
    position: relative;
    top: 5px;
}

.hammybar1,
.hammybar2,
.hammybar3 {
    width: 20px;
    height: 3px;
    background-color: #FFF;
    margin: 4px 0;
    transition: 0.4s;
}

.change .hammybar1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 5px) ;
    transform: rotate(-45deg) translate(-5px, 5px) ;
}

.change .hammybar2 {
    opacity: 0;
}

.change .hammybar3 {
    -webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
}

/******* Styles for the mega nav and button *****/
/*  this id is for the mega nav placeholder on the catalog pages */
/* we will use it when we pull the nav drop-downs into separate master pages */
#mega-nav {
    display: inline-block;
}

.meganav-content p,
h1,

h3,
li {
    /* see the .dropdown-menu Bootstrap override */
    z-index: 3000;
    
}

h2{
  color: #323131;
}

.meganav-content a {
    color: #039BE5;
    text-decoration: none;
}

.meganav-content p a {
    color: #039BE5;
    text-decoration: none;
}

.meganav-content p a:hover {
    text-decoration: underline;
    color: #0288d1;
}

.nav-mega-col li {
    padding-top: 8px;
}

.mega-nav-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.mega-nav-list a:hover {
    /* background-color: #70b2e2;
	color:#fefefe; */
    text-decoration: underline;
    color: #0288D1;
}

.show {
    display: block;
}

.nav-border {
    border-right-color: #B0AEAE;
    border-right-style: solid;
    border-right-width: thin;
}

.menu-highlight {
    display: table-cell;
    padding: 20px;
    color: #999999;
    background-color: #FFFFFF;
    font-family: FranklinGothicBook, san-serif;
    font-style: normal;
    font-weight: 400;
}

.menu-highlight-text a:hover {
    color: #0288d1;
    text-decoration: underline;
}

.nav-mega-col {
    display: table-cell;
    color: #999999;
    background-color: #FFFFFF;
    width: 25%;
    text-align: left;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    font-family: FranklinGothicBook, san-serif;
    font-style: normal;
    font-weight: 400;

    /* height:auto; */
    vertical-align: top;
}

.nav-mega-col .nav-title {
    font-weight: bold;
}

.mega-img {
    width: 100%;
}

.mega-img img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
}

.close-meganav {
    position: relative;
    top: 10px;
    left: 95%;
    font-size: 21px;
    color: #999999;
    z-index: 1000;
    opacity: .5;
    cursor: pointer;
}

.close-meganav-shopping-cart {
    position: relative;
    top: 10px;
    right: 10px;
    font-size: 21px;
    color: #999999;
    z-index: 1000;
    opacity: .5;
    cursor: pointer;
}

.button-label {
    float: left;
    margin: 0px;
    padding: 0px;
    font-size: 10pt;
}

#mobile-menu-button {
    float: right;
    margin: 0px;
    padding: 0px;
}

#displayGemcatalog {
    /* no settings */
}

/******* Modal Menu styles ******/
#privPopup,
#ModalUpdateCart,
#ModalShopping,
#ModalColor,
#ModalShape,
#ModalGemstone,
#ModalStyle,
#ModalCategory {
    display: none;
}

#modalPriv a {
    cursor: pointer;
}

#modalPriv2 a {
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10003; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /* overflow: scroll; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content-cart {
    background-color: #fefefe;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    height: 50%;
    overflow-y: auto;
}

.modal-content-cart h3 {
    font-size: 22px;
    color: #aaa;
    margin-top: 0px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    border: 1px solid #888;
    width: 70%; /* Could be more or less, depending on screen size */
    height: 80%;
    overflow-y: auto;
}

.modal-content a {
    float: left;
}

.modal-content h3 {
    font-size: 22px;
    color: #aaa;
    margin-top: 0px;
}

.scroll4more {
	display: none;
}

#privContent {
    overflow-y: scroll;
}

/* The Close Button */
.close {
    color: #3A3A3A;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.close-cart {
    color: #3A3A3A;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-cart:hover,
.close-cart:focus {
    color: #039BE5;
    text-decoration: none;
    cursor: pointer;
}

.mobile-select {
    display: none;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #FFF;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}


/* START MEDIA QUERIES */
@media screen and (max-width:1850px){
    /* make the drop-down for the nav full width */
    .nav > li.dropdown.open {
        position: static;
    }

    .nav > li.dropdown.open .dropdown-menu {
        display: table;
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    .dropdown-menu>li {
        display: table-cell;
    }

    #dropdown-gemcatalog,
    #dropdown-geminfo,
    #dropdown-aboutjohn,
    #dropdown-gems2jewelry {
        width: 100%;
    }

    .close-meganav {
        left: 47%;
    }
}

/* fix catalog scrolling */
@media screen and (max-width:1601px){
    .catalog article {
        /* Individual gem catalog items */
        width: 22%;
    }

    .catalog .catalog-spacer {
        width: 22%;
    }

    #look4more {
        display: block;
    }
}

/* fix catalog scrolling */
@media screen and (max-width:1086px){
    .catalog article {
        /* Individual gem catalog items */
        width: 30%;
    }

    .catalog .catalog-spacer {
        width: 30%;
    }
}

@media screen and (max-width:1000px){
    #cart-btns {
        display: block;
        position: relative;
        right: 0px;
        top: 0px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet view */
@media screen and (max-width:900px){
    header {
        z-index: 2;
    }

    header #banner {
        height: 100px;
    }

    header #logo {
        left: 10px;
    }

    #mainWrapper {
        margin-top: 100px;
    }

    #mainContent {
        /* Container for the blog post */
        padding-bottom: 0px;
        overflow: hidden;
    }

    #mainContent #sidebar {
        /* Sidebar*/
        width: 200px;
    }

    #sidebar #adimage {
        /* Container for Image in sidebar */
        width: 100%;
        height: auto;
    }

    #mainContent #sidebar #adimage img {
        /* Container for Image in sidebar */
        width: 100%;
        height: auto;
    }

    #mainCatalogPage {
        /* catalog sections on the main catalog page */
        display: inline-block;
        margin-right: 0px;
    }

    .mainCatalogPage-col {
        display: inline-block;
        width: 90%;
    }

    #mainCatalogPage article {
        /* catalog sections on the main catalog page */
        width: 100%;
        margin: 0px;
        font-size: 18px;
    }

    #mainCatalogSearch {
        /* catalog sections on the main catalog page */
        margin-left: 0px;
    }

    .small_image_size {
        width: 80px;
        height: 80px;
    }
}

/* change to 767 because bootstrap doesn't switch to mobile until <=767 and tempalate was breaking on iPad */
@media screen and (max-width:765px){
    #checkout-body {
        width: 95%;
        margin: 5px;
    }

    #ordersummary {
        display: block;
        clear: both;
        width: 100%;
    }

    #orderbody {
        display: block;
        width: 100%;
        clear: both;
    }

    .checkout {
        width: 100%;
    }

    .checkout p {
        max-width: 100%;
    }

    .table-row-checkout div {
        display: block;
        width: 100%;
    }

    .table-row-checkout input {
        width: 100%;
    }

    #checkout-body input[type="text"] {
        width: 100%;
    }

    #mainWholesaleSidebar {
        float: none;
        width: 90%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #login-btn {
        display: block;
        width: 100%;
    }

    #login-prompt {
        display: block;
        width: 100%;
    }

    /* bootstrap overrides */
    #banner {
        height: auto;
        background-size: auto,123px;
        overflow: hidden;
    }

    #banner-background {
        overflow: hidden;
        z-index: 0;
    }

    .shaded {
        background-color: transparent;
    }

    .catalog article {
        /* Individual gem catalog items */
        width: 48%;
    }

    .catalog .catalog-spacer {
        display: none;
    }

    #footer-content {
        width: 90%;
    }

    #browse_search {
        width: auto;
    }

    .menu li a {
        margin-right: 5px;
        padding: 4px 0px;
    }

    .dropbtn {
        width: 100px;
        margin-bottom: 10px;
    }

    .pop_stone span { /*CSS for enlarged image*/
        width: 190px;
    }

    .meganav-content {
        width: 100%;
    }

    #mainCatalogSearch {
        width: 100%;
        font-size: 16px;
    }

    #mainCatalogSearch td {
        font-size: 16px;
    }

    #mainCatalogSearch select {
        width: 90%;
        font-size: 16px;
    }

    .addheight {
        height: 0px;
        display: none;
    }

    #search {
        margin-top: 10px;
    }

    #search .search-option {
        display: block;
    }

    /* get rid of the table display for the dropdown nav */
    .nav > li.dropdown.open {
        position: static;
    }

    .nav > li.dropdown.open .dropdown-menu {
        display: inline-block;
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    .dropdown-menu>li {
        display: inline-block;
    }

    #shopping-cart {
        right: 120px;
        top: 7px;
        border: solid;
        border-color: #333333;
        border-width: 1px;
        padding: 7px;

        /* background-color: #333333; */
    }

    .empty-cart,
    #menu-toggle-button,
    #menu-toggle-button1 {
        background-color: #413F3F;
    }

    .empty-cart:hover,
    .empty-cart:focus,
    #menu-toggle-button:hover,
    #menu-toggle-button:focus,
    #menu-toggle-button1:hover,
    #menu-toggle-button1:focus {
        background-color: #333333;
    }

    .small_image_size {
        width: 60px;
        height: 60px;
    }

    #gemDesc td {
        min-width: auto;
    }
}

/* skinny tablet view */
@media screen and (max-width:700px){
    .hide-mobile {
        display: none;
    }

    #mainContent #sidebar {
        /* Sidebar*/
        width: 200px;
        margin-right: 5px;
    }

    #mainContent #sidebar #adimage {
        /* Container for Image in sidebar */
        width: 100%;
    }

    #mainContent #sidebar #adimage img {
        /* Container for Image in sidebar */
        width: 100%;
    }

    .fb {
        font-size: 10px;
    }
}

@media screen and (max-width:660px){
    #videoFaceting {
        width: 90%;
        height: auto;
    }

    #wholesale-landing-page #BtnColor,
    #wholesale-landing-page #BtnShape,
    #wholesale-landing-page #BtnGemstone,
    #wholesale-landing-page #BtnStyle,
    #wholesale-landing-page #BtnCategory {
        width: 90%;
    }
}

@media (max-width:600px) {
    /* override the navbar fixed bottom for mobile */
    .navbar-fixed-bottom {
        position: relative;
    }

    #catalog-nav-button {
        display: block;
    }

    #catalog-nav {
        display: none;
    }

    .dropdownIcon img {
        width: 32px;
        height: 32px;
    }

    .searchtext {
        font-size: 16px;
    }

    .search_options {
        width: 100%;
        text-align: center;
    }

    .search_options select {
        width: 98%;
        display: block;
        font-size: 18px;
        margin-bottom: 10px;
    }


	#toggle_sold, #toggle_jdselect {
		margin-left: 0px;
		margin-right: 0px;
		display: block;
	}
	
    .right-spacer20 {
        margin-right: 0px;
    }

    .mobile-select {
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-select select {
        font-size: 18px;
        width: 100%;
    }

    .modal-content,
    .modal-content-cart {
        padding: 10px;
        width: 95%; /* Could be more or less, depending on screen size */
    }

    #displayShoppingCart {
        padding: 0px;
    }

    .page_numbers p {
        font: bold 16px FranklinGothicBook, arial, san-serif;
        text-align: center;
        width: 88%;
        line-height: 2.5em;
    }

    #popup-sg,
    #popup-ship {
        width: 80%;
    }

    #popup-sold,
    #popup-memo,
    #popup-bz,
    #popup-mail,
    #popup-misc {
        left: 50px;
    }

    .ws-reg .td {
        display: block;
        width: 95%;
    }

    .ws-reg .table-row {
        margin-bottom: 10px;
    }

    .login-table .td {
        display: block;
    }

    .bigspacer {
        display: none;
    }

	/******** Block the retail catalog for logged in wholesale customers ********/

    #show_login_content {
        height: 80%;
        width: 80%;
        margin: auto;
        padding: 20px;
        position: relative;
        top: 10%;
        transform: translateY(-10%);
        background-color: #fefefe;
    }
	#show_login_content button {
		width:100%;
		font-size: 1.2em;
	}

	.btn, .jd-btn {
		display:block;
		width:100%;
		font-size: 1.2em;
	}

	#cart-checkout-btn {
        width: 100%;
	}
}

/* fix catalog item width */
@media screen and (max-width:570px){
    .catalog article {
        /* Individual gem catalog items */
        width: 100%;
    }
}

@media (max-width:550px) {
    .logged_in {
        display: block;
    }

    #mymeganav {
        width: 300px;
    }

    .nav-mega-col {
        display: block;
        width: 100%;
    }

    .mega-img {
        display: none;
    }

    .nav-border {
        border-bottom-color: #B0AEAE;
        border-bottom-style: solid;
        border-bottom-width: thin;
    }

    #popup-satisfaction .dropdown-menu {
        width: 90%;
    }

    #look4more {
        display: none;
    }

    #gemBigPhoto {
        display: block;
        width: 100%;
    }

    #gemBigPhoto img {
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
    }

    #gemDesc {
        display: block;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Mobile view */
@media screen and (max-width:480px){
    /*  new setting: @media screen and (max-width:550px){ */
    #mainWrapper {
        margin-top: 80px;
    }

    .logo-img {
        height: 40px;
        margin-left: 10px;
        margin-top: 60px;
    }

    header #banner {
        height: 80px;
    }

    .fb {
        font-size: 12px;
    }

    #fb-button {
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    #mainContent #sidebar {
        /* Sidebar*/
        float: none;
        width: 90%;
        padding-top: 13px;
        overflow: auto;
        margin-top: 3px;
        margin-left: 2%;
        padding-bottom: 13px;
    }

    #mainContent #sidebar #adimage {
        /* Container for Image in sidebar */
        width: 252px;
        height: 346px;
        margin-left: auto;
        margin-right: auto;
    }

    #mainContent #sidebar #adimage img {
        /* Container for Image in sidebar */
        width: 252px;
        height: 346px;
    }

    #mainContent #sidebar nav {
        /* Navigation bar for links in sidebar */
        width: 96%;
        padding-top: 7px;
        font-family: FranklinGothicBook, san-serif;
        font-style: normal;
        font-weight: 400;
    }

    #mainContent #sidebar {
        /* sidebar */
        padding-bottom: 0px;
    }

    .catalog article {
        /* Individual gem catalog items */
        width: 100%;
        height: 365px;
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 10px;
        text-align: center;
        font-size: 18px;
        padding-bottom: 10px;
    }

    .gem-article {
        /* big gem photo and table */
        float: left;
        width: 400px;
    }

    #footerbar {
        font-size: 10px;
        clear: both;
        max-height: none;
    }

    /* make text a little bigger on mobile */
    h1,
    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    p {
        font-size: 16px;
    }
}

@media (max-width:400px) {
    .dropdown-content-gemstone1 {
        height: 85%;
    }
}

/*@media (max-height:800px) and (max-width:800px) {
	.scroll4more {
		display: block;
		position: absolute;
		bottom: 10px;
		right: 10px;
	}
}*/

/* John Styles */
.freefind-nav > li.dropdown .dropdown-menu {
    width: 100%;
    text-align: center;
    right: 0;
    overflow: hidden;
}

.freefind-nav > li{
    z-index: inherit;
}

.freefind-nav label{
    display: block;
    margin-bottom: 0;
    font-weight: normal;
}



@media(max-width:767.98px){
    .freefind-nav > li.dropdown .dropdown-menu {
        height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
        }
}

[id^=drop]:checked + .container-fluid > .collapse{
    display: block;
}

.freefind-nav input[type="checkbox"] {
    display: none;
}

/*
@media(max-width:767px){
    [id^=gemcatalog]:checked + #dropdown-gemcatalog,[id^=geminfo]:checked + #dropdown-geminfo,[id^=gems2jewelry]:checked + #dropdown-gems2jewelry,[id^=aboutjohn]:checked + #dropdown-aboutjohn{
        display: block;
        max-width: 450px;
        z-index: 9999;

    }
}
*/

@media(min-width:768px){
    .freefind-nav > li.dropdown:hover .dropdown-menu {
        display: block;
    }
    /* 06-10-21 disable these, the nav should be full width
    #dropdown-gemcatalog,#dropdown-geminfo,#dropdown-gems2jewelry,#dropdown-aboutjohn{
        width: 600px;
    }
    #dropdown-gemcatalog{
        left: 50%;
        transform: translateX(-10%);
    }
    
    #dropdown-geminfo{
        left: 50%;
        transform: translateX(-33%);
    }
    
    #dropdown-gems2jewelry{
        left: 50%;
        transform: translateX(-58%);
    }
*/
    
    

}



@media(min-width:992px){
    /* 06-10-21 disable these, the nav should be full width
    #dropdown-gemcatalog,#dropdown-geminfo,#dropdown-gems2jewelry,#dropdown-aboutjohn{

        width: 800px;
    }
    #dropdown-gemcatalog{
        left: 50%;
        transform: translateX(-26%);
    }
    
    #dropdown-geminfo{
        left: 50%;
        transform: translateX(-44%);
    }
    
    #dropdown-gems2jewelry{
        left: 50%;
        transform: translateX(-62%);
    }
    
    #dropdown-aboutjohn{
        left: 50%;
        transform: translateX(-86%);
    }
    */
}

@media(min-width:1200px){
    /* 06-10-21 disable these, the nav should be full width
    #dropdown-gemcatalog,#dropdown-geminfo,#dropdown-gems2jewelry,#dropdown-aboutjohn{

        width: 1000px;
    }
    
    #dropdown-gemcatalog{
        left: 50%;
        transform: translateX(-50%);
    }
    
    #dropdown-geminfo{
        left: 50%;
        transform: translateX(-62%);
    }
    
    #dropdown-gems2jewelry{
        left: 50%;
        transform: translateX(-75%);
    }
    
    #dropdown-aboutjohn{
        left: 50%;
        transform: translateX(-91%);
    }
*/
}

@media(min-width:1400px){
    /* 06-10-21 disable these, the nav should be full width
    #dropdown-gemcatalog,#dropdown-geminfo,#dropdown-gems2jewelry,#dropdown-aboutjohn{

        width: 1200px;
    }
*/
}

.navbar-nav li.dropdown label.nav-link span.dropdown-toggle{
    color: #bebebe;
    position: relative;
    display: block;
    padding: 10px 15px;
    line-height: 22px;
}

.navbar-nav li.dropdown:hover label.nav-link span.dropdown-toggle,.navbar-nav li.dropdown:focus label.nav-link span.dropdown-toggle{
    color: #fff;
}


.navbar-nav li.dropdown label.nav-link{
    font-weight: normal;
}

@media(min-width:768px){
    
.navbar-nav li.dropdown label.nav-link span.dropdown-toggle{
    padding-top: 19px;
    padding-bottom: 19px;
}
}



@media(min-width:768px){
    .search-results,.search-headline,.search-count,.search-page-links,.search-form {
        font-size: inherit;
    }
    
}

.search-form input[type="submit"] {
    margin-right: 9px;
}

.search-form input[type="radio"] {
    margin-right: 3px;
    margin-left: 4px;
}

.search-nav-form-table {
    margin-bottom: 15px;
}