/* 
============================================================================================= 
 * This project was developed by Abid H., Founder of TechnoSway, for his client Dan Andrei.
 * Last Update: 9 November, 2020.

Author and Contributor(s) Information:
 * Developer: Abid H.
 * Company: TechnoSway
 * Website: http://technosway.com

Client/Owner Information:
 * Client: Dan Andrei
 * Location: Romania
 * Company: Sc Wunder Haff Srl
 * Website: ...
 * Project URL: http://work-demo.technosway.com/php/da1050/dan-andrei/
 * Framework Used: Bootstrap Framework v4
============================================================================================= 
*/

/*Custom Codes - Abid*/
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: none;
}
body {
    position: relative;
    font-family: 'Open Sans', sans-serif; 
}
html,
body {
    height: 100%;
}
.img-portfolio {
    margin-bottom: 30px;
}
.img-hover:hover {
    opacity: 0.8;
}
img, img.scale-wtih-grid {
    max-width:100%; 
    height:auto; 
    outline:0;
}
p {
    font-family: 'Open Sans', sans-serif;    
}
/* custom class */


a.add-to-cart {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 150px;
    height: 40px;
    background: linear-gradient(100deg, #c21920 70%, #ffc600 59%);
    border-radius: 0.2143rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border: 0;
    padding: 5px 15px 5px 12px;
    margin-bottom: 1rem;
    font-size: 11px;
}

a p.card-text {
    color: #000000;
}
a p.card-text:hover, a:hover {
    text-decoration: none;     
}
a.add-to-cart:hover {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(100deg, #951319 70%, #cc9e00 59%);
}

a.add-to-cart i.fa {
    color: #000000;
    font-size: 20px;
}
     .product-list .product-image {
         margin: 0 auto;    
     }
     .product-list a.add-to-cart {
         margin: 0 auto;    
     }
.product-list p.card-text {
    font-size: 14px;
    height: 130px;
    border: 0px solid red;
    overflow: hidden;
    margin-bottom: 3px;
}

.product-list .productSpecialPrice {
    color: #c94200;
    font-weight: bold;
}

.cumpar, .cumpar1 {background: url(../img/sursa_banner_intern_rosu.png) no-repeat; }
.cumpar { width: 150px; height: 35px; position: relative; background-position: -10px -200px; } 
.cumpar1 { width: 150px; height: 35px; position: relative; background-position: -607px -198px; }


.relative {
    position: relative !important;
}
		   
						   
															   
															
													   
 

.sidemenu {
    background: #fff;
    border-radius: 5px 0 0 5px;
    border: 0px solid red;    
    width: 100%;
}
.sidebar-sticky {
    position: fixed;
    top: 100px;
    max-width: 240px;
    z-index: 1;
    width: auto;
}
.topsticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    display: none;
    width: 130px;
    text-align:right;
    cursor: pointer;
}
.back-to-top a {
    color: #9C640C;
} 
.back-to-top a:hover {
    color: #8E4904;
} 
.product-image {
    background: url("../img/product-images3.jpg");    
}
.header-image {
    background: url("../img/header-banner.jpg") no-repeat center;    
    height: 150px;
}
/*
.p1 {
    width: 160px; 
    height: 160px; 
    position: relative;     
    background-position: -5px -5px;
}
.p2 {
    width: 160px; 
    height: 160px; 
    position: relative; 
    background-position: -165px -5px;
}
.p3 { width: 160px; height: 160px; position: relative; background-position: -325px -5px; } .p4 { width: 160px; height: 160px; position: relative; background-position: -485px -5px; } .p5 { width: 160px; height: 160px; position: relative; background-position: -645px -5px; } .p6 { width: 160px; height: 160px; position: relative; background-position: -5px -165px; } .p7 { width: 160px; height: 160px; position: relative; background-position: -165px -165px; } .p8 { width: 160px; height: 160px; position: relative; background-position: -325px -165px; } .p9 { width: 160px; height: 160px; position: relative; background-position: -485px -165px; } .p10 { width: 160px; height: 160px; position: relative; background-position: -645px -165px; }
.p11 { width: 160px; height: 160px; position: relative; background-position: -5px -325px; } .p12 { width: 160px; height: 160px; position: relative; background-position: -165px -325px; }
.p13 { width: 160px; height: 160px; position: relative; background-position: -325px -325px; } .p14 { width: 160px; height: 160px; position: relative; background-position: -485px -325px; } .p15 { width: 160px; height: 160px; position: relative; background-position: -645px -325px; } .p16 { width: 160px; height: 160px; position: relative; background-position: -5px -485px; } .p17 { width: 160px; height: 160px; position: relative; background-position: -165px -485px; } .p18 { width: 160px; height: 160px; position: relative; background-position: -325px -485px; } .p19 { width: 160px; height: 160px; position: relative; background-position: -485px -485px; } .p20 { width: 160px; height: 160px; position: relative; background-position: -645px -485px; } 
.p21 { width: 160px; height: 160px; position: relative; background-position: -5px -645px; } .p22 { width: 160px; height: 160px; position: relative; background-position: -165px -645px; } .p23 { width: 160px; height: 160px; position: relative; background-position: -325px -645px; } .p24 { width: 160px; height: 160px; position: relative; background-position: -485px -645px; } .p25 { width: 160px; height: 160px; position: relative; background-position: -645px -645px; } .p26 { width: 160px; height: 160px; position: relative; background-position: -5px -805px; } .p27 { width: 160px; height: 160px; position: relative; background-position: -165px -805px; } .p28 { width: 160px; height: 160px; position: relative; background-position: -325px -805px; } .p29 { width: 160px; height: 160px; position: relative; background-position: -485px -805px; } .p30 { width: 160px; height: 160px; position: relative; background-position: -645px -805px; } 
.p31 { width: 160px; height: 160px; position: relative; background-position: -5px -965px; } .p32 { width: 160px; height: 160px; position: relative; background-position: -165px -965px; } .p33 { width: 160px; height: 160px; position: relative; background-position: -325px -965px; } .p34 { width: 160px; height: 160px; position: relative; background-position: -485px -965px; } .p35 { width: 160px; height: 160px; position: relative; background-position: -645px -965px; } .p36 { width: 160px; height: 160px; position: relative; background-position: -5px -1125px; } .p37 { width: 160px; height: 160px; position: relative; background-position: -165px -1125px; } .p38 { width: 160px; height: 160px; position: relative; background-position: -325px -1125px; } .p39 { width: 160px; height: 160px; position: relative; background-position: -485px -1125px; } .p40 { width: 160px; height: 160px; position: relative; background-position: -645px -1125px; }

*/

/*.p1 { width: 200px; height: 200px; position: relative; background-position: -0px -0px; } .p2 { width: 200px; height: 200px; position: relative; background-position: -200px -0px; } .p3 { width: 200px; height: 200px; position: relative; background-position: -400px -0px; } .p4 { width: 200px; height: 200px; position: relative; background-position: -600px -0px; } .p5 { width: 200px; height: 200px; position: relative; background-position: -800px -0px; } .p6 { width: 200px; height: 200px; position: relative; background-position: -0px -200px; } .p7 { width: 200px; height: 200px; position: relative; background-position: -200px -200px; } .p8 { width: 200px; height: 200px; position: relative; background-position: -400px -200px; } .p9 { width: 200px; height: 200px; position: relative; background-position: -600px -200px; } .p10 { width: 200px; height: 200px; position: relative; background-position: -800px -200px; } .p11 { width: 200px; height: 200px; position: relative; background-position: -0px -400px; } .p12 { width: 200px; height: 200px; position: relative; background-position: -200px -400px; } .p13 { width: 200px; height: 200px; position: relative; background-position: -400px -400px; } .p14 { width: 200px; height: 200px; position: relative; background-position: -600px -400px; } .p15 { width: 200px; height: 200px; position: relative; background-position: -800px -400px; } .p16 { width: 200px; height: 200px; position: relative; background-position: -0px -600px; } .p17 { width: 200px; height: 200px; position: relative; background-position: -200px -600px; } .p18 { width: 200px; height: 200px; position: relative; background-position: -400px -600px; } .p19 { width: 200px; height: 200px; position: relative; background-position: -600px -600px; } .p20 { width: 200px; height: 200px; position: relative; background-position: -800px -600px; } .p21 { width: 200px; height: 200px; position: relative; background-position: -0px -800px; } .p22 { width: 200px; height: 200px; position: relative; background-position: -200px -800px; } .p23 { width: 200px; height: 200px; position: relative; background-position: -400px -800px; } .p24 { width: 200px; height: 200px; position: relative; background-position: -600px -800px; } .p25 { width: 200px; height: 200px; position: relative; background-position: -800px -800px; } .p26 { width: 200px; height: 200px; position: relative; background-position: -0px -1000px; } .p27 { width: 200px; height: 200px; position: relative; background-position: -200px -1000px; } .p28 { width: 200px; height: 200px; position: relative; background-position: -400px -1000px; } .p29 { width: 200px; height: 200px; position: relative; background-position: -600px -1000px; } .p30 { width: 200px; height: 200px; position: relative; background-position: -800px -1000px; } .p31 { width: 200px; height: 200px; position: relative; background-position: -0px -1200px; } .p32 { width: 200px; height: 200px; position: relative; background-position: -200px -1200px; } .p33 { width: 200px; height: 200px; position: relative; background-position: -400px -1200px; } .p34 { width: 200px; height: 200px; position: relative; background-position: -600px -1200px; } .p35 { width: 200px; height: 200px; position: relative; background-position: -800px -1200px; } .p36 { width: 200px; height: 200px; position: relative; background-position: -0px -1400px; } .p37 { width: 200px; height: 200px; position: relative; background-position: -200px -1400px; } .p38 { width: 200px; height: 200px; position: relative; background-position: -400px -1400px; } .p39 { width: 200px; height: 200px; position: relative; background-position: -600px -1400px; } .p40 { width: 200px; height: 200px; position: relative; background-position: -800px -1400px; } .p41 { width: 200px; height: 200px; position: relative; background-position: -0px -1600px; } .p42 { width: 200px; height: 200px; position: relative; background-position: -200px -1600px; } .p43 { width: 200px; height: 200px; position: relative; background-position: -400px -1600px; } .p44 { width: 200px; height: 200px; position: relative; background-position: -600px -1600px; } .p45 { width: 200px; height: 200px; position: relative; background-position: -800px -1600px; } .p46 { width: 200px; height: 200px; position: relative; background-position: -0px -1800px; } .p47 { width: 200px; height: 200px; position: relative; background-position: -200px -1800px; } .p48 { width: 200px; height: 200px; position: relative; background-position: -400px -1800px; } .p49 { width: 200px; height: 200px; position: relative; background-position: -600px -1800px; } .p50 { width: 200px; height: 200px; position: relative; background-position: -800px -1800px; } .p51 { width: 200px; height: 200px; position: relative; background-position: -0px -2000px; } .p52 { width: 200px; height: 200px; position: relative; background-position: -200px -2000px; } .p53 { width: 200px; height: 200px; position: relative; background-position: -400px -2000px; } .p54 { width: 200px; height: 200px; position: relative; background-position: -600px -2000px; } .p55 { width: 200px; height: 200px; position: relative; background-position: -800px -2000px; } .p56 { width: 200px; height: 200px; position: relative; background-position: -0px -2200px; } .p57 { width: 200px; height: 200px; position: relative; background-position: -200px -2200px; } .p58 { width: 200px; height: 200px; position: relative; background-position: -400px -2200px; } .p59 { width: 200px; height: 200px; position: relative; background-position: -600px -2200px; } .p60 { width: 200px; height: 200px; position: relative; background-position: -800px -2200px; } .p61 { width: 200px; height: 200px; position: relative; background-position: -0px -2400px; } .p62 { width: 200px; height: 200px; position: relative; background-position: -200px -2400px; } .p63 { width: 200px; height: 200px; position: relative; background-position: -400px -2400px; } .p64 { width: 200px; height: 200px; position: relative; background-position: -600px -2400px; } .p65 { width: 200px; height: 200px; position: relative; background-position: -800px -2400px; } .p66 { width: 200px; height: 200px; position: relative; background-position: -0px -2600px; } .p67 { width: 200px; height: 200px; position: relative; background-position: -200px -2600px; } .p68 { width: 200px; height: 200px; position: relative; background-position: -400px -2600px; } .p69 { width: 200px; height: 200px; position: relative; background-position: -600px -2600px; } .p70 { width: 200px; height: 200px; position: relative; background-position: -800px -2600px; }
*/
/* Override codes */
.card {
    border: 0;
    padding: 0px;
    border-radius: 5px;
								  
}
.row.card.category-title {
    border-bottom: 1px solid #eee;
    border-radius: 0;
}
/* navigation */
.headermenu {
    background: white;
}
.headermenu.topsticky {
    background: white;
}
.headermenu.navbar-expand-lg .navbar-nav .nav-link {
    border: 0px solid #996600;
    padding: 2px 10px;
/*    min-width: 220px;*/
    margin: 2px 4px;
    border-radius: 5px;
    background: #996600;  
    font-size: 15px;
    text-align: center;
    color: #fff;
}
.headermenu.navbar-expand-lg .navbar-nav .nav-link.active, .headermenu.navbar-expand-lg .navbar-nav .nav-link:hover {
    border: 0px solid #996600;
    background: #8E4904;  
				
}
.headermenu.topsticky .navbar-nav .nav-link {
    border: 0px solid red;
    background: #996600;  
					
			   
	
}
.headermenu.topsticky .navbar-nav .nav-link.active {
    border: 0px solid #8E4904;
    background: #8E4904;  
    color: #FFF;
}
.headermenu #navbarNav ul.navbar-nav {
/*    width: 100%;
*/    display: flex !important;
    }
.headermenu #navbarNav ul.navbar-nav li.nav-item {
    min-width: 150px;
    flex-grow: 1 !important;
} 
.headermenu #navbarNav ul.navbar-nav li.nav-item a.nav-link {
    height: 52px;
    line-height: 1.2;
/*    max-width: 200px;
*/}
.headermenu #navbarNav ul.navbar-nav li.nav-item a.nav-link span {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.navbar-nav {
    margin:0 auto;
}
.sidemenu .nav-link {
    color: #505050;
    border-bottom: 1px solid #eee;
}
.sidemenu .nav-link.active,  .sidemenu .nav-link:hover {
    background: #8E4904;
    color: #fff;
     border-bottom: 1px solid #eee;
}
.jumbotron {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
  background-color: #fff;
}
						   
			  
					  
						 
   
 
.jumbotron p:last-child {
  margin-bottom: 0;
}
.jumbotron h1 {
  font-weight: 300;
}
.jumbotron .container {
  max-width: 40rem;
}
footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
footer p {
  margin-bottom: .25rem;
}



/* Media Query */
/*
@media (min-width: 1200px) {
    .container-width
     {
        max-width: 1100px;
        border: 0px solid green !important;
     }    
}
@media (min-width: 1400px) {
    .container-width
     {
        max-width: 1300px;
        border: 0px solid blue !important;
     }    
}
@media (min-width: 1600px) {
    .container-width
     {
        max-width: 1500px;
        border: 0px solid red !important;
     }    
}
*/

@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .white-bg {
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 6px 0px rgba(170,170,170,0.4); 
    -moz-box-shadow: 2px 2px 6px 0px rgba(170,170,170,0.4); 
    box-shadow: 2px 2px 6px 0px rgba(170,170,170,0.4); 
    }
   .product-list .col:nth-child(1) {
    border: 0px solid red;
    margin-left: 3px;
    }    
}
@media (max-width: 767px) {
    .header-image 
    {
        background-size: contain;
    }
    .card {
        margin: 2px;   
        -webkit-box-shadow: 1px 1px 5px 0px rgba(170,170,170,0.4); 
        -moz-box-shadow: 1px 1px 5px 0px rgba(170,170,170,0.4); 
        box-shadow: 1px 1px 5px 0px rgba(170,170,170,0.4); 
    }
    .row.card.category-title {
        border: 0;
        border-radius: 5px;
    }        
}


@media (min-width: 1280px) and (max-width: 1365px) {
    .container-width
     {
        max-width: 1200px;
        border: 0px solid green !important;
     }    
}
@media (min-width: 1366px) and (max-width: 1439px) {
    .container-width
     {
        max-width: 1280px;
        border: 0px solid green !important;
     }    
}
@media (min-width: 1440px) and (max-width: 1535px) {
    .container-width
     {
        max-width: 1360px;
        border: 0px solid green !important;
     }             
}
@media (min-width: 1536px) and (max-width: 1599px) {
    .container-width
     {
        max-width: 1450px;
        border: 0px solid green !important;
     }
}
@media (min-width: 1600px) {
    .container-width
     {
        max-width: 1520px;
        border: 0px solid green !important;
     }       
}



/*
@media (max-width: 576px) {   
     .product-list p.card-text 
     {
         height: 100px;
     }        
}*/

@media (max-width: 575px) {   
     .product-list p.card-text 
     {
         height: 80px;
     }        
}
@media (max-width: 575px) {   
     .container-fluid 
     {
         padding-left: 0;
         padding-right: 0;
     }        
}


@media (min-width: 576px) and (max-width: 735px) {      
    .hide-736
     {
         display: none !important;         
     }    
    .product-list p.card-text 
     {
         height: 80px;
     }  
}
@media (min-width: 736px) and (max-width: 1440px) {      
    .product-list p.card-text 
     {
         height: 110px;
     }     
}


@media (min-width: 576px) and (max-width: 1080px) {      
    .hide-1080
     {
         display: none !important;         
     }    
     .cumpar {
         left: 25px;
     }
}


@media (min-width: 576px) and (max-width: 1280px) {      
 
}
@media (min-width: 576px) and (max-width: 1366px) {

}
@media (min-width: 576px) and (max-width: 1440px) {    

}
@media (min-width: 576px) and (max-width: 1599px) {

}
@media (min-width: 1600px) {
    .container-width
     {
        max-width: 1520px;
        border: 0px solid green !important;
     }        
}

@media (min-width: 992px) and (max-width: 1279px) {
     .sidebar-sticky {
         min-width: 150px;
     }
}
@media (min-width: 1280px) and (max-width: 1365px)  {
     .sidebar-sticky {
         left: 15px;         
     }
}
@media (min-width: 1280px) {
     .sidebar-sticky {
        min-width: 190px;         
     }
}
@media (min-width: 1536px) {
     .sidebar-sticky {
        min-width: 220px;         
     }
}

@media (max-width: 991px) {
.headermenu #navbarNav ul.navbar-nav li.nav-item {
    width: 100%; /* for mobile */
    } 
}


/* Custom Column For Less Products - Start */
    .product-list .col {
    width: auto;
    }
@media (min-width: 768px) and (max-width: 991px)  {
    .product-list .col { 
    max-width: 240px;
    }    
}
@media (min-width: 992px) and (max-width: 1079px)  {
    .product-list .col { 
    max-width: 260px;
    }    
}

@media (min-width: 1080px) and (max-width: 1279px)  {
    .product-list .col { 
    max-width: 226px;
    }    
}
@media (min-width: 1280px) and (max-width: 1365px)  {
    .product-list .col { 
    max-width: 240px;
    }    
}
@media (min-width: 1366px) and (max-width: 1439px)  {
    .product-list .col { 
    max-width: 258px;
    }    
}
@media (min-width: 1440px) and (max-width: 1600px)  {
    .product-list .col { 
    max-width: 220px;
    }    
}
@media (min-width: 1600px) {
    .product-list .col { 
    max-width: 206px;
    }    
}
/* Custom Column For Less Products - End */


/*
1920x1080
1600x900
1536x864
1440x900
1366x768
1280x720
1280x800
1280x1024
1024x768
*/


/*
    .less-product .product1 .col { 
    max-width: 220px;
    }  
*/