@import url("_generic_style.css");

/*--- Global --------------------------------------------------------------------------*/
:root {
  --albastru: #0082E6;
  --verde: #3CB371;
  --rosu:#D32E25;
  --gri_meniuri: #3E444A;
  --background: #F2F2F7;
  --pret: #EF2809;
}

html, form, button, input, h1, h2, h3, h4, div, span {font-family: 'Open Sans', sans-serif;}

html {font-size:14px; color:#000;}
body {background-color:#F2F2F7; overflow-x: hidden; position:relative; height:100%;}
html,body {min-width: 320px;}

/*body {display: flex; flex-direction: column; min-height: 100vh;}
main {flex:1}*/



/* Paragraphs */
p {text-indent:0px; font-size:14px; text-align:left; padding:5px 0; line-height:20px;}
p.centru {text-align:center}
p.justified {text-align:justify}

/* Anchors */
A {outline: 0;}
A img {border: 0px; text-decoration: none;}
A:link, A:visited {
	color: #000;
	text-decoration: none;
}
A:hover, A:active, A.selected {
	color: var(--albastru);
	text-decoration: none;

}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size:0.7em;
}
sub {
  top: 0.4em;
}

.backgr_red {background-color:red}
.backgr_consum {background-color:black}
.backgr_flux {background-color:#0082E6}
.backgr_culoare_lumina {background-color:grey}
.backgr_lightblue {background-color:#F0F8FF!important}

button.button_as_link {
  display:inline;
  background: none!important;
  border: none;
  padding: 0!important;
  margin: 0!important;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  vertical-align:text-top;
  height:auto;
}
/* SFARSIT declaratii GENERALE */

/* Global site notices */
.nojavascript_notice {background:#A9242B; padding:20px 0; font-size:12px; line-height:1.25; text-align:center; color:#FFF; }
.nojavascript_notice .notice-inner { width:580px; margin:0 auto; padding:0 0 0 80px; background:url(../images/warning.png) 15px 10px no-repeat; text-align:center; border:1px dotted #FFF;}
.nojavascript_notice .notice-inner p { padding:5px; font-size:12px;}

/* Headings */
h1 { display:inline-block; font-size:2em; color:#000; font-weight:normal;}
h1 {}
h2 { font-size:24px; color:#000; font-weight:normal; line-height:1.3em}



/* WRAPPERS -----------------------------------------------------------------------------------------------------------------------*/
.wrapper { width:1520px; margin: 0 auto; padding: 0 10px;}
.wrapper_left {float:left; width:302px; padding-right:15px;}
.wrapper_right {float:left; width:calc(100% - 302px);}

.padding20 {padding:20px}
.spatiere20 {height:20px}
.flex_2col {display:flex; justify-content: space-between; align-items: flex-start}
.poza_mobil {margin:auto; text-align:center;}


.align_between {display: flex; justify-content: space-between;}

.header_categ {display:block; width:100%; background-color:#FFF; padding:0px; margin:20px auto; color:#000;}
.info_categ {display:table; width:100%;}
.info_categ span {color:#666; font-size:1em}
.info_categ .title {display:table-cell; padding:20px; text-align:left; vertical-align:middle }
.info_categ .order {display:table-cell; padding:20px;  text-align:right; vertical-align:middle}
.info_categ .order span {color:#AAA}
.info_filtre {display: block; padding:20px;  text-align:left; vertical-align:middle; border-top:1px solid #CCC}
.info_filtre button {display:inline-block; line-height:30px; padding:0 0 0 10px; border:1px solid #CCC; border-radius: 3px; font-size:1rem; text-align:left; cursor:pointer; vertical-align: middle; margin-right:20px; background-color:#FFF}
.info_filtre button span {display:inline-block; font-weight:bold; color:#FFF; width:20px; height:30px; text-align:center; background-color:#CCC; margin-left:10px}
.info_filtre button:hover {color:red !important; border:1px solid red; color:red;}
.info_filtre button:hover span {background-color:red; color:#FFF;}
.btn_filtre_M { display:none; border: 1px solid #999; padding: 10px 0 10px 8px; margin: 0 !important; border-radius: 3px; width: calc(100% - 170px); height:40px; cursor: pointer; text-align:left; color: #999; background-color:#FFF; z-index:1}
.header_filtre_M {display:none; position:absolute; top:0; left:0; width:100%; padding:10px 0 10px 20px; color:#FFF; background-color:#000; font-size:22px; text-align:left; z-index:199;  background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(34,139,34,1) 50%, rgba(0,130,230,1) 100%);}
.header_filtre_M span {font-size:16px; }
.header_filtre_M button {float:right; display:inline-block; padding:5px 10px; border:1px solid #CCC; border-radius: 3px; font-size:1rem; text-align:left; cursor:pointer; vertical-align: middle; margin-right:20px; background-color:#FFF}

.caseta_normala {display:block; width:100%; background-color:#FFF; padding:0 20px 20px 20px; margin:0 auto; color:#000;}




/* icons */
.icons20 {width:20px; height:20px; display: inline-block; margin:0 auto 0 20px; padding:0; vertical-align:middle}
.icon_telefon {background: url(../images/icons/icon-telefon.png) no-repeat top left;}
.icon_whatsapp {background: url(../images/icons/icon-whatsapp.png) no-repeat top left;}
.icon_locatie {background: url(../images/icons/icon-locatie.png) no-repeat top left;}
.icon_contact {background: url(../images/icons/icon-contact.png) no-repeat top left;}
.icon_deee {background: url(../images/icons/icon-deee.svg) no-repeat top left;}

.icons20_p {width:24px; height:24px; display: inline-block; margin:0 10px 0 0; padding:0; vertical-align:middle}
.icon_livrare {background: url(../images/icons/icon_livrare.svg) no-repeat top left;}
.icon_colet {background: url(../images/icons/icon_colet.svg) no-repeat top left;}
.icon_retur {background: url(../images/icons/icon_retur.svg) no-repeat top left;}




/*///START///*/
/* linie_TOP */
#linie_top {margin:0; width:100%; height:30px; line-height:30px; border-top:0px solid #CCC; border-bottom:1px solid #CCC; background: #FFF; font-size:12px; color:#666}
#linie_top a {color:#666}
#linie_top a:hover, #linie_top a.selected {color:var(--albastru); -webkit-transition: all 0.3s;	transition: all 0.3s; text-decoration: none; }

/* linie_top_info */
#linie_top_info {display:inline-block; margin: 0 auto 0 0 ;}
#linie_top_telefon {display:inline-block;}
#linie_top_whatsapp {display:inline-block;}
#linie_top_locatii {display:inline-block;}

/* linie_top_meniu */
#linie_top_meniu {display:inline-block; margin: 0 0 0 auto; padding:0; text-align:right;  }
.meniu_linie li {display: inline-block; padding:0px 15px; color:#333; border-right: 1px solid #CCC;}
.meniu_linie li.last {border-right: none; }
.meniu_linie li a {color: #333; background: none;}
/*///END///*/








/*///START///*/
/* bara_LOGO */
#bara_logo {width:100%; height:80px;}
#bara_logo .logo_container {position: relative; display:inline-block; padding:0 30px; width:287px; line-height:80px; z-index:11}
#bara_logo .logo_container img {vertical-align: middle; filter: drop-shadow(0px 0px 5px rgb(180 180 180 / 1));}

#bara_logo .search_container {display:inline-block; width: calc(100% - 697px);}

#bara_logo .cart_container {display:inline-block; width:400px; height:80px; line-height:80px; text-align:right; }

#cos_produse {width:130px; height:40px; margin:auto 0 0 auto; padding:0; position:relative; vertical-align:middle; border:0; background:transparent; text-align:right; font-size:14px; color:#000; cursor:pointer; z-index:11}

#cos_produse .icon_cos_produse  { width:40px; height:40px;
background: url(../images/icons/icon-cos-produse.png) no-repeat center center; border-radius:50%; border:1px solid #CCC;
position: absolute; top: 50%; left: 5px; transform: translateY(-50%);
}

#cos_produse:hover {color:var(--albastru);}
#cos_produse:hover .icon_cos_produse {background: url(../images/icons/icon-cos-produse-A.png) no-repeat center center; background-color:var(--albastru);}

#cos_produse .bulina {position:absolute; left:35px; display:block; width:20px; height:20px; background-color:var(--albastru); border-radius: 100%; text-align:center; color:#FFF; }
#cos_produse .bulina:empty {display:none}
#cos_produse .valoare {}
/*///END///*/










#container_filtre {display:block; position:relative;}
.menu_left {position:relative}
.menu_left a.selected {font-weight:700; color:var(--albastru); }
.menu_left a:hover span, .menu_left a.selected span {color:var(--albastru); }

.menu_left_categ {margin:20px auto 0 auto; padding:15px 0 15px 20px; background-color:#FFF; border-radius: 3px; background-color: #F0F8FF; line-height:26px;}
.menu_left_categ ul {font-size:14px; list-style-type: none; }
.menu_left_categ li {}
.menu_left_subcateg {font-size:13px; list-style-type: none; padding:0 0 0 20px;}
.menu_left_subcateg li {}
.menu_left_categ span {position:absolute; right:20px; color:#CCC; font-size:12px}

.menu_left_filtre {margin:20px auto 0 auto; padding:10px 0 10px 20px; background-color:#FFF; border-radius: 3px; background-color: #FFF; line-height:26px;}
.menu_left_filtre span {position:absolute; right:20px; color:#CCC; font-size:12px}
.menu_left_filtre ul {margin:20px auto 0 auto; font-size:14px; list-style-type: none;}
.menu_left_filtre ul li {display: block; background:url('../images/icon_checkbox_empty.svg') no-repeat center left;}
.menu_left_filtre ul li a {display:block; padding:0 0 0 30px}
.menu_left_filtre ul li:hover, .menu_left_filtre ul li a.selected {background:url('../images/icon_checkbox_full.svg') no-repeat center left; font-weight:normal}



/* BUTOANE--------------------------------------------------------------------------*/

.btn_sterge_filtre {width:100%; margin:20px auto 0 auto; padding:10px 0 10px 20px; background-color:#FFF; border-radius: 3px; border:0; font-size:1rem; text-align:left; cursor:pointer}
.btn_sterge_filtre span{float: right; margin-right: 14px;  vertical-align: middle; font-weight:bold; color:red }
.btn_sterge_filtre:hover, .btn_sterge_filtre:hover span {color:red !important}


/*///START///*/
/* breadcrumbs */
#breadcrumbs {width:100%;  height: 37px; padding:20px 0 0 0; font-size:12px; color:#999; list-style: none; overflow:hidden; }
#breadcrumbs .inside {height:70px;  overflow-x: scroll;  overflow-y: hide; -webkit-overflow-scrolling:touch; white-space:nowrap;}
#breadcrumbs li {display:inline-block; color:#999;}
#breadcrumbs li+li:before {padding: 0 5px; color: #999; content: "/\00a0";}
#breadcrumbs li a {color:#999}
#breadcrumbs li a:hover {color:#0082E6; text-decoration: underline;}
/*///END///*/




/* TABELE--------------------------------------------------------------------------*/
table.specificatii_tehnice {width:100%;}
table.specificatii_tehnice td {height:40px; padding-left:10px; }
table.specificatii_tehnice td:first-child {font-weight:bold; width: 60%}
table.specificatii_tehnice tr:nth-child(even) { background-color: #F2F2F7;}
table.specificatii_tehnice tr:nth-child(odd) { background-color: #FFF;}
table.specificatii_tehnice tr:hover {background-color: #F0F8FF; font-weight:bold; color:var(--albastru)}


/* LISTE--------------------------------------------------------------------------*/

ol.lista, ul.lista {list-style-type: square; margin:5px 0 0 25px;}
ol.lista, ul.lista li {font-size:1em; line-height:1.8em; text-align:left}
ol.lista {list-style-type: decimal;}

ul.ulcheck {margin:5px 0 0 0; list-style-type: none;}
ul.ulcheck li {font-size:1em; line-height:1.8em; text-align:left}

ul.ulfaq {list-style-type:none;}
ul.ulfaq li {background: url('meniu/icon-faq.png') no-repeat; padding:0 0 10px 50px; font-size:2em; line-height:1.5em; text-align:left}



/*///START///*/
/* PRODUS--------------------------------------------------------------------------*/
.container_produs {background-color:#FFF; margin-top:20px; padding:20px 0; font-size:14px; }
    .flex_produs {display:flex; justify-content: space-between;}
    .flex_produs .poza_galerie {margin:0; width:500px; position:relative}
    .flex_produs .poza {margin:0; width:100%; position:relative}
    .flex_produs .poza .eticheta_energetica {position:absolute; top:0; left:0;}
    .flex_produs .poza .eticheta_energetica img {width:70px}
    .flex_produs .poza .IP_waterproof {position:absolute; top:3px; right:0; width:30px; height:30px}
    .flex_produs .poza .tags {position:absolute; bottom:50px; left:0;}
    .flex_produs .poza .tags div {display: table; margin:0 0 5px 0; padding:0 5px; font-size:18px; color:#FFF; font-weight:bold; border-radius: 5px;}
    .flex_produs .galerie {width:100%; display: flex; flex-flow: row wrap;}
    .flex_produs .galerie .galerie_grid { margin:9px; text-align:center; border:1px solid #CCC}
    .flex_produs .galerie .galerie_grid a {width:80px; height:80px; display:block;}
    .flex_produs .text {margin:0; width:calc(100% - 520px); }
        .flex_produs2 {display:flex; justify-content: space-between; margin-top:20px;}
        .flex_produs2 .info_p {margin:0; width:52%;}
        .flex_produs2 .info_p p { line-height:1.3em; color:#666}
        .flex_produs2 .pret_p {margin:0; width:44%;}
        .flex_produs2 .pret_p .pret_PRP {display:inline-block;  color:#666;}
        .flex_produs2 .pret_p .explicatie {display:inline-block; color:#CCC; cursor:pointer}
        .flex_produs2 .pret_p .pret {font-size:32px; font-weight:700; color:var(--pret); padding: 0 0 10px 0; }
        .flex_produs2 .pret_p .pret span {font-size:22px; font-weight:600; }
        .flex_produs2 .pret_p p { line-height:1.5em; color:#666}

.container_produs_specificatii {padding:50px 0; }
    .flex_produs_specificatii {display:flex; justify-content: space-between; margin-top:20px}
    .container_produs_specificatii .tabel {margin:0; width:49%;}

.container_produs_familie {padding:20px 0;}


         .produs_v2_btn {
            width:100%;
            height:50px;
            padding-left:25px;
            background-image: linear-gradient(to right, #3CB371 0%, #0082E6  61%, #D32E25  90%);
            transition: 0.5s;
            background-size: 200% auto;
            color: #FFF;
            box-shadow: 0 0 20px #eee;
            border-radius: 4px;
            display: block;
            font-size:18px; position:relative; border: 0;
            cursor:pointer;
          }

          .produs_v2_btn:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

          .produs_v2_btn:active{ border:1px solid #FFF; box-shadow: 0px 0px 15px 6px rgb(0 0 0 / 20%); transition: 0s;}
          .produs_v2_btn:active .cart { height:48px;}

.produs_v2_btn .cart {width:60px; height:50px; display: inline-block; margin:0; padding:0; vertical-align:middle; background: url(../images/icons/icon_cart.svg) no-repeat center center #0082E6; position:absolute; top:0; left:0; border-top-right-radius: 37% 100% !important;     border-bottom-right-radius: 37% 100% !important; border-top-left-radius: 8px; border-bottom-left-radius: 8px}


.produs_v1_btn {width:100%; height:50px; color:#FFF; border: 0; background-color:#EEE; background: linear-gradient(90deg, rgba(239, 40, 9, 1) 0%, rgba(0,130,230,1) 100%); cursor: pointer; border-radius:4px; font-size:18px; position:relative}
.produs_v1_btn:hover {background: linear-gradient(90deg, rgba(0,130,230,1) 0%, rgba(34,139,34,1) 100%); }
.produs_v1_btn .cart {width:60px; height:50px; display: inline-block; margin:0; padding:0; vertical-align:middle; background: url(../images/icons/icon_cart.svg) no-repeat center center #0082E6; position:absolute; top:0; left:0; border-top-right-radius: 37% 100% !important;     border-bottom-right-radius: 37% 100% !important;}

/*///END///*/


/*///START///*/
/* COS PRODUSE --------------------------------------------------------------------------*/
.col_cos_left {margin:0; width:calc(100% - 400px);}
.col_cos_right {margin:0; padding: 5px 0; text-decoration: none!important;  width:380px; }

.card {
    width: 100%;
    min-height: 100%;
    border-radius: 4px ;
    margin-bottom:10px;
    background-color: #FFF;
    line-height: 19px;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: box-shadow 0.15s ease;
    transition: box-shadow 0.15s ease;
}
.card:hover {box-shadow: 0 4px 16px -3px rgb(0 0 0 / 25%);}

.sumar_comanda {padding:20px;}

hr.linie {border-top: 1px solid #CCC; margin:20px 0}

ul.info_produse {position:relative; padding:0px; list-style-type: none;}
ul.info_produse li {padding:5px 0; display:flex; }
ul.info_produse li div {flex: 1; margin:initial}
ul.info_produse li div.produse {}
ul.info_produse li div.pret {}
ul.info_produse li div:nth-child(even) {flex:0 0 60px; white-space: nowrap; text-align:right;}
ul.info_produse li div.pret div  {color:#3CB371}
ul.info_produse li.total{ font-size:22px; padding:0px 0 20px 0; font-weight:600}
ul.info_produse li.total .pret {color:var(--pret)}
ul.info_produse a {color:var(--albastru)}
/*///END///*/

.card_online div {padding:20px 0; text-align:center}
.card_online span {display:block; margin:10px 0;}
.card_online .buton_acum button {background-image: linear-gradient(to right, #D32E25 0%, #0082E6  61%, #3CB371  90%); }

.container_general { width: 100%;
    min-height: 100%;
    border-radius: 4px ;
    padding: 1px;
    background-color: #FFF;
    line-height: 19px;
}

.titlu_sectiune_general {width:100%; padding: 10px 0; background-image: linear-gradient(to right, #3CB371 0%, #0082E6  61%, #D32E25  90%); background-size: 200% auto; font-size:1.4em; font-weight:500}
.titlu_sectiune_general div {padding:0 0 0 20px; color:#FFF}
.sectiune_general {padding: 20px 40px;}

.btn_general {width:100%; height:50px; background-image: linear-gradient(to right, #3CB371 0%, #0082E6  61%, #D32E25  90%); transition: 0.5s; background-size: 200% auto;
              color: #FFF; box-shadow: 0 0 20px #eee; border-radius: 4px; display: inline-block; font-size:18px; position:relative; border: 0; cursor:pointer;
}

.btn_general:hover { background-position: right center; color: #fff; text-decoration: none;}
.btn_general:active{ border:1px solid #FFF; box-shadow: 0px 0px 15px 6px rgb(0 0 0 / 20%); transition: 0s;}














/* FORMULARE--------------------------------------------------------------------------*/
/* Form Generic */
form {margin:0 auto; width:100%; font-size:14px; }
form span {display:inline-block; }
form label {position:relative; display: flex; margin: 0 0 10px 0;}
form label span.denumire {flex: 0 0 150px; display:inline-block; padding: 10px 20px 0 0; font-size:1em; color:#888; text-align:right}
form input, form select, form textarea { display: inline-block; padding:0 0 0 20px; height:40px; font-size:1em; outline: 0 none; border:1px solid #DDD; font-family: "Open Sans", sans-serif; outline: 0 none;}
form textarea {height:300px; vertical-align:top}
form select:required:invalid {color: #AAA;}
form option[value=""][disabled] {display: none;}
form option {color: black;}
form input.short {flex: 0 0 300px;}

form input[type='text'].readonly {background:#EEE; border-color:#FFF}
form input[type='checkbox'] {display: inline-block; width:30px; height:30px; margin:0px auto; padding: 0; vertical-align:middle; outline: 0 none; border:1px solid #CCC;}
form input[type='file'] {display: inline-block; height:40px; margin:0 auto; padding: 0; vertical-align:middle; outline: 0 none; background:#FFF; }

form input.email {display:none} /*pentru honeypot*/



 #PFPJ_radio {width:100%; padding:10px 0;}
 #PFPJ_radio div {display:inline-block}
 #PFPJ_radio input {width:20px; height:20px; margin:0 10px 0 20px; vertical-align: middle; outline: none;}
 #PFPJ_radio span {padding-right:30px; vertical-align: middle;}

.butoane_radio label {display:block}
.butoane_radio label input { width:20px; height:20px; margin:0 20px 0 20px; vertical-align: middle; outline: none;}
.butoane_radio label span {vertical-align: middle;}
.butoane_radio label div {color:#AAA; font-size:0.9em; font-style:italic; margin:0; padding:5px 0 0 60px}
.butoane_radio label input.lockerId { width:50px; height:25px; margin:0 20px 0 20px; padding:0; vertical-align: middle; outline: none; text-align:center}
.butoane_radio label button { height:25px; padding:0 10px; vertical-align: middle; outline: none; text-align:center}


.ascundePJPF {display:none; margin:30px 0 0 0}
.ascundeLivrare {display:none;}
#lockerName {color:black; font-style:normal; }

.TC {position:relative; width:100%; text-align:center; padding:30px 0;}
.TC input:focus:invalid {border-color:#000}
.TC input:not(:focus):not(:placeholder-shown):invalid {border-color:#000}
.TC .error {position:absolute; margin-top:-25px; left:0; padding: 0; background-color:white; font-size:1em!important; color:red; display:none}


/* formular comanda */
.form_comanda {}
.form_comanda label {}
.form_comanda label .denumire {}
.form_comanda input, .form_comanda select, .form_comanda textarea {flex: 1;}
.form_comanda textarea {padding: 5px 0 5px 20px; height:100px; }

.form_comanda .error1 {position:relative; top:0; right:0; padding: 5px 0px; color:red; font-size:1.3em; display:none}
.form_comanda .error {position:absolute; top:30px; right:20px; padding: 0 10px; background-color:white; font-size:0.8em; color:red; display:none}
.form_comanda .valid {flex: 0 0 50px; color:green; font-size:1.3em; display:none; text-align:center; background: url(../images/icon_afisare1.png) no-repeat center center;}




.form_comanda input.submit{
            width:100%;
            height:50px;
            padding-left:25px;
            background-image: linear-gradient(to right, #3CB371 0%, #0082E6  61%, #D32E25  90%);
            transition: 0.5s;
            background-size: 200% auto;
            color: #FFF;
            box-shadow: 0 0 20px #eee;
            border-radius: 4px;
            display: block;
            font-size:18px; position:relative; border: 0;
            cursor:pointer;
          }

.form_comanda input.submit:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

.form_comanda input.submit:active{ border:1px solid #FFF; box-shadow: 0px 0px 15px 6px rgb(0 0 0 / 20%); transition: 0s;}


input:focus {
  outline: none;
}

input:focus::placeholder {
  color: transparent;
}

input:focus:valid {
  border-color: #DDD;
}





.input_label {display: none; position:absolute;
  top:-8px;
  left:170px;
  padding: 0 10px;
  background-color:white;
  font-size:0.8em;
  color: #BBB;
}

input[type='text']:focus ~ .input_label{display: block;}
input[type='text']:not(:focus):not(:placeholder-shown):invalid ~ .input_label {display: block; color:red;}
input[type='text']:not(:focus):not(:placeholder-shown):invalid ~ .error {display: block;}
input[type='checkbox']:focus:invalid ~ .error {display: block;}
input[type='text']:not(:focus):not(:placeholder-shown):invalid {border-color: red;}



input:not(:placeholder-shown):valid ~ .valid {display:inline-block; }
select:not(:placeholder-shown):valid ~ .valid {display:inline-block; }

input:focus:invalid {border-color: red;}
select:focus:invalid {border-color: red;}

input:focus:invalid ~ .input_label {display: block; color:red;}
select:focus:invalid ~ .input_label {display: block; color:red;}



::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #AAA;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #AAA;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #AAA;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #AAA;
}




.menu_left_diverse {margin:20px auto 0 auto; padding:10px 20px; background-color:#FFF; border-radius: 3px; background-color: #FFF; line-height:26px;}
.menu_left_diverse .titlu {font-size:16px; font-weight:700}
.menu_left_diverse ul {margin:20px auto 0 auto; font-size:14px; list-style-type: none;}
.menu_left_diverse ul li {display: block;}
.menu_left_diverse ul li a {display:block;}

.menu_left_diverse .menu_left_img {display:block}
.image_fit img {width:100%;}

.caseta_stanga {display:block; width:100%; background-color:#FFF; padding:20px; margin:20px auto; color:#000;}
.caseta_stanga .titlu {padding:10px 0; font-size:18px; font-weight:700}
.flex_container {display:flex; width:100%;  align-items: flex-start;}
.flex_container .f2 {flex:50%; text-align:left; margin:0}
.flex_container .f4 {flex:25%; text-align:left; margin:0}








#footer {display:block; width:100%; background-color:#FFF; margin:30px auto 0 auto; padding:20px 0; color:#000; border-top:1px solid #DDD; border-bottom:1px solid #DDD}
#under_footer {display:block; width:100%; background-color:#F0F8FF; padding:20px 0; color:#000;}
#under_footer p {font-size:12px; line-height:14px}

ul.footer {position:relative; padding:0px; list-style-type: none;}
ul.footer li {padding:3px 0; display:flex; }
ul.footer a {color:#000;}
ul.footer a:hover {color:var(--albastru); text-decoration: underline;}

hr.footer {border-top: 2px solid var(--albastru); width:50px; margin:20px 0}
.flex_container div.right {text-align:right;}




/*faq*/
.faq { margin:5px 0 0 0px }
.faq li a { }
.faq li a:hover { text-decoration: none; color:#FFB800; font-weight:bold;   }
.faq dt, .faq dt a { font-weight:bold; padding:10px 0 3px 0; color:#000; text-decoration: none; }
.faq ul {list-style-position: inside; }


#menu-toggle {
  display: none;
}




.articol {width:100%; }
.articol .poza_principala_left {float:left; margin:0 30px 0 0}
.articol .poza_principala {width:100%; margin:0 0 5px 0}
.articol .text {text-align:justify; padding-bottom:30px;}
.articol .text img {display: block; margin:auto}
.articol h2 {text-align:center; padding:20px 0; font-size:26px; font-weight:bold; display:block; height:220px}
.articol h2.inside {height:auto}
.articol ul, .articol ol {margin:0 0 0 40px}

.articol_home { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style-type: none; vertical-align:top}
.articol_home .celula {flex: 0 0 24.66%; box-sizing: border-box; padding: 10px; margin-top:0}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT ***************************************************************************************************/


@media (max-width: 1530px)
{
.wrapper {width:1220px}
.wrapper_left {width:242px;}
.wrapper_right {width:calc(100% - 242px);}

    .flex_produs .poza_galerie {margin:0; width:400px}
    .flex_produs .text {margin:0; width:calc(100% - 420px);}

.col_cos_left { width:calc(100% - 380px);}
.col_cos_right { width:360px; }


}



@media (max-width: 1259.98px)
{
.wrapper {width:960px}
.wrapper_left {width:237px;}
.wrapper_right {width:calc(100% - 237px);}

#linie_top_info .text {display:none}
#bara_logo .search_container {width: calc(100% - 597px);}
#bara_logo .cart_container {width:300px;}

    .flex_produs .poza_galerie {margin:0; width:300px}
    .flex_produs .text {margin:0; width:calc(100% - 320px);}


}



@media (max-width: 991.98px)
{
.wrapper {width:740px}
.wrapper_left {width:243px;}
.wrapper_right {width:calc(100% - 243px);}

#linie_top_locatii {display:none}
#bara_logo .search_container {width: calc(100% - 447px);}
#bara_logo .cart_container {width:150px;}

        .flex_produs2 {flex-direction:column-reverse}
        .flex_produs2 .info_p {margin:0; width:100%; margin-top:20px}
        .flex_produs2 .pret_p {margin:0; width:100%;}


.flex_2col {flex-direction:column}
.col_cos_left {width:100%;}
.col_cos_right {width:100%; }

.sticky {position: fixed; bottom:0; width:100%; background-color:#FFF; left:0; z-index:999; box-shadow: 0px -3px 5px #CCC;}
.padding20M {padding:5px 20px 10px 20px}
ul.info li.total{ font-size:18px; padding:0; font-weight:600}
ul.info li.total span {color:var(--pret)}
}



@media (max-width: 767.98px)
{

h2 {text-align:center}

.wrapper {width:100%}
.wrapper_left {width:100%;}
.wrapper_right {width:100%;}
.poza_mobil img{width:100%}

.align_between {display: block; justify-content: space-between;}

/*///START///*/
/* linie_TOP */
#linie_top {margin:0; width:100%; height:auto; line-height:30px; border-top:0px solid #CCC; border-bottom:1px solid #CCC; background: #FFF; font-size:12px; color:#666}
#linie_top a {color:#666}
#linie_top a:hover {color:var(--albastru)}

/* linie_top_info */
#linie_top_info {display:none; margin: 0 auto; text-align:center}
#linie_top_telefon {display:inline-block; margin: auto;}
#linie_top_whatsapp {display:inline-block; margin: auto;}
#linie_top_locatii {display:none}

/* linie_top_meniu */
#linie_top_meniu {display:block; margin: 0 0 0 auto; padding:0; text-align:center;  }
.meniu_linie li {display: inline-block; padding:0px 15px; color:#333; border-right: 1px solid #CCC;}
.meniu_linie li.last {border-right: none; }
.meniu_linie li a {color: #333; background: none;}
.meniu_linie li a:hover, .meniu_linie li a.selected { color:#FF0000; -webkit-transition: all 0.3s;	transition: all 0.3s; text-decoration: none; }
/*///END///*/


.info_categ {display:block; width:100%;}
.info_categ span {display:block}
.info_categ .title {display:block; text-align:center;}
.info_categ .order {display:block; padding:20px;  text-align:center; width:100%; vertical-align:top;}
.info_filtre {display: block; padding:20px 0 0 0;  text-align:center; vertical-align:middle; border-top:1px solid #CCC}
.info_filtre .tot  {}
.info_filtre button {display:inline-block; margin-bottom:20px;}



/*///START///*/
/* bara_LOGO */
#bara_logo {position:relative; width:100%; height:auto;}
#bara_logo .logo_container {display:block; padding:0; margin:auto; width:200px; line-height:80px; text-align:center;}
#bara_logo .logo_container img {vertical-align: middle;}

#bara_logo .search_container {display:block; width: 100%;}

#bara_logo .cart_container {display:inline-block; width:40px; height:40px; line-height:40px; text-align:right; position: absolute; top: 20px; right: 10px; }

#cos_produse {width:40px; height:40px; margin:auto 0 0 auto; padding:0; position:relative; vertical-align:middle; border:0; background:transparent; text-align:right; font-size:14px;; cursor:pointer;}

#cos_produse .icon_cos_produse  { width:40px; height:40px;
background: url(../images/icons/icon-cos-produse.png) no-repeat center center; border-radius:50%; border:1px solid #CCC;
position: absolute;
}
#cos_produse:hover .icon_cos_produse {background: url(../images/icons/icon-cos-produse-A.png) no-repeat center center; background-color:var(--albastru);}

#cos_produse .nume {display:none}
#cos_produse .valoare {display:none}
/*///END///*/


.menu_left_categ {display:none}
.nodisplay {display:none}
#container_filtre {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#F2F2F7; z-index:99; overflow-y: scroll;}
.info_filtre button {font-size:0.9rem; margin-right:20px; }
.btn_filtre_M { display:inline-block; font-size:14px; }
.spatiu50_M {height:50px;}
.header_filtre_M {display:block;}

/*///START///*/
/* PRODUS--------------------------------------------------------------------------*/
.container_produs {background-color:#FFF; margin-top:20px; padding:20px 0; font-size:13px; }
    .flex_produs {display:block;}
    .flex_produs .poza_galerie {margin:0; width:100%}
    .flex_produs .poza_galerie .eticheta_energetica img {width:70px}

    .flex_produs .galerie {align-content: space-between; justify-content: space-between;}
    .flex_produs .galerie .galerie_grid { margin:3px;}

    .flex_produs .text {margin:0; width:100%}
        .flex_produs2 {flex-direction:column-reverse}
        .flex_produs2 .info_p {margin:0; width:100%; margin-top:20px}
        .flex_produs2 .pret_p {margin:0; width:100%;}

    .flex_produs_specificatii {display:block;}
    .container_produs_specificatii .tabel {margin:0; width:100%;}


button.button_as_link {font-size:12px;}

/* FORMULARE--------------------------------------------------------------------------*/
form input.short {flex: 1;}
form label span.denumire {display:none}
.sectiune_general {padding: 20px 10px;}
.input_label {display: block; left:10px}
 #PFPJ_radio div {display: block; padding:0 0 5px 0}
.butoane_radio .TC div {margin:0; padding:5px 0}
form input, form select, form textarea {margin:0 0 10px 0}
.form_comanda .error {position:absolute; top:30px; right:5px; padding: 0 5pxpx; background-color:white; font-size:0.8em; color:red; display:none; line-height: 1em; text-align:right}


.flex_container {display:block; width:100%;}
.flex_container .f2, .flex_container .f4 {margin-bottom:30px;}

.flex_container div.right a {display:block; }
.flex_container div.right {text-align:center;}

#footer {padding:20px;}
#under_footer {padding:20px;}


.articol { margin:30px 0 0 0 }
.articol .poza_principala_left {float:none; margin:10px 0; width:100%}
.articol .poza_principala {float:none; margin:10px 0; width:100%}
.articol .text img {width:100%}
.articol h2 {text-align:center; padding:20px 0; font-size:26px; font-weight:bold; display:block; height:auto}

.articol_home { display: block; }
.articol_home .celula {display:block}

}