@charset "utf-8";
/* CSS Document */
* {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	box-sizing: border-box;
}
/*
* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}
*/
/*  * :not(selector){}  */

@font-face {
	font-family: "Century Gothic";
	src: url( "../gothic.eot");
	src: url("../gothic.woff") format('woff'), url('../gothic.ttf') format('truetype');
}
body{
	max-width: 1140px;
	margin:0 auto;
	font-family: 'Quicksand', sans-serif;
/*	background-color:#E1E1E1;	  hsla(345,4%,18%,1.00)*/
    background-color: white;	/*  hsla(345,4%,18%,1.00)*/
	padding: 5px 5px 5px 5px;
	font-size: 16px;
}

html {
    scroll-behavior: smooth;
    background-image: url("../images/tet-orlando.jpg");
    background-size: 100% auto;
}

#captchaimg{
    font-size: 24px;
}
.tabON{
	border: 2px solid #900;
	border-bottom: none;
	border-radius: 5px 5px 0px 0px;
    text-align: center;
	font-family: Century Gothic;
	font-size: 14px;
    font-weight: 800;
	cursor: pointer;
    padding: 4px 7px;
    text-decoration: none;
    color:darkblue;
}
.tabOFF{
	border: 2px solid #900;
	border-left: none;
    border-right: none;
    border-top: none;
    text-align: center;
	font-family: Century Gothic;
	font-size: 14px;
    font-weight: 200;
	cursor: pointer;    
    padding: 4px 7px;
    text-decoration: none;
}
.CenGothicH1 {
	font-family: Century Gothic;
	display: block;
  	font-size: 2em;
	margin: 0.8em 0 0.3em 0;
  	font-weight: bold;
	color: #00F;
	}
h1{
	font-family: Century Gothic;
	display: block;
  	font-size: 2em;
	margin: 0.5em 0 0.3em 0;
  	font-weight: bold;
	color: #009;
}
h2{
    font-family: Century Gothic;
	font-size: 1.6em;
    margin: 0 0 0.2em 0;
  	font-weight: bold;
	color: #009; 
}
h3{
    font-family: Century Gothic;
	font-size: 1.2em;
	margin: 0 0 0.2em 0;
  	font-weight: bold;
	color: #009;     
    }
.CenGothicH2 {
	font-family: Century Gothic;
	font-size: 1.6em;
  	font-weight: bold;
	color: #00F;
	}
.CenGothicH23 {
	font-family: Century Gothic;
	font-size: 1.4em;
  	font-weight: bold;
	color: #00F;
	}
.CenGothicH3 {
	font-family: Century Gothic;
	font-size: 1.2em;
  	font-weight: bold;
	color: #00F;
	}

.CenGothicH4 {
	font-family: Century Gothic;
	font-size: 1em;
  	font-weight: bold;
	color: #00F;
/*    text-decoration: none;*/
	}

.CenGothicH3blue {
	font-family: Century Gothic;
	font-size: 1.1em;
	amargin: 0.3em 0 0.3em 0;
  	font-weight: bold;
	color: blue;
	}
.CenGothicH3burgundy {
	font-family: Century Gothic;
	font-size: 1.1em;
	amargin: 0.3em 0 0.3em 0;
  	font-weight: bold;
	color: #9e0e2c;
	}
.title-amazon2{
	font-family: Century Gothic;
	font-size: 1.5em;
  	font-weight: bold;
	color: #138be4;    
}
.title-amazon3{
	font-family: Century Gothic;
	font-size: 1.1em;
  	font-weight: bold;
	color: #138be4;    
}
.webname {
	font-family: Century Gothic;
	font-size: 1.2em;
	amargin: 0.3em 0 0.3em 0;
  	font-weight: bold;
	color:blue;
	}

.smallnote{
	font-size:13px;
}
.smallnotered{
	font-size:13px;
	color: red;
}
.smallnoteblue{
	font-size:13px;
	color: blue;
}
.regularred{
	color:red;
}
.regularblue{
	color:blue;
}
.regularburgundy{
	color:#6E0623;
}
.priceunit{
	font-family: Century Gothic;
	font-size: 1.5em;
	amargin: 0.5em 0 0.5em 0;
  	font-weight: bold;
	color: green;
    text-align: left;
}
.priceunitred{
	font-family: Century Gothic;
	font-size: 1.5em;
	amargin: 0.5em 0 0.5em 0;
  	font-weight: bold;
	color: red;
}
.step1 {
    font-weight: bold;
    padding: 10px 20px 5px 20px;
    position: relative;
}
.step1::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f04b";
    position: absolute;
    left: 0px;
}
.upload {
    display:inline-block;
    font-weight: bolder;
    text-decoration: none;
    background-color:rgba(45,63,233,0.70);
	border-radius: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
	color: white;
	padding: 4px 10px 3px 30px;
	border: 1px solid #0011FF;    
    position: relative;
}
.upload:hover{
    background-color:rgba(45,63,233,1);
}

.upload::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f093";
    position: absolute;
    left: 8px;
}

.redwhite{
	background: red;
	color: white;
	font-weight: bolder;
}
.red-box-note{
	font-size: 20px;
	border-left: 5px solid red;
	padding-left: 5px;
	font-weight: bold;
	margin-left: 2px;
}
.green-box-note{
	font-size: 20px;
	font-weight: bold;
	border-left: 5px solid green;
	padding-left: 5px;
	margin-left: 2px;
}
.textSpecial{
	font-family: century gothic;
	font-size: 13px;	
	color:#0000ff;	
	padding: 5px 5px;
	background-image:url("../images/specialcell.gif");
	background-size: 100% 100%;
}
.textSpecialRed{
	font-family: arial black;
	font-size: 16px;
	font-weight: bolder;
	color:red;	
}
.bestprice {
    background-image: url("../images/bestprice.gif");
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.mbutton{
  width: auto;
	height:30px;
  padding:2px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
	color: blue;
	background: #eee;
	margin: 0px 3px 0px 3px;
	text-align: center;
	cursor: pointer;
	flex: 1;
}
input[type=codemtext] {
  width: 100px;
  padding:2px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 18px;
	margin: 0px 2px 0px 0px;
	text-align: center;
}
input[type=smtext], smselect, smtextarea {
  width: 87%;
  padding:2px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
	margin: 0px 2px 0px 0px;
	text-align: center;
}
input[type=mtext], select, textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 18px;
  font-family: 'Quicksand', sans-serif;
}
input[type=email] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-size: 18px;
}
input:required {
  background-color: yellow;
}
textarea:required {
  background-color: yellow;
}


input[type="submit"] {
        margin-top: 10px;
        height: 34px;
        width: 154px;
        border: none;
        /* border-radius: 15px; */
        cursor: pointer;
        background-image: url("../images/submit.gif");
		background-color: transparent;
    }

select.regular{
	width: auto;
	padding: 0;
	border-radius:0;
}

.col-25 {
  float: left;
  width: 25%;
  amargin-top: 4px;
}

.col-75 {
  float: left;
  width: 75%;
  amargin-top: 4px;
}
.col-20 {
  float: left;
  width: 20%;
  amargin-top: 4px;
}
.col-30 {
  float: left;
  width: 30%;
  amargin-top: 4px;
}
.col-33 {
  float: left;
  width: 33%;
  margin-top: 4px;
}
.col-40 {
  float: left;
  width: 40%;
  padding: 0 5px;
}
.col-50 {
  float: left;
  width: 50%;
  padding: 0px 5px;
}
.col-60 {
  float: left;
  width: 60%;
  padding: 0 5px;
}
.col-70 {
  float: left;
  width: 70%;
  padding: 0 5px;
}
.col-80 {
  float: left;
  width: 80%;
  padding: 0 5px;
}
.col-90 {
  float: left;
  width: 90%;
  padding: 0 5px;
}
.col-10 {
  float: left;
  width: 10%;
  padding: 0 5px;
}
.col-100 {
  float: left;
  width: 100%;
  padding: 0 10px;
    text-align: center;
}
.col30 {
  flex:1;
  padding: 5px 0px 5px 0px;
  text-align: center;
}
.col70 {
  flex:2;
  padding: 5px 0px 5px 0px;
    text-align: center;
}
.col20 {
  float: left;
  width: 20%;
}
.col80 {
  float: left;
  width: 80%;
}
.col100 {
  width: 100%;
  display: block;
  text-align: left;
}

/* Clear floats after the columns */
.row{
	padding: 10px 0 0 0;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.newrow{
    margin: 0 auto;
    display: flex;
}
/* END COMMON */

/* header */
header{
	width: 100%;
	display: block;
}

header .header-area{
	padding: 0;
	background-color: white;
	border-bottom: 1px solid #eaeaea;
}
header .header-area .container{
	padding: 0px;
	max-width: 100%;
}
header .header-area .container .topaddress{
	text-align: center;
	margin-bottom: 10px;
}
header .header-area .container .topaddress ul{
	list-style-type: none;
	padding: 0 20px;
	margin: auto;
	overflow: hidden;
}
header .header-area .container .topaddress ul li{
	display: inline-flex;
	font-size: 14px;
	color: darkblue;
	margin-right: 15px;
}
header .header-area .container .topbanner{
	display: flex;
}
header .header-area .container .topbanner .logo{
	flex:1;
}
#logo-img{
    max-width: 100%;
	height: 0 auto;
	cursor: pointer;
}
header .header-area .container .topbanner .topseal{
	flex:2;	
}
header .header-area .container .topbanner .topseal ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: right;
}
header .header-area .container .topbanner .topseal ul li{
	display: inline-flex;
	text-decoration: none;
	margin-right: 10px;
}
header .header-area .container .toplink{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
header .header-area .container .toplink .slogan{
	flex: 3;
	font-family: Pacifico;
	font-size: 15px;
}
header .header-area .container .toplink .toplinks{
	flex: 2;
}
header .header-area .container .toplink .toplinks ul{
	list-style-type: none;
}
header .header-area .container .toplink .toplinks ul li{
	display: inline-block;
	margin-right: 20px;
}
header .header-area .container .toplink .toplinks ul li a{
	text-decoration: none;
	display: inline-block;
}

/* Nav */
nav{
	display: flex;
	background-color:hsla(223,90%,19%,1.00);
	/* #2D3FE9 */
}
#mynav{
	line-height: 32px;
	flex:5;
}
.mynavclass{
	
}
.mynavclass a {
  	float:left;
	display: block;
  	color: #f2f2f2;
  	text-decoration: none;
  	line-height: 32px;
	padding: 0px 10px 0px 10px;
}
.mynavclass a:hover{
	background-color:rgba(4,0,165,1.00);
	color:yellow;
	font-weight: bolder;
}
.mynavclass a.activemenu{
	atext-transform: uppercase;
	color:yellow;
	font-weight: bolder;
}
.baricon{
	float:right;
	margin-right: 10px;
	display: none;
	padding: 5px 0px;
}
.baricon a{
	color: white;
}
.barcart{
	float:right;
	margin-right: 15px;
    padding: 5px 0px;
}

.barcart a{
    text-decoration: none;
    color:greenyellow;
    font-size: 18px;
    font-weight: 800;
}
/* END nav */ 
/* END header */

/* section area before each esction */
.section-title-area{
	display: flex;
	margin: 0;
	padding: 10px 0 10px 0;
	min-height: 60px;
	background: rgba(223,226,255,1.00) ;
}
.section-title-area .filloutform-arrow{
	flex:1;
	background-image: url("../images/fillout.gif");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	display: block;
}
.section-title-area .click-arrow{
	flex:1;
	background-image: url("../images/clickpackage.gif");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	max-height: 56px;
	display: block;
	align-items: center;
}
.section-title-area .click-qty-package{
	flex:1;	
	background-image: url("../images/clickqtypackage.gif");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	display: block;
}
.section-title-area .click-a-price{
	flex:1;	
	background-image: url("../images/clickaprice-arrow.gif");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	display: block;
}
.section-title-area .click-more-info{
	flex:1;	
	background-image: url("../images/click-more-info.gif");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 100%;
	display: block;
}
.section-title-area .section-content{
	display: flex;		/*block*/
	text-align: center;
	flex:6;
	align-items: center;
}

.section-title-area .section-content .span-title{
	font-size: 18px;
	display: block;
	align-items: center;
	flex:4;
	padding: 0 10px;
	text-align: left;
}
.section-title-area .section-content .promise{
	flex:2;
}
.section-title-area .section-content .promise ul{
	adisplay: inline-flex;
	list-style: none;
	font-size: 12px;
	color: blue;
}
.section-title-area .section-content .promise ul li{
	margin: 0 10px 0 10px;
	display: block;
	flex-direction:row;
	text-align: left;
}
.product-spe{
	padding: 10px 20px;
	background:rgba(250,250,250,1.00);
	font-size: 13px;

}
.product-spe p{
	font-weight: bolder;
	color: brown;
}
/* END SECTION AREA*/


/* QUICK ORDER INFO */
#quickorder{
}

#quickorder .form-order-info{	
	width: 100%;
	background-color: white;
}
#quickorder .form-order-info .form-title{
	padding: 10px 5px;
}
#quickorder .form-order-info .form-title .item-info{
	max-width:100%;
	margin: auto;
}
#quickorder .form-order-info .form-title .row .col-50.upload-link{
	padding: 0px 20px;
}
#quickorder .form-order-info .form-title .row .col-50.upload-text{
	padding: 0px 20px;
	font-size: 14px;
}

#quickorder .form-order-info .form-tab{
	margin: 5px 0px;
	padding: 1px 0px;
	display: inline-flex;
}

#quickorder .form-order-info .form-tab a{
	padding: 4px 5px 4px 5px;
	text-decoration: none;
}
#quickorder .form-order-info .form-content{
	display: block;
	max-width: 100%;
/*	background: rgb(204,204,204);*/
    background: white;
}
#quickorder .form-order-info .form-content .instantform{
	max-width: 100%;
	display: flex;
}
#quickorder .form-order-info .form-content .instantform .sign-info{
	flex:1;
	text-align: center;
}
#quickorder .form-order-info .form-content .instantform .sign-info_new{
	flex:1;
	width: 100%;
	height: 450px;
	background-image: url("../images/Blankcustom.gif");
	background-repeat: no-repeat;
	background-size: 100% 100%;
/*    07/2022:*/
    position: relative;
}
#quickorder .form-order-info .form-content .instantform .sign-info_new_all{
	flex:1;
	width: 100%;
	height: 480px;
	background-image: url("../images/Blankcustomall.gif");
	background-repeat: no-repeat;
	background-size: 100% 100%;
    position: relative;
}
#quickorder .form-order-info .form-content .instantform .sign-info_new .sample-image{
    display: block;
    max-width: 25%;
    bottom: -5px;
    left:0;
    position: absolute;
}
.sample-image-all{
    width: 100%;
    bottom: 0px;
    text-align: center;
    position: absolute;
}
.sample-image-all .leftcol{
  float: left;
  width: 50%;
  padding: 0px 5px;
}

.sample-image-all .rightcol{
  float: left;
  width: 50%;
  padding: 0px 5px;
    
}
#sample-image{
    max-height: 140px !important;
    width: auto;
}
#imgPreviewMe{
    max-height: 140px;
    width: auto;
}

#quickorder #content {
  margin-top: 20px;
  width: 87%;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-size: 18px;
  height: 120px;
}
#quickorder #txtitem{
  width: 100%;
  height: 80px;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-size: 18px;	
  color: red;
  background: Cornsilk;
  
}
#quickorder #instruction{
	resize: none;
}
.form-col{
	width: 100%;
	text-align: center;
}

.form-col .color-info{
	max-width: 90%;
	text-align: center;
	margin: auto;
}
.form-col .color-info .cbocolor{
	float:left;
	width:33.33%;
	text-align:center;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.form-col .color-info select {
  width: 90%;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.form-col .option-magnetic{
	max-width: 90%;
	margin: auto;
	padding: 10px 0 0 0;
	text-align: center;
	display: flex;
}
.option-magnetic .option-check-magnetic{
	flex: 1.5;
}
.option-magnetic .option-check-magnetic-img{
	flex: 1;
}
.option-magnetic .option-check-magnetic-text{
	flex: 4;
}
#quickorder .form-order-info .form-content .instantform .client-info{
	flex:1;
	abackground: rgba(208,242,251,1.00);
	padding: 10px 5px;
}
.contact-area{	
}
#quickorder .form-order-info .form-notice{
	max-width: 100%;
	padding: 5px 5px;
	text-align: center;
	font-weight: bolder;
}

#designonline{
	max-width: 100%;
	background: white;
	display: none;
}

/* END QUICK ORDER INFO */
/* sample-layout tab */
.sample-layout{
	max-width: 100%;
	background: white;
	display: none;
}
.sample-layout .category{
	max-width: 100%;
	aheight:450px;
}
.sample-layout .tlayout{
	max-width: 100%;
	aheight:450px;	
	background: #F2F2F2;
}
.sample-layout .div-cat{
	padding-left: 20px;
}
.sample-layout .div-cat ul{
	list-style: none;
}
.sample-layout .div-cat ul li{
	padding: 5px 0;
}
.r-image0{
	width: 100%;
	height: auto;
	border: 5px solid transparent;
}
.r-image{
	max-width: 100%;
	height: auto;
	border: 5px solid transparent;
	cursor: pointer;
}
.r-image:hover{
	border: 5px solid rgba(0,24,255,0.50);
	transition: 0.3s;
}

.product-icons{
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    padding: 5px 0px;
}
.r-image0i{
    max-width: 90%;
    height: 375px;
    object-fit:contain;
/*	border: 3x solid transparent;*/
}
.r-imagei{
	max-width: 60px;
	height: auto;
	border: 3px solid transparent;
	cursor: pointer;
}
.r-imagei:hover{
	border: 3px solid rgba(0,24,100,0.50);
	transition: 0.3s;
}

.tlayout{
	max-width: 100%;
	overflow-x: auto;
	text-align: center;
	height:450px;
}
.tb-layout{
	width: 100%;
	abackground: red;
	border-collapse: collapse;
}
.tdlayout{
	margin: 5px;
}
/* END sample-layout tab */

/* group button in everypage */
.group-buttons{
	align-items: center;
	display: block;
	flex-wrap: wrap;
}
.group-buttons .mybutton{
	display: inline-block;
	margin: 10px 5px;
    cursor: pointer;
}
.group-buttons .mybutton a{
	text-decoration: none;
	background-color:rgba(45,63,233,0.70);
	border-radius: 15px;
	color: white;
	padding: 5px 10px;
	border: 1px solid #0011FF;
}
.group-buttons .mybutton a:hover{
	background-color:rgba(45,63,233,1);
}
/* group button in everypage */
.bottom-nav{
	padding: 20px 10px;
}


/* Package list */
.group-contents{
	width: 100%;
	padding: 0px;
	background-color: white;
}
.group-contents .col-50{
	max-width: 100%;
}
.group-contents .col-50.preview{
	padding: 10px 10px;
	text-align: center;
}
.group-contents .col-50.preview .imgshow{
	max-height: 400px;
}
.group-contents .col-50.preview .row{
	display: flex;
	max-width: 90%;
	margin: auto;
}
.small-icon-preview{
	max-width: 100%;
}

.group-contents .col-50.preview .row.package-desc{
	max-width: 100%;
	display: block;
	text-align: left;
}
.proceed-area{
    max-width: 100%;
    margin: 0 auto;
}
.proceed-area .item-area1{
	width:100%;
	margin: auto;
	display: flex;
}
.proceed-area .item-area1 p{
	flex: 3;
	text-align: left;
}
.proceed-area .item-area1 .right-button{
	flex: 1;
	text-align: right;
}
.proceed-area .item-area2{
	width: 100%;
	background: Cornsilk;
}
.proceed-area .item-area2 p{
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}
.proceed-button{
	text-align: center;
    cursor: pointer;
}

.group-contents .col-50.packageprice{
	text-align: center;
	padding: 10px 10px;
}
.group-contents .col-50.packageprice .pricelist-content{
	background: white;
	width: 100%;
	margin: auto;
}
.group-contents .col-50.packageprice .pricelist-content .pricelist-table{
	width: 100%;
	border-spacing: 0px;
	font-size:16px;
}
.group-contents .col-50.packageprice .pricelist-content .pricelist-table tr{
	height: 40px;
}
.group-contents .col-50.packageprice .pricelist-content .pricelist-table80{
	width: 80%;
	margin: auto;
	border-spacing: 0px;
	font-size:16px;
}
.rowunselected{
	aheight: 26px;
	background-color: #f4f4f4;
}
.rowunselected:hover{
	aheight: 26px;
	box-shadow: 0 0 10px 1px rgba(0, 140, 186, 0.5);
	background-color:wheat;
	cursor:pointer;
}
.rowselected{
	aheight: 26px;
	background-color: yellowgreen;
}
.group-contents .col-50.packageprice .pricelist-content .pricelist-table th,.pricelist-table80 th{
	text-align: center;
	font-weight: bolder;
	border-bottom : 1px solid black;
	border-top: 1px solid black;
	height: 30px;
	background-color: white;
}
.group-contents .col-50.packageprice .pricelist-content .pricelist-table td, .pricelist-table80 td{
	border-bottom : 1px solid #c1c1c1;
}

/* END Package list */

/* FOR PACKAGE GROUPS ICON AT TOP PAGES */
#sign-groups, #stake-groups{
	max-width: 1140px;
	margin: auto;
	padding: 0px;
	background-color: white;
}
#sign-groups .row, #stake-groups .row{
	text-align: center;
	max-width: 90%;
	margin: auto;
	padding-top: 10px;
}
.sign-group-icon{
	display: inline-flex;
	flex-wrap: wrap;
}
.sign-group-icon .group-icon{
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 0 10px 1px transparent;
	align-items: center;
	display: block;
	margin: 4px 2px;
	font-size: 14px;
	flex: 1;
	min-width: 100px;
/*	max-width: 300px;*/
	
}
.sign-group-icon .group-icon:hover{
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 0 10px 1px rgba(0,140,186,0.5);
}
.sign-group-icon .group-icon img{
	max-width: 80%;
	height: auto;
	padding: 10px 0px;
}

/*for new group of top icon */
#top-page{
    display: flex;
}
.left-sidebar{
    display: block;
}
.package-area{
    padding-left: 30px;
    padding-right: 30px;
    border-left: #999 1px solid;
    display: block;
}

#group-package-icon{
	display: block;
	flex-wrap: wrap;
}
.package-icon{
    border: 2px solid #c9f2ff;
	box-shadow: 0 0 10px 1px transparent;
	align-items: center;
	display: block;
    margin-bottom:20px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 5px;
	font-size: 14px;
	flex: 1;
	min-width: 130px;
    position: relative;
    cursor: pointer;
}
.package-icon img{
	max-width: 80%;
	height: auto;
/*	padding: 5px 0px;*/
}
.package-icon:hover{
/*	border: 1px solid #ddd;*/
	border-radius: 8px;
	box-shadow: 0 0 10px 1px rgba(0,140,186,0.5);
}
.icon-chosen{
    background-color: #c9f2ff;
}
.green-label{
	position: absolute;
	top: -2px;
	left: -2px;
    background:#0E7A17;
    color: white;
    font-size: 12px;
    padding: 2px 10px;
}
.best-seller{
	position: absolute;
	top: -1px;
	left: -1px;
    background:#e67a00;
    color: white;
    font-size: 14px;
    padding: 2px 10px;
}


.pkg-line{
    display: flex;
    margin-bottom: 30px;
    border: 1px solid #EBEBEB;  
    cursor: pointer;
}
/*
.pkg-line:hover{
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 0 2px 1px rgba(0,140,186,0.5);
}
*/

.pkg-line .pkg-img{
    width: 20%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 5px;
    
    position: relative;
    background: #EBEBEB;
}
.pkg-line .pkg-img img{
    max-width: 100%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.pkg-line .pkg-content{
    width: 80%;
    padding-top: 5px;
    padding-left: 10px;
    text-align: left;
}

.pkg-line .pkg-content .pkg-title{
    font-size: 18px;
    color:black;
    font-weight: 800;
}
.pkg-line .pkg-content .pkg-price{
    font-size: 24px;
    padding-top: 7px;
    font-weight: bolder;
}
.pkg-line .pkg-content:hover .pkg-title{
    color:#CD4C19;
}

.addtocart-button{
	text-align: left;
    padding-top: 10px;
    cursor: pointer;
}

/*product detail area */
.product-info{
    padding: 20px 10px;
}
.detail-title{
    font-size: 18px;
    color:black;
    font-weight: 800;
}
.detail-spe{
    padding: 10px 5px 10px 5px;
    border-top: 1px solid #ccc;
    text-align: left;
}


#sign-groups .row.instore-special{
	padding: 20px 0px;
}

/* END PACKAGE GROUPS ICON */


/* Footer */
footer{
}
footer .footer-area{
	text-align: center;
}
footer .footer-area .footer-seal{
	padding: 10px 0;
	text-align: center;
	background-color: #E9E9E9;
}
footer .footer-area .footer-seal ul{
	list-style: none;
	display: flex;
	overflow: hidden;
}
footer .footer-area .footer-seal ul li{
	display: block;
	text-align: center;
	align-items: center;
	flex: 1;
    padding-left: 10px;
}
footer .footer-area .copyright{
	text-align: center;
	background-color: #545454;
}	
footer .footer-area .copyright ul{
	list-style: none;
}
footer .footer-area .copyright ul li{
	display: inline-flex;
	font-size: 14px;
	margin-right: 15px;
	color: white;
}
footer .footer-area .copyright ul li a{
	color: yellow;
	text-decoration: none;
}
/* END Footer */


.package-preview{
    position: relative;
	width: 80%;
    margin: 0 auto;
    padding: 0 0;
}
.package-preview-re{
    position: relative;
	width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.image-note{
	position: absolute;
	top: 15%;
	right: 0;
	width: 30%;
	height: auto;
}

.call-us{
	float: right;
	align-items: center;
	display:flex;
}


#tb-colors{
    width: 100%;
    background: #f1f1f1;
    font-size: 0.9em;
}
#tb-colors th{
    background: #3880CF;
    color: white;
    font-weight: 200;
}
#tb-colors th.th1, th.th2{
    width:49%;
} 
#tb-colors .col1{
    width: 30%;
}
#tb-colors .col2{
    width: 19%;
}
#tb-colors .col3{
    width: 1%;
    color:white;
}

#choosetemplate{
    padding: 10px 0 20px 0;
}
.customize-button{
    font-size: 16px;
    font-weight: 400;
    color: red;
    padding: 5px 5px 3px 5px;
    cursor: pointer;
    text-decoration: none;
}

#shopperapproved{
    padding-top: 20px;
    padding-bottom: 20px;
}

.submit-area{
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
	display: flex;
}
.sample-instant-form{
    max-width: 100%;
    margin: 0 auto;
	flex: 1;
}
.submit-button{
	flex: 1;
	margin: 0 auto;
}
.gotop{
    padding: 10px 0;
}

.banner-sample{
	background: white;
}

.variation-area{
    padding: 10px 0px;
    
}
.variation-area ul{
    display: inline-flex;
	flex-wrap: wrap;
    justify-content: center;
}

.variation{
    width: 55px;
    display: block;
    list-style: none;
    text-align:center;
    font-size: 14px;
    font-weight: 300;
    background-color: white;
    border: 1px solid #8c8c8c;  
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 10px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

}
.variation:hover{
    background-color: #EEE;
}

.prev-variation{
    width: 52px;
    height: auto;
    margin-top: 1px;
}
.variation .pqty{
    padding: 3px 0px 2px 0px;
    background: #F4F4F4;
    border-bottom: 1px solid #DBDBDB;
}
.variation .pprice{
    padding: 3px 0px 2px 0px;
}

.selected{
    font-weight: 800;
    border: 1px solid red;
    background-color:#FFF7F3;
}
.pmoreinfo{
    margin-top:10px;
}
.qty-grandtotal{
    padding: 10px 10px;
    background-color:aliceblue;
}
.qty-input{
    width: 60px;
}

@media (max-width:930px){
    .topseal{
        display: none;
    }

    #slogan{
        display: none;
    }
    .logo{
        text-align: center;
    }
    
}

#cart-desc{
    padding: 20px 0px;
}

@media screen and (max-width:800px){
	#quickorder .form-order-info .form-content .instantform{
		display: block;
	}
    .best-seller{
        font-size:12px;
        padding: 2px 2px;
    }
    #top-page{
        display: inline-block;
    }
    #group-package-icon{
        display: flex;
    }
    .col20, .col80{
		width: 100%;
        padding: 10px 0 !important;
	}
    
    .pkg-line .pkg-img{
        width: 30%;
    }
    .pkg-line .pkg-content{
        font-size: 14px;
        width:70%;   
    }
    .pkg-line .pkg-content .pkg-title{
        font-size: 14px;
    }
    
    .package-area{
    border-left: none;
    }
    
}

@media screen and (max-width:482px){
	.mynavclass a:not(:first-child){
		display: none;
	}
	.baricon{
    	display: block;
	}
	header .header-area .container .topseal{
		display: none;
	}

	#topbanner .topbanner-item .topbanner-content h1{
		font-size: 22px;
	}
    #topbanner .topbanner-item .topbanner-content h3{
	font-size: 18px;
    }
	/* menu iphone */
	.mynavclass .responsive{
		position: relative;
	}
	.mynavclass.responsive a{
		float: none;
		display: block;
	}
	.col-50{
		width: 100%;
        padding: 10px 0 !important;
	}
	.col-25, .col-75{
		width: 100%;
        padding: 10px 0 !important;
	}
	.col-40{
		width: 100%;
        padding: 10px 0 !important;
	}
	.col-60{
		width: 100%;
        padding: 10px 0 !important;
	}
	.product ul{
		display: block !important;
	}
	.product ul li {
		max-width: 100% !important;
	}
	.cellheader{
		font-size: 15px;
	}
	.pricelist-regular .pricelist-table td{
		font-size: 13px;
	}
	
	.material-section .material-content{
		display: block !important;
	}
	.material-section .material-content .material-info{
		width: 100% !important;
        padding: 10px 0 !important;
    }
    
    #toplinks{
        display: none;
    }    
    .sd-slogan{
        display: none;
    }
    
    .pkg-line .pkg-img{
        width: 40%;
    }
    .pkg-line .pkg-content{
        width:60%;   
    }
    
    .pagetitle{
        font-size: 1.6em !important;
    }
    
    .pmoreinfo{
        display: none;
    }
    
    body {
	   font-weight: 800;
}    
}