@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Muli|Raleway');



body { 
font-family: 'Muli', sans-serif;
margin: 112px auto 0px auto;
  padding-right: 0px !important
     width:100%;
	 max-width:1920px;
	 font-size:18px;
	}

h2 {
font-family: 'Muli', sans-serif;
 font-size:18px;
	 line-height:22px;
	 margin-top:8px;
}

h4 {
font-family: 'Muli', sans-serif;
	 margin-bottom:3px;
	 margin-top:3px;
}

h5 {
font-family: 'Muli', sans-serif;
	 margin-bottom:3px;
	 font-size:18px;
	 margin-top:15px;
	 
}

li {
	padding:5px;
}


.keytags {
border-radius:5px;

        padding: 5px;
        font-size: 11px;
        background-color: #ddf;
        color: #222;
		    height: 20px;
   			line-height: 40px;
}


.tablenav {
	border:1px solid #ccc; 
	font-size:16px; 
	width:80%;
	
}

.tabletdnav {
	border:1px solid #ccc; 
	font-size:16px; 
	padding:10px;
}


.narrowHR {
	margin-top:5px;
	margin-bottom:5px;
}

.divbox {
	background-color:#ddd;
	border-radius:8px;
	padding:18px;
}

.navbox {
	border-radius:5px; 
	text-align:center; 
	background-color:#aaccaa; 
	color:#555; 
	height:50px;
	display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:10px;
}

.stdtext {
font-family: 'Muli', sans-serif;
 font-size:18px;
	 line-height:38px;
}

.main-content {
font-family: 'Muli', sans-serif;
 font-size:18px;
	 line-height:28px;
}

.titletext {
font-family: 'Muli', sans-serif;
 font-size:14px;
}

.price {
 font-size:28px;
	/* line-height:38px; */
	padding:10px;
	color:green;
	
}

h1 {
font-family: 'Muli', sans-serif;
font-size: 24px;
}


p {
font-size:16px;
}

.carttable>tbody>tr>td, .carttable>tbody>tr>th, .carttable>tfoot>tr>td, .carttable>tfoot>tr>th, .carttable>thead>tr>td, .carttable>thead>tr>th {
    padding: 4px;

}


.mytable>tbody>tr>td, .mytable>tbody>tr>th, .mytable>tfoot>tr>td, .mytable>tfoot>tr>th, .mytable>thead>tr>td, .mytable>thead>tr>th {
    padding: 8px;
}


.bigtext {
font-size:24px;
line-height:58px;
}



/*
@media only screen and (max-width: 1485px) {
#navbartitle { display:none;
font-size:6px !important;
}
}
*/

@media only screen and (max-width: 450px) {

.tablenav {
	border:1px solid #ccc; 
	font-size:16px; 
	width:50%;
}

.tabletdnav {
	border:1px solid #ccc; 
	font-size:12px; 
}

.oldprice {
	font-size:11px; 
}

#madeinusa {
	width:300px;
}


.titletext {font-size:14px; }
.stdtext {font-size:14px; line-height:20px;}
h1 { font-size: 20px; line-height:30px; }
hr {margin-top:5px; margin-bottom:5px;}

.bigtext {
font-size:14px;
line-height:28px;
}

#imageFB, #imageIN, #imageTW {
width:100px;
}

}

#custom-bootstrap-menu {
font-size:16px;
}

@media (max-width: 1367px) {
#custom-bootstrap-menu {
font-size:14px;

}
/*#mainimage { width:700px; }
*/
}

@media (max-width: 1255px) {
#custom-bootstrap-menu {
font-size:12px;
}
#navbartitle { font-size:14px;}
}


@media (max-width: 1120px) {

#custom-bootstrap-menu {
font-size:16px;
}

  #custom-bootstrap-menu .navbar-header {
      float: none;
  }
  #custom-bootstrap-menu .navbar-left,.navbar-right {
      float: none !important;
  }
  #custom-bootstrap-menu .navbar-toggle {
      display: block;
  }
  #custom-bootstrap-menu .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  #custom-bootstrap-menu .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  #custom-bootstrap-menu .navbar-collapse.collapse {
      display: none!important;
  }
  #custom-bootstrap-menu .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  #custom-bootstrap-menu .navbar-nav>li {
      float: none;
  }
  #custom-bootstrap-menu .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  #custom-bootstrap-menu .collapse.in{
      display:block !important;
  }
}





















#cat_text {
font-family: 'Questrial', sans-serif;
    z-index:100;
    position:absolute;    
    color:white;
    font-size:18px;
	letter-spacing:2px;;
	 word-spacing: 10px;
	right:1.2%;
    top:92%;
color:#ddd;
}

#cat_text2 {
font-family: 'Questrial', sans-serif;
text-align:center;
vertical-align:middle;
background-color:#000;  
    color:white;
    font-size:20px;
	letter-spacing:2px;;
	 word-spacing: 10px;
	 //line-height:60px;
	 padding:10px;

}






.desc {
font-color:#ccf;
}

.topbar {
  background-color: #fff;
  height:90px;
}

.catnav {
   align:center;
	  vertical-align: top;
	  padding: 5px;
}

.catimages {
width:90px;
}

.pagetitle {
font-size:18px; 
font-family: 'Questrial', sans-serif;
line-height: 15px;
}


.port_title {
color:white; 
font-size:24px; 
line-height:50px;
font-family: 'Questrial', sans-serif;
}


#thumbmod2 {
border-radius: 4px;
display: block;
  padding: 8px;
  margin-bottom: 0px;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd; 
}

#thumbmod {
  display: block;
  padding: 0px;
  margin-bottom: 0px;
  //line-height: 1.42857143;
  background-color: #000;
  border: 0px solid #000;
  border-radius: 0px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}



@media only screen and (max-width: 447px) {

.small_top_logo {width:250px; }
.port_title {
font-size:18px; 
line-height:25px;
}
.badge { width:60px;
font-size:9px;
}
#thumbmod2 {
border-radius: 2px;
display: block;
  padding: 1px;
}

#relimagenav {
height:30px;
}

.relimagestitle {
display:none;
}

}


@media only screen and (max-width: 767px) {
body { margin: 50px auto 0px auto; }
.topbar {height:50px;}
#navbartitle { display:block; font-size:20px !important;}

#cat_text2 {
    font-size:14px;
}	
	

.cropimg {margin:-5% 0%; -5%x 100%;}



.carousel {
    margin-bottom: 7%;
  }   
  .carousel-indicators {
    bottom: auto;
	top: 105%;
	}
  .carousel-indicators li {
    border-color: #777;
  	border-radius:5;
	   width: 2px;
  height: 2px;
  }
  .carousel-indicators .active {
    background-color: #777;
   width: 5px;
  height: 5px;

  }
 
.toptext {
display:none;
}
#toplogo {
display:none;
}
.pagetitle{
display:block;
}
 
 
  .port_title {
  padding-top: 12px;
  font-size:18px; 
  }

.catimages {
width:75px;
}  
 

  
} 

@media only screen and (min-width: 768px) {
.cropimg {margin:-5% auto; -2% auto;}




#toplogo2 {
display:none;
}

.pagetitle{
display:none;
}


}




*:focus {
outline: 0;
outline: none;
}

#image-gallery {
top:-4%;
outline: none;

}


div.transbox {
   position: absolute; bottom: 0px; left: 0; width: 100%;"
 margin: 30px;
  background-color: #ffffff;
  border: 0px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}


.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
}








.hand 
{ cursor: pointer; cursor: hand; }


.faderphil {
    position: relative;
    width: 980px;
    height: 347px;
}






	
	
h1,h2,h3 {
font-family: 'Muli', sans-serif;
}



.carousel-indicators {
  bottom: 50px;
}


/*
inspired from http://codepen.io/Rowno/pen/Afykb 
http://stackoverflow.com/questions/26770055/bootstrap-carousel-fade-no-longer-working-with-maxcdn-3-3-bootstrap-min-css
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.6s; 
  transition-timing-function:linear;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;

}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}


/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.carousel-control {
    width: 4%
}


#jumbo {
  padding: 10px;
}

#jumbo2 {
  padding: 20px;
}


.badgelightbox {
  display: inline-block;
  min-width: 10px;
  //width: 200px;
  //padding: 3px 7px;
  padding: 4px;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}


.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}




#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: rgba(248, 248, 248, 1);
    border-width: 5px;
    border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(119, 119, 119, 1);
    background-color: rgba(248, 248, 248, 0);
	 
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(153, 147, 147, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #888;
}



@media only screen and (max-width: 1100px) {
#cat_text2 {
    font-size:14px;
	 word-spacing: 8px;
}
}

@media only screen and (max-width: 840px) {
#cat_text2 {
    font-size:12px;
	 word-spacing: 5px;
	 
}
} 	



@media only screen and (max-width: 350px) {
.small_top_logo {width:200px; }
}