
a{color:#222}
.paddingzero{padding:0}
.marginzero{margin:0}
/**************COLORS**************/
.bluewhite_gradient{background:background: #005b70; /* Old browsers */
                  background: -moz-linear-gradient(top, #005b70 0%, #ffffff 73%); /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, #005b70 0%,#ffffff 73%); /* Chrome10-25,Safari5.1-6 */
                  background: linear-gradient(to bottom, #005b70 0%,#ffffff 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005b70', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}





/*******FONTS***********************/
.h1, h1 {font-size: 1.6rem;}
     
.slider h2{font-family: 'Playfair Display SC', serif;font-size: 55px; text-transform: uppercase; font-weight: 600; padding-top:20px}
    @media(max-width:768px){.slider h2{font-size: 40px; }  }
.slider h3{font-family: Arial; text-transform: uppercase;}
.slider h4{font-size:1.1rem}
.slider h5{font-size:0.9rem}
.inverse h2, .inverse h3, .inverse h4{color:white;margin-bottom: 0;} 

h1.title{padding-top:40px; text-transform:uppercase}         


hr {margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
    border-top: 1px dashed rgb(2, 118, 143);
    width: 40%;
    margin-left: 0;}   
    
    
    
 /***************TOP****************/
 .basket {margin-left:5%; margin-right:5%} 

              .last_a{border-right: 1px solid black;}
 .logo_position{text-align:left}
      @media(max-width:768px){  .logo_position{text-align:center}  }
      
      
 /***********************BAL MENU*************/
 #menu a {padding-right: 0;text-align: left;  }    
 .bg-light{background:white  !important;}       
 
 @media(min-width:768px){.collapse:not(.show){display:inline}}
 
 @media(min-width:768px){
 .navbar-toggler{display:none}
 .navbar-nav {float: none;margin: none;}
 } 
 @media(max-width:768px){
 .navbar.navbar-light.bg-light{text-align: center; display: inherit; border: 2px solid #012241;}
 .navbar-light .navbar-toggler {
    color: #222; width: 100%;
    border-color: rgba(0,0,0,.0);
}
 }
 
 .navbar {display: contents;}

    
/**************************INDEX*************************/
.img-minilogo {padding: 0 8px;height:56px;filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */} 
       .img-minilogo:hover{filter: none;-webkit-filter: grayscale(0%);}
div.pics {padding:0;margin:0;}
div.pics img{width:100%;}
                

/*****************BUTTONS*****************/
.btn-info{background:white; color:black;border-color: grey; border-radius:0; text-transform:uppercase; font-size:11px}                  
.btn-default{background:#027991; color:white;border-color: grey; border-radius:0; text-transform:uppercase; font-size:11px; font-weight:600; padding:10px 15px}                   
.btn-danger{background:#8a1c1c; color:white;border-color: grey; border-radius:0; text-transform:uppercase; font-size:1rem; font-weight:400;padding: 0px 4px;}                   
      
     
/**************SEARCH****************/
.searchboxwrapper{padding:15px 0}
.searchbox{width:100%; padding:8px}   




  
/****************SLIDER***********************/
.slider, .markandstyle{margin-top:5px}
.carousel {
    position: relative;
    xxxheight:380px;
    bottom:0}
    

   
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
    overflow:hidden; height: 540px;
}

 .egyedi{padding-left:0; padding-right:0; padding-top:0; padding-bottom:0}         


.carousel-inner.item img{ ;}
.carousel-inner.item.active img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    xxxtransform: scale(1.1, 1.1) rotate(0deg);
}
.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: 100;
}
 .carousel-control {
    bottom: 130px;
    left: 0;
    font-size: 50px;
    padding-top: 10%;
}
.carousel-indicators {
    bottom: 60px; z-index:500;left: 50px;}

.carousel-control.left, .carousel-control.right {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.0000) 0%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.0000) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,.00)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.000) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
  }
  
  button{border: 1px solid white;background: transparent;z-index: 5000;position: relative;}
  
  
  .carousel-indicators li {border-radius: 0px;}

@media(max-width : 800px){
      .carousel-fade .carousel-inner .item {padding-top: 90px;}
      .carousel-caption{bottom:0px;height: 327px;} 
      .carousel-inner{height: 235px;}
      .carousel-caption img{bottom: 0;} 
      .carousel-caption h1{margin-top:0; margin-bottom:0}                  
      .carousel-caption h2{padding-top:0px }
      .carousel-control { padding-top: 40%; }
       .img-slidermobile{bottom: 40px;width: 100%;}
       .carousel-indicators {display: none; }
      
      }

.slider_height{height:342px}            
.carousel-caption{text-shadow: 0 1px 2px rgba(0,0,0,0.1);top: 120px;position: absolute; right:0; left:0}
         @media(max-width:768px){.slider_height{height:230px} .carousel-caption{top: 20px; height: 200px;}}


/*
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);
    }
}



/****MASONRY BRICK Galéria******************/
#masonry {
  column-count: 2;
  column-gap: 0.3em; 
}
        #masonry_gallery {
            column-count: 2;
            xxxcolumn-gap:0.3em;
          }
@media(min-width: 30em) {
  #masonry {
    column-count: 3;
    column-gap: 0.3em;
  }
      #masonry_gallery {
          column-count: 3;
          xxxcolumn-gap: 0.3em;
        }
}

@media(min-width: 40em) {
  #masonry {
    column-count: 4;
    column-gap: 0.3em;
  }
        #masonry_gallery {
          column-count: 3;
          xxxcolumn-gap: 0.3em;
        }
}

@media(min-width: 60em) {
  #masonry {
    column-count: 5;
    column-gap: 0.3em;
  }
        #masonry_gallery {
          column-count: 3;
          xxxcolumn-gap: 0.3em;
          padding:0 150px
        }
}

@media(min-width: 75em) {
  #masonry {
    column-count: 5;
    column-gap: 0.3em;
  }
        #masonry_gallery {
          column-count: 3;
          xxxcolumn-gap: 0.3em;
          padding:0 150px
        }
  
}

.item {
  background-color: none;
  display: inline-block;
  margin: 0;
  width: 100%;
  cursor: pointer;
  display: block; margin: 0; width: 100%; height: auto; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    border: 3px solid white;
}

.item img {
  max-width: 100%;
  height: auto;
  width: 100%;
  margin-bottom: 0px;
  overflow: hidden;
  

}


.item:hover { -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
     transform: scale(1.5); 
     -ms-transform: scale(1.5); 
     -webkit-transform: scale(1.5); 
     -o-transform: scale(1.5); 
     -moz-transform: scale(1.5);
     width:100%; overflow:hidden; background:white; border:0px solid white; position:relative }
 
 
 
/**********************PRODUCTS:PHP*****************************/ 
.products_2, .products_2act{padding:10px}
.products_boxes{border:1px dotted #808080;}
       .products_boxes s{font-weight:900}
       .products_boxes a, .products_boxes p{text-transform:uppercase; min-height:46px}
       .products_boxes img{width:100%}
       .products_boxes_overflow{height:135px; overflow:hidden}
                    @media(max-width:1170px){          .products_boxes_overflow{height:140px; overflow:hidden} }
                    @media(max-width:998px){          .products_boxes_overflow{height:115px; overflow:hidden} }
                     @media(max-width:768px){          .products_boxes_overflow{height:145px; overflow:hidden} }
                    
/********PRODUCT.PHP*********/
#productimg {width: 100%;padding: 30px;float: none}
.productimgs img:first-child {width: 100%;height:auto}


.product_1{padding:40px 0 20px 0}
.product_2 h1{font-weight: 600; font-size:1.6rem}
.product_2 h3, .product_2 p{display:inline; font-weight: 400;}
#desc{padding-top:20px}


/********BASKET.php************/
.line, .line2{border-bottom: 1px solid grey; }
@media(max-width : 768px){
    .line2{border-bottom: 0px solid grey; } }
    
td.price {white-space: nowrap;text-align: right; }

h1.title.checkout{border:1px solid black; padding:20px 10px;margin: 20px 0;}
.checkout_table{padding:10px 0}  

.price{padding:10px 15px 5px 0}