/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

* {
  box-sizing: border-box;
}

 /*html {
        scroll-behavior: auto; 

      }

body {

    overflow-y: auto; 
    overflow-x: hidden;
    max-width: auto;
     
  	background: white;
} 
*/

html {
    height: 100%;
    width: 98%;
}
body {
    min-height: 100%;
}


/* post */
.post{
    width: 1560px;
    min-height: 0px;
    margin-top: 0px;
    padding: 5px;
    border: 10px solid gray;
    margin-bottom: 10px;
}

.post h2{
    letter-spacing: 1px;
    font-weight: normal;
    font-family: sans-serif;
}



.post p{
    letter-spacing: 1px;
    text-overflow: ellipsis;
    line-height: 15px;
}
.mystyle {
  width: 120px;
  padding: 1px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: black;
  color: black;
  font-size: 20px;
  /*box-sizing: border-box;*/
}



.main_wrapper{
	width:100%;
	height:auto;
	margin: auto;  /*center alligned */
	background: white; /* this fills in the blank space that's created under the side bar when the page is load*/
	border: 0px solid #000;
}

.header_wrapper{
	position: fixed;  /* this keeps the header fixed in view when content is over loaded */
	width: 98%;
	height:190px;
	margin: auto;
	border: 0px #000;
	background: white;
	}

.search-container{
	padding: 5px; /* space between bar and the container */
	width: 380px;
	float:left;
	top: 40px;
	display: block;
	background: #fff;
  	margin: 4px;  /* space at the top */
  }

.table-responsive{ /* this is used for the load more function */
    float: right;
	border: 1px solid #000; 
	max-width: 84%;
	height: auto;	
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
  }

  #load_data_table{
  	float:left;
  	margin-left:0%;
  	margin-right: 0px;
  	margin-top: 0px;
  	width: 85%;
  	padding: 0px;
	border: 0px solid #000;

  }


#logo { 
	float:left;
	padding: 5px;
	width:180px;
	height:110px;
   } /* these will align the logo and banner side by side */

#logo2 { 
	float:left;
	padding: 5px;
	width:1360px;
	height:110px;
	margin-left:10px;
   } /* these will align the logo and banner side by side */




.radio_button{
	width:200;
	height:100px;
	background: blue;
	color: black;
	border: 0px solid #fff;
}

#menu{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	padding-left:0px;
	padding: 0px;
	padding-top: 4px;
	margin:0px;
	width:100%;
	border: 0px solid #000;
	line-height:15px; /* this centers the text of the menu bar */
	float: left;
}


#menu a:hover {color: steelblue;  font-weight: bolder; text-decoration: underline;}

#menu li {
	list-style: none;
	display: inline;
}

#menu a {
	text-decoration: none;
	float: right;
	color: black;
	padding: 5px;
	margin: 5px;
	font-size: 20px;
	font-family:COMIC SANS MS;
}

.container {
        position: relative;
        float: left;
        width: 98%;
        height: 120px;
        margin: 0px 0px 0px 0px; 
        border: 1px solid #000;
        padding: 2px 0px 0px;

      }


      .container div {
        float: left;
        width: 98%;
        height: 50px;
        margin-top:0px;
      }

      #box1 {
        position:static;
        padding-left: 0px;
        padding-top: 0px;
        margin-top:0px;
        margin-left: 1%;
        margin-right: 0px;
        margin-bottom: 0px;
        width: 200px;
        height: 110px;
        border: 0px solid #000;
      }

      #box2 {
        float:right;
        padding-top: 0px;
        padding-left: 0px;
        margin-left: 0px;
        margin-right: 0px;
        width: 40%;
        height: 40px;
        border: 0px solid #000;
      }



#pawnshop {
	text-decoration: none;
	border: 0px solid #fff;
	float: left;
	color: steelblue;
	padding: 5px;
	margin-left: 75px;
	font-size: 20px;
	font-family: serif;
}


.menubar{
	width:100%;
	height:120px;
	background: whitesmoke;
	color: black;
	border: 2px solid #000;
	margin-top: 0px;
}


.menu3{
	float:left;
	margin-top: 0px;
	padding-left: 2px;
	padding-top: 0px;
	width:290px;
	height:67px;
	background: whitesmoke;	
	color: black;
	border: 0px solid #000;
}

.menubar2{
	float:left;
	padding-top: 0px;
	margin-bottom: 100px;
	width:79%;
	height:67px;
	background: whitesmoke;	
	color: black;
	border: 0px solid #000;
}

#menu2{
	padding-top: 30px;
	margin-right:5px;
	width: 50%;
	height: 66px;
	line-height:10px; /* this centers the text of the menu bar */
	float: left;
	border: 0px solid #000;
}

.search-icon{
 	cursor: pointer;
    position: relative;
    float: left;
    width: 0px;
    margin-left: 390px;
    height: 0px;
    top: -48px;
    bottom: 0px;
    right: 0px;
    border: 0px;
  }

#radio1{
	padding: 0px;
	padding-top: 0px;
	margin-right:13px;
	line-height:1px; /* this centers the text of the menu bar */
	float: left;

}

#radio2{
	padding: 0px;
	padding-top: 13px;
	margin-right:13px;
	line-height:1px; /* this centers the text of the menu bar */
	float: left;
}


#menu2 li {
	list-style: none;
	display: inline;
}

#menu2 a {
	text-decoration: none;
	float: left;
	color: black;
	padding: 5px;
	margin: 5px;
	font-size: 20px;
	font-family:COMIC SANS MS;

}
   .radio1{
    float:left; 
    width:200;
    margin-top: 9px;
    height:40px;
    background: whitesmoke; 
    color: black;
    border: 0px solid #000;
   }


#menu2 a:hover {color: steelblue;  font-weight: bolder; text-decoration: underline;}

#form {
	float:left; 
	padding-right: 50px; 
	line-height: 100px;
}     


  input#search-bar{
    
  	border-radius: 20px;
    margin: 50 auto;
    width: 420px;
    height: 30px;
    padding: 0 0px;
    font-size: 5.0 rem;
    border: 2px solid steelblue;
    outline: none;
    cursor: pointer;
    &:focus{
      border: 1px solid #008ABF;
      transition: 0.35s ease;
      color: #008ABF;
      &::-webkit-input-placeholder{
        transition: opacity 0.45s ease; 
        opacity: 0;
       }
      &::-moz-placeholder {
        transition: opacity 0.45s ease; 
        opacity: 0;
       }
      &:-ms-placeholder {
       transition: opacity 0.45s ease; 
       opacity: 0;
       }    
     }
   }

 

.content_wrapper{
	width:1570px;
	/*height: 800px; *//* this omission will allow for the wrapper to expand down when content is loaded*/
	padding-top:5px;
	margin:;
	background: whitesmoke;
}

#space {
	position: absolute;
	float:left;
	margin-top: 124px;
	width:98%;
	height:30px;
	border: 0px solid #000;
	

}

#space1 {
	width:100%;
	height:10px;
	background: steelblue;
	}

.space2 {
	width:100%;
	height:10px;
	background:gainsboro;
	
}


#content_area{
	width:1400px;
 /* height: 400px;*/
 margin-left: 100px;
	float: left;
	padding:30px;
	background: whitesmoke;
 margin-bottom:0px;
	/*border: 2px solid #A52A2A;*/
}  


.field{
	width: 240px;
	height: 250px;
	float: left;
	padding-top: 0px;
	margin-bottom: 20px;
	padding-left: 5px;
	margin-left: 10px;
	margin: 10px;
	margin-top: 0px:;
  	border: 1px solid #bfbfbf; /*inner box */
  	border-radius: 10px;
  	background-color: #fff;
  
 }

.field2{
	width: 240px;
	height: 250px;
	float: left;
	padding-top: 0px;
	margin-bottom: 20px;
	padding-left: 0px;
	margin-left: 50px;
	margin-inline: 2px;
	margin-top: 0px:;
  	border: 1px solid #bfbfbf; /*inner box */
  	border-radius: 10px;
  	background-color: #fff;
  }

 .field3{
	
	float: left;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 50px;
	margin-left: 10px;
	margin-inline: 0px;
	margin-top: 8px:;
  	border: 0px solid #000;/*inner box */
  	background-color: #fff;
  
 }

.image2{
	  text-align:bottom;
	  padding: 5px;
	  margin-top: 10px;
	  margin-left: 1px;
	  grid-template-columns:  repeat(auto-fill, minmax(800px, 20fr)); 
      gap: 1px;
}

.image3{
	  text-align:bottom;
	  padding: 5px;
	  margin-top: 10px;
	  margin-left: 10px;
	  grid-template-columns:  repeat(auto-fill, minmax(800px, 20fr)); 
      gap: 1px;
}



figure.image2 {
 /*position: relative; */
  overflow: hidden;
  margin-left: px;  
  min-width: 23px;
  max-width: 250px; 
  max-height: 220px; 
  width: 220px;
  background: #fff;
  color: #eeeeee;
  text-align: center;
}

figure.image2 * {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  
}

figure.image2 img {
  max-width: 100%;
  position: static; 
  /*opacity: 1; */
}

figure.image2:hover img,
figure.image2.hover img {
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);	
  transform: scale(1.1);
  
}

figure.image2:hover h3,
figure.image2.hover h3 {
  -moz-transform: skew(-10deg) rotate(-10deg) translate(-120%, -50%);
  -o-transform: skew(-10deg) rotate(-10deg) translate(-120%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-120%, -50%);
  
}

figure.image2:hover:before,
figure.image2.hover:before {
  -moz-transform: rotate(110deg) translateY(-120%);
  -o-transform: rotate(110deg) translateY(-120%);
  transform: rotate(110deg) translateY(-120%);
   
}

/* these 2 align the images and text on the pages */
.fielder{
 	float: left;
 	margin-inline: 5px; /* the space between the actual image containers */
  margin-bottom: 30px;
  margin-right: 20px;
  margin-left: 4px;
  margin-top: 10px;
  width: 270px;
  height:270px; /* changed */
  background: gainsboro;
  padding: 0px;
  border: 0px solid #000; 
}

fieldset {
				float: left;
        background: #e1eff2;
        width: 250px;
        border: 2px solid #000;
      }


.fielder2{
 	float: left;
 	width: ;
}

#field{
  border: 0px solid #000;/*inner box */
  background-color: #fff;
  padding-left: 0px	;
  padding: 0px; /* space between image and innner box */ 
  margin: auto; /* increases the outer box */
  width: 250px; /* box demensions */   /* changed */
  height:250px; /* changed */
 }

 

.image{
	  text-align:bottom;
	  padding: 8px;
	  margin-top: 10px;
	  grid-template-columns:  repeat(auto-fill, minmax(800px, 20fr));
    gap: 1px;
}

figure.image {
 /*position: relative; */
  overflow: hidden;
  margin-left: 5px;  
  min-width: 23px;
  max-width: 250px; 
  max-height: 220px; 
  width: 220px;
  background: #fff;
  color: #eeeeee;
  text-align: center;
}

figure.image * {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

figure.image img {
  max-width: 100%;
  /* position: relative; */
  opacity: 1;
}

figure.image:hover img,
figure.image.hover img {
  opacity: .9;
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

figure.image:hover h3,
figure.image.hover h3 {
  -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.image:hover:before,
figure.image.hover:before {
  -moz-transform: rotate(110deg) translateY(-150%);
  -o-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

.sidebar {
	position: inherit;
	width:231px;
  	height: 1200px;
	background: white;
	float:left;
	border: 1px solid #000;
}

#sidebar_title{   /* categories */
	width: 210px;
	background: black;
	color:white;
	font-size: 22px;
	font-family:arial;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
}

#sidebar_text_box{
	position: inline;
  width: 100%;
  height: 30px;
  /*background: #1faadb;
  color: #fff; */
}


#side-text1,
#side-text2,
#side-text3,
#side-text4,
#side-text5,
#side-text6,
#side-text7,
#side-text8,
#side-text9,
#side-text10,
#side-text11,
#side-text12{
	top: 50%;
  left: 100%;
  width: 90%;
  height: 40px;
  text-align: left;
  border:0px solid black;
	}

#side-text1{
        margin: -35px 0 0 -70px;
      }
#side-text2{
        margin: -35px 0 0 -32px;
      }
#side-text3{
        margin: -35px 0 0 -50px;
      }
#side-text4{
        margin: -35px 0 0 -64px;
      }
#side-text5{
        margin: -35px 0 0 -64px;
      }
#side-text6{
        margin: -35px 0 0 -27px;
      }
#side-text7{
        margin: -35px 0 0 -20px;
      }
#side-text8{
        margin: -35px 0 0 -20px;
      }
#side-text9{
        margin: -35px 0 0 -48px;
      }
#side-text10{
        margin: -35px 0 0 -35px;
      }
#side-text11{
        margin: -35px 0 0 -47px;
      }
#side-text12{
        margin: -35px 0 0 -47px;
      }

#menu_text{
	text-align:center;
	margin-right: 90px;
}



#cats li { text-align: left; margin: 10px;}  /* margin to have spaces between rows  no underline */

#cats a {color:blue;  padding: 8px; margin: 5px; tex-align:center; font-size: 20px; text-decoration:none; font-family: comic sans ms; }

#cats a:hover { color:orange; font-weight:bolder; text-decoration:underline; }

#products_box{
	width:100%;
	text-align: right;
	/*padding-left: 0px;*/
	margin-left: 50px;
	margin-bottom: 1px;


}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 1500px;
  padding: 2px;
  margin: 1px;
  background: #fff;
  border: 1px #fff;
  text-align: center;
  box-sizing: content-box;

}

#column{
margin-left: 0px;
margin-right: 50px;
margin-bottom: 100px;
margin-top: 1200px;

}




/* Image hover feature */


#load-more{
	border-radius: 20px;
	margin-left : 750px;
	margin-top:20px;
	margin-bottom: 20px;
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid #334;
	color: #334;
	font-size: 15px;
	background-color:#fff ;
	cursor: poiner;
}

#load-more:hover{
	background-color: steelblue;
}

#fielder img:hover { color:whitesmoke; }

#single_product { 
	border:2px solid #000;
	float: left; 
	margin: 7px; 
	padding: 6px;
}

	#single_product img {
	border:4px solid whitesmoke;
}



.button-more {
		position: relative;
        float: left;
        width: 98%;
        height: 40px;
        margin: 0px 0px 0px 0px; 
        border: 0px solid #000;
        padding: 2px 0px 0px;

}

#remove_row{

        position: relative;
        float: left;
        width: 98%;
        height: 40px;
        margin: 0px 0px 0px 0px; 
        border: 0px solid #000;
        padding: 2px 0px 0px;
  
}



/* button text */
#btn_more{
	border-radius: 20px;
	float:right;
	padding-left: 50px;
	font-size: 30px;
	padding-bottom:40px;
	color: steelblue;
	cursor: pointer;
	text-decoration:none; font-family: comic sans ms; 
}



.btn-success{
		position: absolute;
		float:left;
        padding-top: 0px;
        margin-left: 110px;
        margin-right: 0px;
        height: 40px;
        width:78%;
        border: 0px solid #000;

}



.footer {
	margin-left:1px;
	width:100%;
	height:80px;
	float: left;
	margin-top: 50px;
	background: steelblue;
	clear:both;
}



.image-gallery iframe { 
   float: left;
    height: 20px;
    object-fit: cover;
    /*margin: 5px;*/
}


.iframe-container{ 
	width: 40%; 
	height: 1000px; 
	float: right;
	/*display: grid;*/
	border: none; 
	text-align: right;
	margin: 500 auto; 
	padding: 50; 
}


.pagination {
				list-style-type: none;
				padding: 20px 0px;
				margin-top: 200px;
				display: inline-flex;
				justify-content: space-between;
				box-sizing: border-box;
			}
			.pagination li {
				box-sizing: border-box;
				padding-right: 10px;
			}
			.pagination li a {
				box-sizing: border-box;
				background-color: #e2e6e6;
				padding: 8px;
				text-decoration: none;
				font-size: 12px;
				font-weight: bold;
				color: #616872;
				border-radius: 4px;
			}
			.pagination li a:hover {
				background-color: #d4dada;
			}
			.pagination .next a   {
			margin-right:  0px;
				text-transform: uppercase;
				font-size: 12px;
			}

			 .pagination .prev a {
			 	margin-right:  0px;
				text-transform: uppercase;
				font-size: 12px;
			 }

			 .pagination .end a{
			 	margin-right: 0px;
				text-transform: uppercase;
				font-size: 12px;
			 }

			.pagination .currentpage a {
				background-color: #518acb;
				color: #fff;
			}
			.pagination .currentpage a:hover {
				background-color: #518acb;
			}