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

body { 
margin: 0px auto 0px auto;
  padding-right: 0px !important
     width:100%;
	 max-width:1920px;
}



#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;

}



body.modal-open {
  overflow-y: auto;
}



.desc {
color:#ccf;
font-style:italic;
}

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

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

.catimages {
width:90px;
}
.catimages2 {
width:120px;
}

.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;
}

.cropimg {
//.margin:-80px 0px; -80px 1920px;
//margin:-100px;
}	

@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;
}

}

.img-shadow {
box-shadow: 7px 12px 24px -8px rgba(0,0,0,0.86);
border-radius: 15px;
border: 2px solid white;
}



@media only screen and (max-width: 767px) {
body { margin: 50px auto 0px auto; }
.topbar {height:50px;}


#cat_text2 {
    font-size:14px;
}	
	
//.catnav {margin: 80px auto 0px auto;}
.cropimg {margin:-5% 0%; -5%x 100%;}


// for android and isheep
.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;}
//.catnav { margin: 380px auto 0px 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;
}









//.thumbnail {margin-bottom:6px;}

.modal {
  text-align: center;
  padding: 0!important;
  //top:1%;
  //vertical-align: top;
 
}

.modal-footer {
  padding: 5px!important;
}

.modal.and.carousel {
  position: absolute; // Needed because the carousel overrides the position property
}




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


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

//.default-slider {
//    display: none;
//    position: absolute;
//    top: 0;
//    left: 0;
//}


h3 {
//line-height:0px;
}


.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  //vertical-align: top;
  margin-right: -4px; /* Adjusts for spacing */
}


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

//.pictitle

.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;
}

.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;
}
#deliveryform {
width:20%;
}

@media only screen and (min-width: 1850px) {
.table-bordered {
//font-size:14px;
width:75%;
}
}


@media only screen and (max-width: 1850px) {
.margindiv {
margin-left:18px; 
margin-right:18px;
}

}

@media only screen and (max-width: 1370px) {
.catimages {
width:68px;
}


#gallerycarousel .carousel-inner {
  width:100%;
 max-height: 350px !important;
 overflow-y: none;
}




}

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

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

} 	



@media only screen and (min-width: 840px) {
.modal-dialog {
width: 100%;
}

}

@media only screen and (max-width: 500px) {
.img-shadow {
box-shadow: 3px 3px 14px -3px rgba(0,0,0,0.76);
border-radius: 8px;
border: 2px solid white;
}
.margindiv {
margin-left:10px; 
margin-right:10px;
}
.table-bordered {
font-size:12px;
width:95%;
}


}

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

.margindiv {
margin-left:5px; 
margin-right:5px;
}
.img-shadow {
box-shadow: 3px 3px 14px -3px rgba(0,0,0,0.76);
border-radius: 5px;
border: 1px solid white;
}

.table-bordered {
font-size:12px;
width:95%;
}



}

#moredetails {
height:20px;
width:95px;
font-size:14px;
}


@media only screen and (min-width: 200px) {
.buy-print-button {
height:25px;
border-radius:2px;
}
}

@media only screen and (min-width: 700px) {
.buy-print-button {
height:30px;
border-radius:8px;
}
}

@media only screen and (min-width: 700px) {
.buy-print-button {
height:35px;
border-radius:10px;
}
}