.logo{
  float:left;
  width:5%;
}

.menuFeatcontainer{
  /* width:80%; */
  margin:auto;
  /* overflow:hidden; */
  /* border: 5px solid #ccc; */
}



.featureContainer{
    margin-top:5%;
    align:right;
}

.featureBox{
  display:block;
  width:15%;
  float:left;
  /* border: 3px solid #afa624; */ /* gold */
  border: 3px solid #F4BF24;
  /* border: 3px solid #07a7fe; */ /* commented on 3nov2018: blue */
  overflow:hidden;
  margin-left: 5%;
  height: 6%;
  /* background-color:#f4f4f4; */  /* commented on 3nov2018: remove yellow color*/
  text-align: center;
  vertical-align: center;


	/* background styles */
	position: relative;
	/*
	display: inline-block;
	padding: 15px 25px;
	*/
	/* background-color: green; */ /*for compatibility with older browsers*/ /* commented on 3nov2018: remove yellow color*/
	/* background-image: linear-gradient(green,lightgreen); */ /* commented prior to 3nov2018*/
	/* background-image: linear-gradient(#393d48,#393048); */ /* commented prior to 3nov2018*/
	/* background-image: linear-gradient(#f8d673,#f3bc18); */ /* commented on 3nov2018: remove yellow color*/

	/* text styles */
	text-decoration: none;
	color: #64717f;
	font-size: 30px;
	font-family: Papyrus, Tillana, sans-serif; /*sans-serif*/
	font-weight: 100;

	border-radius: 30px;
	box-shadow: 0px 1px 4px -2px #333;
	text-shadow: 0px -1px #333;
}


/* 
.featureBox:after{
	content: ''; 
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	/* background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2)); * / 
	 background: linear-gradient(rgba(251,222,135,0.4), rgba(247,212,107,0.1));
}
*/  /* commented on 3nov2018: remove yellow color*/


.featureBox:hover{
	/* background: linear-gradient(#073,#0fa); */
	/* background: linear-gradient(#392d28,#392028); */
	background: linear-gradient(rgba(251,222,135,0.8), rgba(247,212,107,0.2)); 
	/* border: 6px solid #78cbff; */
}

h2{
  font: 15px/1.5 Arial, Helvettica, sans-serif;
}

h3{
  font: 12px/1.5 Arial, Helvettica, sans-serif;
  font-weight: bold;
}



a {
   text-decoration: none;
   /* color: #000; */
   color: #64717f;
   font-size: 12px;
   font-family: Tillana, sans-serif; /*sans-serif*/
   font-weight: 100;
} 


a:hover{
   /* color: #000; */
   font-size: 13px;
   text-decoration:underline;
}
/*
*/

.headerAdvt{
  text-align: center;
  font: 12px/1.5 Arial, Helvettica, sans-serif;
  width: 60%;
  float: left;
  color: #000000;
}

.infoMsgLight{
  text-align: center;
  font: 12px/1.5 Arial, Helvettica, sans-serif;
  /* float: left; */
  color: #a9b3bc;
}

.txtHead3{
  display:block;
  /* float:center; 
  border:2px solid red;*/
  margin-top:15px;
  font-size:20px;
  margin-bottom:5px;
  
}

.normalTextSct{
  /* text-align: left; */
  font: 12px/1.5 Arial, Helvettica, sans-serif;
  /* width: 100%;*/
  display:block;
  float: left;
  margin-left:15px;
  margin-right:15px;
  color: #000000;
}

.topLinksContainer{
  width: 85%; 
  float: right;
}

.headerLogin{
  text-align: center;
  font: 12px/1.5 Arial, Helvettica, sans-serif;
  /* width: 5%; */
  float: right;
  color: #000000;
  width:90px;
  /* margin-top:200px; */
  margin-left:2px;
  margin-right:2px;
  /* border:2px solid green; */
}

.headerLogin a{
	color:black;
	font-size:15px;
}

/* hk: to be commented, for debug use only */
/*
div{
  border:2px red solid;
}
*/

.glass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 15px 25px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 25px;
	font-family: Papyrus, Tillana, sans-serif; /*sans-serif*/
	font-weight: 100;
}

/* Login modal pop-up : Start */
	/*
	*{margin:0px; padding:0px; font-family:Helvetica, Arial, sans-serif;}
	*/
	*{margin:0px; padding:0px; font-family:Papyrus, Tillana, sans-serif;}
	
	
	/* Full-width input fields */
	#modal-wrapper input[type=text], input[type=password]{
	    width: 90%;
	    padding: 12px 20px;
	    margin: 8px 26px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	    /* font-size:16px; */
	}
	
	/* Set a style for all buttons */
	button {
	    background-color: #64717f; /* grey */ /* #4CAF50; */ /* green */
	    color: white;
	    padding: 14px 20px;
	    margin: 8px 26px;
	    border: none;
	    cursor: pointer;
	    width: 90%;
	    font-size:20px;
	}
	button:hover {
	    opacity: 0.8;
	}
	
	/* Center the image and position the close button */
	.imgcontainer {
	    text-align: center;
	    margin: 24px 0 12px 0;
	    position: relative;
	}
	.avatar {
	    width: 200px;
		height:200px;
	    border-radius: 50%;
	}
	
	/* The Modal (background) */ 
	.modal {
		display:none;
	    position: fixed;
	    z-index: 1;  /*  ** The key css class with restrictions actions on the parent window (main_panel) */
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    background-color: rgba(0,0,0,0.4);
	}
	
	/* Modal Content Box */
	.modal-content {
	    background-color: #fefefe;
	    margin: 4% auto 15% auto;
	    border: 1px solid #888;
	    width: 40%; 
		padding-bottom: 30px;
	}
	
	/* The Close Button (x) */
	.close {
	    position: absolute;
	    right: 25px;
	    top: 0;
	    color: #000;
	    font-size: 35px;
	    font-weight: bold;
	}
	.close:hover,.close:focus {
	    /* color: red; */
	    opacity: 0.3;
	    cursor: pointer;
	}
	
	/* Add Zoom Animation */
	.animate {
	    animation: zoom 0.6s
	}
	@keyframes zoom {
	    from {transform: scale(0)} 
	    to {transform: scale(1)}
	}
	
/* Login modal pop-up : End */	

/* Partner-Login/Register Modal: Start */
	
	#partner-modal-wrapper input[type=text], #partner-modal-wrapper input[type=password], #partner-modal-wrapper input[type=email] {
	    width: 90%;
	    padding: 12px 20px;
	    margin: 8px 26px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	    font-size:16px;
	}

	#registerPartner input[type=text], #registerPartner input[type=password], #registerPartner input[type=email] {
	    width: 80%;
	    padding: 4px 20px;
	    margin: 6px 26px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	    font-size:13px;
	}
/* Partner-Login Modal: End */

/* Nominate/Subscribe Modal: Start */
	
	#nominate-modal-wrapper input[type=text], input[type=password], input[type=email] {
	    width: 90%;
	    padding: 4px 4px; /* 12px 20px;*/
	    margin: 6px 13px; /* 8px 26px; */
	    display: inline-block;
	    border: 1px solid #F4BF24; /* gold */ /* #ccc; */ /* black */
	    box-sizing: border-box;
	    /* font-size:15px; */
	}

/* Nominate/Subscribe Modal: End */

.menucontainer{
  width:80%;
  float:right;
  /* border: 1px solid #ccc; */
}

.menucontainer ul li{
  width:25%;
  float:left;
  list-style: none; 
  text-align:center;
  color: #0060B6;
}

.menucontainer ul li:hover{
  ;
}

/* Jewel category Submenu (submenu modal/rollover)*/ 
	.smenumodal {
	    display:none;
	    position: fixed;
	    z-index: 1;  /*  ** The key css class with restrictions actions on the parent window (main_panel) */
	    left: 200px;
	    top: 95px; 
	    width: 80%;
	    height: 50%;
	    overflow: auto;
	    border-top: 1px solid #888;
	    /* background-color: rgba(0,0,0,0.4); */
	}
	
	/* Jewel category Submenu Content Box */
	.smenumodal-content {
	    /* background-color: #fefefe; */
	    margin: 1% auto 5% auto;  /* determines where submenu starts, like Couples, Gifts*/
	    /* border: 1px solid #888; */
	    width: 40%; 
		/* padding-bottom: 30px; */
	}

	.smenumodal-content ul li{
	  width:20%;
	  float:none;
	  list-style: none;  
	   color: #0060B6;
	}
	
	.smenulinks{
	  float:left;
	}
	
	.smenupic{
	  width:40%;
	  height:50%;
	  float:right;
	}

	#feacomparecntnr:hover, #feacomparecntnr:active, #feacomparecntnr:focus{
	  ;
	}
	
/* Feature Modal (rollover) */ 
	/* featuremodal -- Used for a rollover display */
	.featuremodal {
	    display:none;
	    position: fixed;
	    z-index: 1;  /*  ** The key css class with restrictions actions on the parent window (main_panel) */
	    left: 120px;
	    top: 82px; 
	    width: 80%;
	    height: 50%;
	    overflow: auto;
	    border-top: 1px solid #888;
	    /* background-color:#00aa00; */
	    border: 3px solid #F4BF24;
	    color: #64717f;
	    /* background: linear-gradient(rgba(251,222,135,0.8), rgba(247,212,107,0.2));  */ /* same color as feature box */
	    background: #ffffff; //white
 	}
 	

	/* Feature Content Box */
	.featuremodal-content {
	     background-color: #fefefe;
	    margin: 1% auto 5% auto;  /* determines where feature starts*/
	    /* border: 1px solid #888; */
	    width: 80%; 
		/* padding-bottom: 30px; */
	}

	.featuremodal-content ul li{
	  width:20%;
	  float:none;
	  list-style: none;  
	   color: #0060B6;
	}
	
	.featurelinks{
	  float:left;
	}
	
	.featurepic{
	  width:40%;
	  height:50%;
	  float:right;
	}

	#feacomparefilter {float:left; width:100%; height:auto; font-size:11px; }
	#metalfilter {border:1px solid black; width:35%; float:left;}
	#stonefilter {border:1px solid black; width:55%; float:left;}



/* Feature Modal (Normal table rather than a rollover) */ 
 	/* featuremodaltbl -- used for normal table display */
	.featuremodaltbl {
	    width: 85%;
	    //height: 50%;
	    overflow: auto;
	    /* border-top: 1px solid #888; */
	    /* background-color:#00aa00;  */
	    border: 3px solid #F4BF24;
	    color: #64717f;
	    /* background: linear-gradient(rgba(251,222,135,0.8), rgba(247,212,107,0.2));  */ /* same color as feature box */
	    background: #ffffff; //white
 	} 	
 	
	/* Feature Content Box */
	.featuremodal-content-tbl {
	     background-color: #fefefe;
	    margin: 1% auto 5% auto;  /* determines where feature starts*/
	    /* border: 1px solid #888; */
	    width: 100%; 
		/* padding-bottom: 30px; */
	}

	/*
	.featuremodal-content ul li{
	  width:20%;
	  float:none;
	  list-style: none;  
	   color: #0060B6;
	}
	
	.featurelinks{
	  float:left;
	}
	
	.featurepic{
	  width:40%;
	  height:50%;
	  float:right;
	}

	#feacomparefilter {float:left; width:100%; height:auto; font-size:11px; }
	#metalfilter {border:1px solid black; width:35%; float:left;}
	#stonefilter {border:1px solid black; width:55%; float:left;}
	*/
	
	/* #prcent_charges {border:1px solid black; float:none; text-align:center;} */

@media(max-width: 768px){
  .topLinksContainer
  , .menuFeatcontainer{
    width:100%;
    float:none;
  }
  
  .featureBox
  ,.headerAdvt{
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 1%;
    height: 10%;
    width:90%;
  }
  
  .headerLogin{
    width: auto;
    padding: 5px;
    /* margin-right:3%; */
  }
  
  .headerLogin a{
    font-size:13px;
  }
  
  #nominatelnk{
  	float:none;
  	width:100%;
  }

 .menucontainer ul li{
    width:30px;
  }
  
  button{
    font-size:12px;
  }
  
  /* Modal Content Box */
  .modal-content {
     width: 85%; 
	/*
     background-color: #fefefe;
     margin: 4% auto 15% auto;
     border: 1px solid #888;
     padding-bottom: 30px;
     */
  }

  /* The Close Button (x) */
  .close {
	    right: 1px;
	    /*
	    position: absolute;
	    top: 0;
	    color: #000;
	    font-size: 35px;
	    font-weight: bold;
	    */
	}

  /* Advertisement vide0 */
  #advtVideo{
  	width: 380px;
  	height: 260px;
  }

}