@import url('https://fonts.googleapis.com/css?family=&display=swap');

head{
		  margin: 0;
		  height: 100vh;
		 /* font-family: Arial, Helvetica, sans-serif;*/
                 /*font-family: Papyrus, Tillana, sans-serif;*/
                 "Times New Roman", Times, serif;
}

body{
  /*
  font-family: Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:1.5;
  */
  /*font:13px/1.5 Arial, Helvettica, sans-serif;*/
  font:13px/1.5  "Times New Roman", Times, serif;
  padding:0;
  margin:0;
  height: 100vh;
 /* background-color:#f4f4f4; */ /* Traversy original */
}

/* Global */
.container{
  width:100%;
  margin:auto;
  overflow:hidden;
}

.opencontainer{
  width:100%;
  margin:auto;
  overflow-x:auto;
  overflow-y: hidden;
  text-align:center;
  align:center;
}

ul{
  margin:0;
  padding:0;
} 

h1{
  margin-top:5px;
  font-size:30px;
  margin-bottom:5px;
  
}



.button_1{
  height:38px;
  background:#64717f; /* grey */ /* #e8491d -- organe*/
  border:0;
  padding-left:20px;
  padding-right:20px;
  color:#ffffff;
  width:200px;  /* observation: when 'width' specified through #newsletter input[type="submit"] it is not reflected*/
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

	/* hk: to be commented   
	div{
	  border:#e8491d 3px solid;
	}
	 */

/* Tablular display : Compare Jewellers: Begin*/
  /* https://html-cleaner.com/features/replace-html-table-tags-with-divs/ */
/*  
.rTable    	{ display: table; }
.rTableRow      { display: table-row; }
.rTableHeading  { display: table-header-group; }
.rTableBody     { display: table-row-group; }
.rTableFoot     { display: table-footer-group; }
.rTableCell, .rTableHead  { display: table-cell; }
*/

  /* https://www.w3schools.com/css/css3_flexbox.asp */
  /* table usig flexbox: begin */

  /* table usig flexbox: end */

.rTable {
  	display: table;
  	width: 100%;
  	min-width:800px;
}
.rTableRow {
  	display: table-row;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
}
.rTableCell, .rTableHead {
  	display: table-cell;
  	padding: 3px 1px;
  	border: 1px solid #999999;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
  	font-weight: bold;
}
.rTableFoot {
  	display: table-footer-group;
  	font-weight: bold;
  	background-color: #ddd;
}
.rTableBody {
  	display: table-row-group;
}

.tabTable {text-align:center; width:100%; float:none; display:block;} /* Note: .rTable is more reliable for a table alignment than tabTable, so replace any of tabTable with rTable*/
.tabRow {text-align:center; width:100%; display:block; font-size:11px;}
.tabColHead10 {border:1px solid black; box-sizing: border-box;width:80px; float:left; font-weight:bold; text-align:center;}
.tabColHead15 {border:1px solid black; box-sizing: border-box;width:120px; float:left; font-weight:bold; text-align:center;}
.tabColHead30 {border:1px solid black; box-sizing: border-box;width:240px; float:left; font-weight:bold; text-align:center;}
.tabCol10 {border:1px solid black; box-sizing: border-box; width:80px; float:left; text-align:center;}
.tabCol15 {border:1px solid black; box-sizing: border-box; width:120px; float:left; text-align:center;}
.tabCol30 {border:1px solid black; box-sizing: border-box; width:240px; float:left; text-align:center;}

.tabColHead {font-weight:bold;}
.tabCol80 {border:1px solid black; box-sizing: border-box; width:80px; float:left; text-align:center; vertical-align:middle;}
.tabCol120 {border:1px solid black; box-sizing: border-box; width:120px; float:left; text-align:center; vertical-align:middle;}
.tabCol160 {border:1px solid black; box-sizing: border-box; width:160px; float:left; text-align:center; vertical-align:middle;}
.tabCol240 {border:1px solid black; box-sizing: border-box; width:240px; float:left; text-align:center; vertical-align:middle;}


/*
.tabColHead10 {border:1px solid black; width:9%; float:left; font-weight:bold; text-align:center;}
.tabColHead15 {border:1px solid black; width:14%; float:left; font-weight:bold; text-align:center;}
.tabColHead30 {border:1px solid black; width:29%; float:left; font-weight:bold;  text-align:center;}
.tabCol10 {border:1px solid black; width:9%; float:left; text-align:center;}
.tabCol15 {border:1px solid black; width:14%; float:left; text-align:center;}
.tabCol30 {border:1px solid black; width:29%; float:left; text-align:center;}
*/
/* Tablular display : Compare Jewellers: End */		

.greenfg{
  color:#32CD32;
  font-weight:bold;
}

/* logo blue */
.bluefg{
  color:#48aadf;
  font-weight:bold;
}

/* logo gold*/
.goldfg{
  color:#F4BF24;
}

.goldbg{
  background-color:#F4BF24;
}

.silverbg{
  background-color:#C0C0C0;
}


/* Global: End */

/* Header */
header{
  /* background:#35424a; */ /* Traversy original */
  /* color:#ffffff;  */ /* 29Nov2018: commented as the h2 not displayed in Partner registration */
  padding-top:3px;
  min-height:70px;
  /* border-bottom:#e8491d 3px solid; */
  border-bottom:#F4BF24 1px solid;  /* grey */ /* #e8491d -- organe*/ /* 0060B6  -- blue */ /* #64717f grey */
  padding:0px;
}

/*
.headerIndex{
	padding:0px;
	border-bottom:3px solid #F4BF24;
}
*/



header nav a{
  color:#ffffff;
  text-decoration:none;
  text-transform:uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline; /* the default for span tag; does not add newline at end*/
  padding: 0 20px 0 20px; /* top right bottom left*/
}

header #branding{
  float:left; 
}


/* "margin" and "float" are the key things that makes the next content (navigation bar) to start immediately after the text, thus things displayed on same line.
Default "float" attribute 
*/

header #branding h1{
  margin:10px; 
}

header nav{
  float:right;
  margit-top:10px;
}

header .highlight, header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  /* font-weight:bold;*/
}

/* Showcase */

	/*	
	#showcase{
	  min-height:200px;
	  max-height:350px;
	  /* background: url('../img/EyeMask.jpg') no-repeat 0 -10px; * /
	  text-align:left;
	  color:#2e3f52; /* logo black   #48aadf; -- logo blue   #425263; --logo gray   #64717f;   Grey  #0060B6; -- Blue  color:#e8491d; --Orange * /
	}
	*/

	#showcase {
	  background-image: url("../img/sr/2_laptop.jpg");
	  background-color: black; /* #cccccc; */
	  /* width:100vw; */
	  min-height:80%;
	  max-height:100%;
	  /* height: 550px; */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
	}



#showcase .container{
/*  width:90%;
  margin-left:5%;  
  margin-right:5%;  
*/  
  /* margin-top:3%;  */
  text-align: center;
}

#showcasecntnr{
  width:100%;
  min-height:200px;
  max-height:350px;
  margin:0px;
  display:block;
}


/*
#showcasecntnr{
	margin:0px;
	width:100%;
}
*/

#showcase img{
  width:15%;  /* Its better to keep the image size fixed, thus using px rather than %*/
  float:left;
}

/*
#showcasecaptions{
  width:85%;
  float:left;

  display:block;
  margin:auto;
   border:solid 3px green; 
}
*/

#showcase h1{
  margin-top:20px;
  font-size:50px;
  margin-bottom:20px;
  float:none;
}

#showcase p{
  font-size:20px;
  float:none;
  padding-top:18px;
  text-align:center; 
  margin-bottom:20px; 
  margin-top:10px; 
  color:white; 
  background-image:url("../img/sr/home_play_icon10.png"); 
  background-repeat:no-repeat;
  background-position:center; 
  height:60px;
}

#showcase a{
	color:white;
}

#showcase a:hover{
	text-decoration:none;
}

/* Newsletter */

/* 
	#newsletter{
	  padding:15px;
	  color:#ffffff;
	  margin-top:1%;
	  /* background:#35424a; * / /* Traversy original * /
	}

	#newsletter h1{
	  float:left;
	  color:#64717f; /* grey * / /* #e8491d -- organe* /
	  align:right; 
	}

	#newsletter form{
	  float:right;
	  /* width:1000px; * /
	  /* margin-top:15px; * /
	}

	#newsletter input[type="email"]{
	  padding:4px;
	  height:38px;
	  width:250px;
	  float:left;
	}

	#newsletter input[type="submit"]{
	  width:100px;
	  float:left;
	  border:5px solid black;
	}
*/

/* Search : Begin*/
	#searchsct, #searchsctheader{
	  /* padding:5px; */
	  color:#ffffff;
	  margin-top:1%;
	  margin-bottom:100px;
	}

	#searchsct form, #searchsctheader form{
	  width:60%;
	  float:none;
	  margin-left:20%;
	  margin-right:20%;
	}
	
	#searchsct ul, #searchsctheader ul{
	  list-style-type:none;
	  margin:0;
	  padding:0;
	  overflow:hidden;
    	}
	
	#searchsct ul li, #searchsctheader ul li{
	  width:24%;
	  float:left;
	}

	#searchsct ul li a, #searchsctheader ul li a{
	  display: block;
	  color: black;
	  text-align: center;
	  margin-left:2px;
	  margin-bottom:3px;
	  padding: 10px;
	  text-decoration: none;
	  border:2px solid #F4BF24;
	}
	
	#searchJewellery{
	  background: linear-gradient(rgba(251,222,135,0.8), rgba(247,212,107,0.2)); 
	}


	#searchsct ul li a:hover, #searchsctheader ul li a:hover{
	  background: linear-gradient(rgba(251,222,135,0.8), rgba(247,212,107,0.2)); 
	}
	
	#srchbar{
	  /* height:40px; */
		/* height:50px; */
		width:55%;
		display:inline-block;
		text-align:center;

	}
	
	.searchsctinput{
		    /* padding: 14px; */
		    padding-left: 4px;
			padding-top:0px;
		    padding-bottom:0px;
		    height: 38px;
		    width: 75%;
		    float: left;
		    margin-left: 2px;
    		border: 2px solid #F4BF24;
    		font-size: 20px;

    	}
    	
	

	#searchsct input[type=text]{
	  padding:4px; 
	  height:38px;
	  width:65%; /* 150px; */  /* 7Aug2019: For original multi featured design index-multifeatured_initial_design_upto_7Aug2019.jsp, use 35% */
	  float:left;
	  margin-left:2px;
	  border:1px solid #F4BF24;
	}

	/*
	#searchsct input[type="submit"]{
	  width:30%; /* 100px; * /
	  float:left;
	  padding-left:0px;
	  padding-right:0px;
	}
	*/
	 
	/*  
	#srchbtn{
	  height:auto;
	  background:#64717f; /* grey * / /* #e8491d -- organe* /
	  padding-left:4px;
	  /*padding-right:20px; * /
	  color:#ffffff;
	  width:25%;
	  margin:0 0 0 2px;
	}
	*/
	
	#srchbtn{
		    height: 42px;
		    /* background: #64717f; */
		    /* background: white; */
		    background: #F4BF24;
		    padding-left: 4px;
		    padding-top:0px;
		    padding-bottom:0px;
		    /* padding-right: 20px; */
		    /* color: #ffffff; */
		    color: white;
		    width: 20%;
		    float:left;
		margin: 0 0 0 10px;
		border: 2px solid #F4BF24;
		font-size: 20px;
    	}
	
/* Search : End*/


/* TryNow : Begin*/
	#trynow a:hover{
		font-color: black;
		font-size: 18px;
		decoration:none;
	}
	
	
	video, #video, canvas, #statusMsg{
		width:720px;
		height: 560px;
	}
	
	#video{
		z-index: 0;
	}	
	
	
	
	#canvas{
		z-index: 100;
	}
	.layer2{
				position: absolute;
				z-index: 10;
				/* margin-top:50px; */
		}
	
	#video, canvas, #facedetect{
		padding: 10px;
	
	}

	#facedetect {
		margin: 0;
		/* padding: 10px; */
		top: 0;
		left: 0;
		position: relative;
	}

        canvas {
	 margin: 0;
	 /* padding: 10px; */
	 left: 0;
	 top: 0;
	 position: absolute;
        }
        
        #statusMsg p{
		padding: 320px 0;
	}



/* TryNow : End*/

/* Slider : Begin*/

.slider {
  width: 900px;
  height: 50px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 50px;
  flex-shrink: 0;
  height: 100%;
}

.jewelSlider {
  width: 900px;
  /* height: 124px; */
  display: flex;
  overflow-x: auto;
}
.jewelSlide {
  width: 120px;
  flex-shrink: 0;
  height: 100%;
  padding:5px;
}

/* arrows : begin */
.arrow {
  border: solid #F4BF24;
  border-width: 0 8px 8px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
/* arrows : end */

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 4px;
}
::-webkit-scrollbar:horizontal {
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 1px solid #ffffff;
}
/*
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
*/

@media only screen and (max-width: 768px) {
 .jewelSlider, .slider {
   width: 100%;
 }
}
/* Slider : End */




/* Boxes */

#boxes{
  margin-top:50px;
  margin-bottom:50px;
 /* border-bottom:#F4BF24 3px solid;*/
  padding-bottom:50px;
}

#boxes .box{
  float:left;
  width:30%;
  padding:10px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

#boxes .box img{
  width:220px;
}

#boxes h3{
  font-size:18px;
  font-family: Showcard Gothic, Luckiest Guy;
  font-weight: normal;
}

/* Featured Stores */
.listboxgroup{
	width:98%;
	margin:auto;
	min-height:200px;
}	

.listbox{
  float:left;
  width:33%;
  padding:3px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  /* border:2px solid red; */
}

#featuredstores .listbox img{
  width:150px;
}

/*
#featuredstores h1{
  border-bottom:#F4BF24 3px solid;
}
*/

/* Deals & Promotions: Begin*/
#deals{
  margin:75px 15px 75px 15px;
  padding-top:25px;
  border-top:1px dotted black;
}

.box2{
  width:50%;
  float:left;
  text-align:center;
}

#deals p{
  font-size: 16px;	
}

.box5{
  width:20%;
  float:left;
  text-align:center;
}

/* Deals & Promotions: End*/

	#jDesign{
		border-top:1px dotted black;
	}


/* feedback : begin*/
	#feedback {
		border-top:1px dotted black;
	}

	#feedback .container{
		padding:50px;
		margin:auto;
		width:50%;
		text-align:center;
	}

	#feedback input[type=text], #feedback input[type=email]{
	    width: 40%;
	    padding: 10px 20px;
	    margin: 8px 20px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	    /* font-size:16px; */
	}

/*feedback : End*/

/* calculator : begin*/
	#calculator {
		border-top:1px dotted black;
		background-image: url(../img/sr/last_bg.jpg);
	}

	#calculator .container{
		padding:50px;
		margin:auto;
		width:70%;
		text-align:center;
		min-width: 550px;
	}

	#calculator input[type=text], #calculator input[type=email]{
	    width: 40%;
	    padding: 10px 20px;
	    margin: 8px 20px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	    /* font-size:16px; */
	}
	
	#calculator input[type=text]::placeholder::placeholder{
	    color: #807d77;
	}

/*calculator : End*/

 #socialm img{
         width:6%; padding-left:3%;
   }

  /*
 .phonenum{
            width:150px; height:70px;
   }
   */

/*  about page -Main-col */
article#main-col{
  float:left;
  width:65%;
}

/* about page - Sidebar */
aside#sidebar{
  float:right;
  width:30%;
  margin-top:10px;
}

/* Services */

ul#services li{
  list-style:none;
  /* padding:20px; */
  border:#cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}

aside#sidebar .quote input, aside#sidebar .quote textarea {
  width:90%;
  padding:5px;
}


/* Partner: Price Entry*/
#priceentry input[type="number"]{
  padding-left:10px;
}


/* Footer */

footer{
  padding:20px;
  margin-top: 20px;
  color:#ffffff;
  background-color:black;  /* #64717f grey */ /* #e8491d -- organe*/ /* 0060B6  -- blue */
  text-align:center;
}
/*
footer .container{
  margin:auto;
  width:80%;
}
*/


.ftrgrp{
  width:480px;
  margin:auto;
  text-align:center;
}

footer .sct{
  /* display:block;  */  /* observation: setting display to block makes the content flow to next line when the window size is too small*/
  float:left; 
  padding:20px;
  /* background-color: #64717f; */
  /* width:21%; 
   text-align: center; */   /* for displaying in boxes of equal size*/
}

footer a{
  color:white;
}

/* Media Queries : for responsive design to suit smaller displays */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  /* #newsletter h1,
  #newsletter form, */
  #searchsct form,
  #boxes .box,
  article#main-col,
  aside#sidebar,
  footer .sct, footer .ftrgrp,
  .listbox,
  #deals .box2, #trynow .box2, #aboutus .box2, #gPainting .box2, #jDesign .box2
  {
    float:none;
    text-align:center;
    width:100%;
  }
  
  /*  /* working on laptop but not on mobile * /
  #video, #facedetect, canvas
  {
    float:none;
    text-align:center;
    width:100%;
    height:auto;  /*** Important to valign jewel with video * /
    padding: 0px;
  }
  */

	  video, #video, #facedetect, canvas, #statusMsg
	  {
	    float:none;
	    text-align:center;
	    width:100vw;
	    padding: 0px;
	    object-fit: cover;
	    height:60vh;  /*** Important to valign jewel with video */
	  }
	  
	  #statusMsg p{
	    padding: 42vh 0;
	  }
	  
	    
	    /*
	    video, #video, #facedetect, canvas
	    {
	      
	    }
	    */

  
  
  /* debug: to be commented  
    #video{
        border: 1px dotted red;
    }
    
    canvas{
        border: 3px solid green;
    }
  
    #facedetect{
        border: 1px solid blue;
    }
  */

/*  header{
    padding-bottom:10px;
  }*/

  header li{
    padding: 0 10px 0 10px; /* top right bottom left*/ /* Bug#101 */
  }

  #showcase{
    background-size:contain;
    background-image: url("../img/sr/2_mobile.jpg");
    min-height:50%;
    min-height:330px;
  }

  #showcase h1 {
	margin-top: 30px;
  }

  #showcase .container
  ,showcasecntnr{
    margin-left:0%;  
    margin-right:0%;  
    float:left;  
    text-align:center;
    width:100%;
  }

/* 
   #showcase img
  ,#showcasecaptions{
    float:none;
    width:50%;
    text-align:center;
        display: block;  /* key thing to control img layout to center * /
        margin-left: auto; /* key thing to control img layout to center* /
        margin-right: auto; /* key thing to control img layout to center * /
  }
*/ 

  #showcase img
  {
    float:none;
    /* width:50%; */
     width:100px; 
    text-align:center;
        display: block;  /* key thing to control img layout to center*/
        margin-left: auto; /* key thing to control img layout to center*/
        margin-right: auto; /* key thing to control img layout to center */
  }
  
  #showcase h1{
    margin-top:10px;
    font-size:30px;
    text-align:center;

  }
    
  #showcase p{
    font-size:15px;
    text-align:center;
    background-image:url("../img/sr/home_play_icon10_mini.png");
  }
/*
  #newsletter button, .quote button{
    display:block;
    width:100%;
  }
  
  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
*/  

  /* #searchsct button, */
  .quote button{
    display:block;
    width:100%;
  }
  
  #searchsct form, .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
    margin-left:0%;
    margin-right:0%;
  }

  /*
  #srchbtn{
	  width:30%;
   }
   */
  
  #srchbar{
		width:90%;
  }

  #showcasecntnr{
		min-height:150px;
  }

 .searchsctinput{
	width: 65%;
	font-size:15px;
  }

  #srchbtn{
		width: 25%;
		margin-left: 5px;
		font-size: 15px;
  }

  #feedback input[type=text], #feedback input[type=email]
  {
  	width: 90%;
  }

  
  #calculator input[type=text], #calculator input[type=button]
  {
  	/* width: 80%;*/
	padding: 3px 5px;
	margin: 10px 5px;
  }
  
  #feedback .container, #calculator .container{
	padding:10px;
	width:90%;
	min-width:150px;
	
  }
  
  #socialm img{
         width:10%;
   }
   
   /*
   .phonenum{
            width:150px; height:70px;
   }
   */

}
/* Media Queries : End */


@media(max-width: 311px){
    #showcase{
      min-height:410px;
    }
}


	/* Media Queries for smaller heights (while entering text fields in Search/Location) : Begin*/
	/* @media(max-height: 200px){

	  #showcase{
	    min-height:100vh;
	  }

	}
	*/

	/* Media Queries for smaller heights (while entering text fields in Search/Location) : End */