/* RESET */
h1, h2, h3, h4, h5, h6, ul, ol, li , dl, dd, dt {margin: 0;padding: 0;}
ul, ul li {list-style: none;}
img {border: 0 none;}
a {text-decoration: none; transition: all 0.5s;}
a:hover {text-decoration: none !important;}
p {margin: 0;padding: 0;line-height: 20px;}
input {/*-webkit-appearance: none;-moz-appearance: none;appearance: none;*/transition: all 0.5s;}
.clear {clear: both;}
/* end reset */

@font-face {font-family: "vol"; src: url("../fonts/Vollkorn/Vollkorn-Regular.ttf");}
@font-face {font-family: "volsemibold"; src: url("../fonts/Vollkorn/Vollkorn-SemiBold.ttf");}
@font-face {font-family: "volbold"; src: url("../fonts/Vollkorn/Vollkorn-Bold.ttf");}
@font-face {font-family: "volblack"; src: url("../fonts/Vollkorn/Vollkorn-Black.ttf");}

@font-face {font-family: "averiaserif"; src: url("../fonts/Averia_Serif_Libre/AveriaSerifLibre-Regular.ttf");}

@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello/awesome-entypo.eot?22577642');
    src: url('../fonts/fontello/awesome-entypo.eot?22577642#iefix') format('embedded-opentype'),
         url('../fonts/fontello/awesome-entypo.woff?22577642') format('woff'),
         url('../fonts/fontello/awesome-entypo.ttf?22577642') format('truetype'),
         url('../fonts/fontello/awesome-entypo.svg?22577642#awesome-entypo') format('svg');
    font-weight: normal;
    font-style: normal;
  }
   
   
.demo-icon {
  font-family: "fontello"; font-style: normal; font-weight: normal; speak: none;
  display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none;
  /* fix buttons height, for twitter bootstrap */ line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */ margin-left: .2em;
  /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
.codesOn .i-name {display: none;}
.codesOn .i-code {display: inline;}
.i-code {display: none;}

* {box-sizing: border-box; transition: all 0.5s;}
button {cursor: pointer;}

body {font: 18px/24px vol; color: #333;}

:root {
    --albastru: #0f466c; /* 15,70,108 */
    --verde: #5fbc4b; /* 95,188,75 */
    }

.intro-container {width: 1200px; margin: 20px auto;}
.intro-sigla {text-align: center;}
.intro-sigla img {width: 300px; margin: 30px auto;}
.intro-text {
    column-count: 2; column-gap: 40px;
    transition: none;
    margin: 0 0 30px 0;
    }
.intro-text p {
    font: 18px/28px vol;
    text-align: justify;
    transition: none;
    }
.intro-img img {width: 100%;}
.intro a {color: #333;}
.intro a:hover {color: #999;}

@media screen and (max-width: 1100px) {
    .intro-container {width: 96%; margin: 20px auto;}
}
@media screen and (max-width: 800px) {
    .intro-text {column-count: 1; column-gap: 0px;}
}
    
.topmenu {
    background: #fff;
    text-align: center;
    font-family: vol;
    }
.topmenu-cont {
    position: relative;
    width: 1260px; margin: 0 auto;
    text-align: left;
    }
.sigla img {
    width: 250px; margin: 20px 0 0 0;
    }
.cos {position: absolute; top: 10px; right: 0;}
.cos a {color: #333;}
.cos a:hover {opacity: 0.4;}
.cos a:before {
    content: "\f218";
    display: block;
    font: 40px fontello;
    transform: scaleX(-1);
    }
.cos strong {
    position: absolute; top: -5px; left: -25px;
    background: #eee;
    text-align: center;
    padding: 3px 0; width: 30px;
    border-radius: 100px;
    }

.cautare {
    display: block;
    position: absolute; top: 127px; right: 0px;
    padding: 0 50px 0 0;
    }
.cautare:before {
    content: "\e8b1"; font: 40px fontello;
    transform: scaleX(-1);
    position: absolute; top: 0; right: 0;
    }
.cautare input {
    border: none; border-bottom: 1px solid #777;
    background: #fff;
    font: 16px/16px vol;
    padding: 7px 0;
    }
.cautare input:focus {outline: none;}




#cautare_avans2 {
    position: absolute;	top: 169px; right: 0; z-index: 300;
    width: 400px;
    }
#cautare_avans {
    position: relative;
    border: 2px solid rgba(121, 133, 151, 0.15); border-top: none;
    border-radius: 0 0 3px 3px;
    width: 100%;
    background: #fff; box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    text-align: left;
    }

#cautare_avans h2 {
    font-size: 14px;
    background: #eee; color: #000 !important;
    margin: 20px 0 5px 0;
    padding: 5px 10px 5px 10px;
    border-radius: 2px 2px 0 0;
    }

#cautare_avans h2 span {
    font-size: 12px;
    padding: 0 0 0 5px;
    }

.cautare_txt {
    display: block; position: relative;
    text-decoration: none;
    color: #333;
    padding: 0px 0 7px 10px;
    margin: 0 0 3px 0;
    font-size: 16px;
    }
.cautare_txt:before {
    content: "- ";
    font-size: 15px; opacity: 0.7;
    position: absolute; top: 0px; left: 0;
    }
.cautare_txt:hover {color: #333;}
    
#cautare_vezi {
    display: block;
    background: #333; color: #fff;
    font-size: 14px;
    border-radius: 2px;
    padding: 10px 0;
    margin: 10px 0 0 0;
    text-align: center; text-decoration: none; text-transform: uppercase;
    border: 0 none; border-radius: 4px;
    width: 100%;
    cursor: pointer;
    transition: all 0.5s;
}

#cautare_vezi:hover, #cautare_avans input:hover {
    opacity: 0.7;
    }

.cautare_txt2 {
    display: block;
    text-decoration: none;
    color: #135484;
    background: url(../assets/arrow7.png) no-repeat 0 4px;
    padding: 0 0 0 14px;
    margin: 0 0 6px 0;
    line-height: 14px;
    }
.cautare_txt2:hover {
    background: #eee url(../assets/arrow7.png) no-repeat 0 4px;
    }



.cautare_raspuns {
    margin: 0 0 20px 0;
    }
.cautare_raspuns h2 {
    font-size: 16px;
    background: url(../assets/arrow7.png) no-repeat 0px 7px;
    padding: 0 0 3px 14px;
    margin: 0 0 5px 0;
    border-bottom: 1px solid #c4d2dc;
    }
.cautare_raspuns p {
    margin: 0 0 0px 0;
    padding: 0;
    }











.minimenu {
    position: absolute; top: 23px; right: 130px;
    padding: 0 50px 0 0;
    }
.minimenu li {display: inline-block; vertical-align: top;}
.minimenu li a {
    display: block;
    color: #333;
    font: 16px/22px vol;
    margin: 0 0 0 15px;
    text-transform: uppercase;
    }
.minimenu li a strong {font-family: volsemibold;}
.minimenu li a:first-letter {font-size: 22px;}

#smoothmenu2 {position: absolute; top: 30px; right: 0;}
#smoothmenu2 ul {margin: 0 0px 0 261px; text-align: right;}
#smoothmenu2 li {display: inline-block; vertical-align: top; margin-bottom: 24px;}
#smoothmenu2 li a {
    display: block;
    color: #333;
    font: 16px/22px vol; 
    margin: 0 0 0 20px;
    text-transform: uppercase;
    }
#smoothmenu2 li a:first-letter {font-size: 22px;}
#smoothmenu2 li a:hover {color: #999;}
#smoothmenu2 li.stop a {border-bottom: 5px solid #eee;}

#smoothmenu2 li:nth-child(1) { /* Noutati */
    margin-left: 55px;
    }
#smoothmenu2 li:nth-child(6) { /* Biblioteca */
    margin-right: 100px;
    }


.global {margin: 90px 0 0 0;}

.content {width: 1260px; min-height: 50vh; margin: 0 auto;}
.content p {font: 18px/26px vol; margin: 0 0 20px 0;}

h1 {
    position: relative;
    font: 45px/50px vol; letter-spacing: -1px;
    text-align: left;
    margin: 70px 0 30px 0;
    }
h1 strong {font: 45px/50px volsemibold;}
h1 span {
    margin: 0px; color: #999;
    display: block; 
    font: 32px/35px vol; letter-spacing: -0.7px;
    }


/* HOME */
.home-produse {display: none;}
.poze3 {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    }
.poze3 img {width: 395px;}

.home-dreapta {
    position: relative;
    float: right; width: 830px; height: 600px;
    column-count: 2; column-gap: 30px;
    margin: 20px 0 100px 0; padding: 0 0 50px 0;
    overflow: hidden;
    }

.home-dreapta h2 {font: 30px/32px vol; margin: 0 0 10px 0;}
.home-dreapta p {
    text-align: justify;
    font: 18px/24px vol;
    margin: 0 0 20px 0;
    }
.home-dreapta p a {color: #333; border-bottom: 1px solid #999;}
.home-dreapta p a:hover {border-bottom: 1px solid #000;}



.home-marturii {
    float: none; clear: both;
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 30px 0;
    }
.home-marturii h2 {
    width: 100%; text-align: center;
    font: 32px/34px vol; letter-spacing: -1px;
    margin: 0 0 50px 0;
    }
.marturie {width: 32%; position: relative;}
.marturie strong {
    display: block;
    font: 22px/24px vol;
    margin: 0 0 10px 0;
    color: #777;
    }
.marturie span {
    display: block; height: 90px;
    text-align: justify;
    font: 18px/22px vol;
    overflow: hidden;
    }
.marturie:after {
    content: "\e90e"; font: 20px fontello;
    position: absolute; bottom: 0; left: 0;
    display: block; width: 100%; height: 30px;
    background: #fff; color: #aaa;
    text-align: center;
    padding: 5px 0;
    }
.inchide2 > span {height: initial; padding-bottom: 50px;}
.inchide2:after {transform: rotate(180deg); color: #000;}

/*.marturie span:before {content: '"'; font-size: 22px}
.marturie span:after {content: '"'; font-size: 22px}*/
.mm {
    display: inline-block; vertical-align: top;
    color: #333;
    border: 1px solid #ddd; border-radius: 2px;
    font: 20px/20px vol; text-align: center; text-transform: uppercase;
    padding: 10px 30px; margin: 30px auto 50px auto;
    }
.mm:hover {border: 1px solid #999;}
/* end home */

.col2 {column-count: 2; column-gap: 30px;}
.col2 h2 {
    font: 26px/32px vol;
    margin: 0 0 10px 0;
    }
.col2 p {text-align: justify;}
.content li {position: relative; padding: 0 0 5px 17px;}
.content li:before {
    content: "\e90a"; font: 16px fontello;
    position: absolute; top: 3px; left: 0;
    }


/* PRODUSE */
.text-categ {
    position: relative;
    text-align: justify;
    height: 150px; overflow: hidden;
    column-count: 1; column-gap: 0px;
    padding: 0 0 35px 0;
    }
.tc-inchide {
    column-count: 2; column-gap: 30px;
    }

.div-inchide {height: initial;}
.home-dreapta span:first-child {display: inline-block;}
.home-dreapta span:last-child {display: none;}

.text-categ span:first-child {display: inline-block;}
.text-categ span:last-child {display: none;}

.div-inchide span:first-child {display: none;}
.div-inchide span:last-child {display: inline-block;}

.produse {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 50px 40px;
    margin: 30px 0;
    }
.produs {
    position: relative;
    }
.produs a img {
    width: 100%; height: 350px; object-fit: cover;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.04);
    }
.produs a:hover img {
    border-color: #000;
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    }

.produs .produs-titlu {
    position: relative;
    display: block; text-align: left;
    font: 16px/18px vol;
    color: #333;
    margin: 7px 0 0 0;
    min-height: 55px;
    }
.produs .produs-titlu strong {font-family: volsemibold; letter-spacing: -0.5px;}
.produs .produs-titlu:hover {opacity: 0.7;}
.produs .produs-titlu span::before {content: " - ";}
.produs .produs-titlu span {
    font: 16px/18px vol;
    }
.produs .dim {
    float: left; text-transform: none;
    font: 14px/14px volsemibold;
    text-align: left;
    }
.produs .autor {
    display: block; text-align: right;
    min-height: 40px;
    text-transform: uppercase;
    font: 12px/12px volsemibold;
    margin: 4px 0 0px 0;
    color: #999;
    }
/*.produs .autor:after {
    content: "\e849"; font: 16px fontello;
    margin: 0 0 0 5px;
    }*/

.produs .adauga span {display: none;}
.produs .pret {
    position: relative;
    display: inline-block; float: left;
    width: 54%;
    }
.produs .pret strong {
    position: relative;
    display: block;
    font: 40px/40px vol;
    letter-spacing: -2px;
    }
.produs .pret sup {
    font: 16px/16px vol;
    letter-spacing: 0px;
    margin: 0 0 0 5px;
    }
.produs .pret strong em { /* LEI */
    font: 10px/10px vol; letter-spacing: 0;
    text-transform: uppercase;
    position: absolute; bottom: 2px; right: 55px;
    color: #000;
    }
.produs .p-redus s {
    position: relative;
    display: block; margin: 10px 0 0 0;
    font: 20px/20px vol;
    color: #999;
    text-decoration: none;
    }
.produs .p-redus s sup {}
.produs .p-redus s:after {
    content: "LEI";
    margin: 0 0 0 5px;
    font: 10px/10px vol;
    }
.produs .p-redus s:before { /* taiat */
    content: "";
    display: none; width: 100%; height: 3px;
    border-top: 1px solid #999;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-12deg);
    }
.produs .pret strong:after {
    position: absolute; bottom: 0px; right: 0;
    content: "PREȚ EN GROS";
    display: block; width: 50px;
    font: 10px/10px volsemibold; letter-spacing: 0;
    text-align: right;
    }
.produs .pret s sup:after {
    position: absolute; bottom: 0px; right: 0;
    content: "PREȚ EN DETAIL";
    display: block; width: 50px;
    font: 10px/10px volsemibold; letter-spacing: 0;
    text-align: right;
    }



.adauga-cant {
   /* position: relative;*/
    display: inline-block; float: right;
    width: 45%;
    text-align: right;
    }
.adauga-cant input {
    display: inline-block; vertical-align: top; width: 50px;
    border: 1px solid #ddd; border-radius: 4px;
    text-align: center;
    background: #fff;
    font: 20px/20px vol;
    padding: 3px 0px; margin: 5px 0 0 0;
    }
.adauga-cant input:hover, .adauga-cant input:focus {border: 1px solid #999;}
.produs .adauga {
    display: inline-block; vertical-align: top;
    border: none; background: none;
    font-size: 40px; color: #777;
    margin: 0; padding: 0px 0;
    }
.produs .adauga:hover, .produs .adauga:focus {color: #333;}
.produs .adauga i {display: none;}
.produs .adauga:before {
    content: "\e8f7"; font: 40px fontello;
    margin: 0 0 0 7px;
    }
.produs .adauga.precomanda {color: green;}

.prev-gratuit {
    position: absolute; top: 240px; left: 0;
    display: inline-block; width: 110px;
    border-radius: 0 4px 4px 0;
    color: #fff; background: #555;
    text-align: left; text-transform: uppercase;
    font: 12px/12px vol;
    padding: 5px 0px 5px 35px;
    }
.prev-gratuit:before {
    position: absolute; left: 5px; top: 5px;
    content: "\f2c5"; font: 20px fontello;
    margin: 0 7px 0 0;
    }
.prev-gratuit:hover {background: #000;}

.produse .in-lucru {
    position: absolute; top: 240px; left: 0;
    display: inline-block;
    width: 110px;
    border-radius: 0 4px 4px 0;
    color: #fff;
    background: #555;
    text-align: left; text-transform: uppercase;
    font: 12px/12px vol;
    padding: 5px 0px 5px 35px;
}
.produse .in-lucru:before {
    position: absolute; left: 5px; top: 3px;
    content: "\e84a"; font: 17px fontello;
    margin: 0 7px 0 0;
    }
.produse .in-lucru:hover {background: #000;}

/* POPAP Precomanda */
.login-popup {
    display: none; z-index: 1;
    position: fixed; left: 0; top: 0;
    padding-top: 100px;
    width: 100%; height: 100%; 
    overflow: auto;
    background: rgba(0,0,0,0.5);
    }

.login-popup-content {
    background-color: #fefefe;
    margin: auto; padding: 20px;
    border: 1px solid #888; border-radius: 5px;
    width: 600px; 
    animation-name: deschide;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	transform: scale(1.0,1.0);
	}

@keyframes deschide {
    0%  {margin-top: -30px; opacity: 0;}
    100% {margin-top: 0; opacity: 1;}
    }

.close {
    color: #aaa; text-align: center;
    float: right; display: block; width: 30px; height: 30px;
    font: 40px arial;
    }
.close:hover, .close:focus {
    color: #000; text-decoration: none; cursor: pointer;
    }
.login-popup-content h2 {
    font: 26px/30px vol;
    margin: 0 0 20px 0;
    text-align: center;
    }
.login-popup-content h2 span {
    display: block;
    font: 20px/24px vol;
    }
.form-cerere {border-collapse: collapse;}
.form-cerere th {
    width: 28%;
    border-bottom: 1px solid #aaa;
    border-right: 4px solid #eee;
    font: 18px/18px vol;
    padding: 7px 0;
    text-align: left;
    }
.form-cerere tr:first-child th,
.form-cerere tr:first-child td
 {border-top: 1px solid #aaa;}
.form-cerere th em {font: 14px/14px vol;}
.form-cerere td {
    border-bottom: 1px solid #aaa;
    font: 18px/18px vol;
    padding: 5px 0;
    }
.form-cerere input[type="text"],
.form-cerere input[type="email"],
.form-cerere textarea {
    background: #fff; color: #333;
    border: none; outline: 1px solid transparent;
    font: 18px/18px vol;
    padding: 5px 10px;
    width: 100%;
    }
#code, .form-cerere img {width: 45% !important;}
.form-trimite {
    display: block; width: 100%;
    margin: 20px 0 10px 0; padding: 22px 0 18px 0;
    border: 1px solid #aaa; border-radius: 5px;
    color: #000; background:linear-gradient(#fff,#ddd);
    font: 30px/30px vol;
    text-transform: uppercase;
    cursor: pointer;
    }
.form-trimite:hover {box-shadow: inset 0 -100px 50px 0 rgba(0,0,0,0.1);}

/* DETALIU */
.detaliu {
    position: relative;
    width: 1260px; margin: 0 auto;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 170px 82%;
    }
.discount {display: none;}
.detaliu-stanga {
    grid-column: 1; grid-row: 1 / span 3;
    position: relative;
    text-align: left;
   /* border: 1px solid red;*/
    }
.detaliu-centru {
    position: relative;
    grid-column: 2; grid-row: 2;
    position: relative;
    text-align: left;
    /*height: 540px; overflow: hidden;*/
    /*box-shadow: inset 0 -55px 0 0 rgba(0,0,0,0.1);*/
    }

.mai-mult {
    position: absolute; bottom: 0;
    z-index: 100;
    }

.detaliu-dreapta {
    position: relative;
    grid-column: 2; grid-row: 1;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25% 25% 25%;
    text-align: left;
    }

.mmt {
    position: absolute; bottom: 0px; left: 0;
    display: block; width: 100%; 
    border-top: 1px solid #000;
    background: #fff;
    text-align: center;
    }
.home-dreapta .mmt {
   /* box-shadow: 0px -20px 0 0 #fff;*/
    }
.mmt span {
    display: inline-block;
    background: #000; color: #eee;
    border-radius: 0 0 3px 3px;
    padding: 7px 20px 5px 20px;
    font: 16px/16px vol;
    cursor: pointer;
    }
.mmt:hover span {background: #555;}

.detaliu-dreapta span {position: relative; }
.detaliu-dreapta span strong {font-weight: normal;}

.detaliu .autor {display: block;}
.detaliu .autor:before {
    content: "\e8be"; font: 20px fontello;
    margin: 0 10px 0 0;
    }  


#notrad {font-style: normal; padding: 0 0 0 7px;}
.detaliu .trad:before {
    content: "\e8c0"; font: 20px fontello;
    margin: 0 10px 0 0;
    }
    
.detaliu .dim {display: block;}
.detaliu .dim:before {
    content: "\e802"; font: 20px fontello;
    margin: 0 10px 0 0;
    }
.detaliu .pag {display: block;}
.detaliu .pag:before {
    content: "\f24d"; font: 20px fontello;
    margin: 0 10px 0 0;
    }
.detaliu-pret.gratuit {
    font: 25px/30px vol;
    text-transform: uppercase;
    }
.detaliu-pret.gratuit:after {
    content: "\e90e";
    font: 30px/30px fontello;
    margin: 0 0 0 15px;
    }

.detaliu-pret {display: flex; flex-wrap: wrap; justify-content: space-between;}
.detaliu-pret strong {width: 48%;}
.detaliu-pret strong:after {
    content: "PREȚ EN GROS";
    font: 12px/12px volsemibold;
    margin: 0 0 0 10px;
    }

.detaliu-pret s {
    width: 48%; text-align: right; text-decoration: none;
    color: #999;
    }
.detaliu-pret s:before {
    content: "PREȚ EN DETAIL";
    font: 12px/12px volsemibold;
    margin: 0 10px 0 0;
    }

.detaliu .in-lucru {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    background: #555;
    text-align: left; text-transform: uppercase;
    font: 12px/12px vol;
    padding: 5px 8px 5px 35px;
}
.detaliu .in-lucru:before {
    position: absolute; left: 5px; top: 3px;
    content: "\e84a"; font: 17px fontello;
    margin: 0 7px 0 0;
    }
.detaliu .in-lucru:hover {background: #000;}

.detaliu .pdf {display: block; color: #333;}
.detaliu .pdf:before {
    content: "\f1c1"; font: 20px fontello;
    margin: 0 10px 0 0;
    }
.detaliu .pdf:hover {color: #777;}

.detaliu .video {display: block; color: #333;}
.detaliu .video:before {
    content: "\f1c8"; font: 20px fontello;
    margin: 0 10px 0 0;
    }
.detaliu .video:hover {color: #777;}

.detaliu-pret {position: relative; font: 30px/30px volsemibold;}
.detaliu-pret sup {font: 14px/14px volbold;}
.detaliu-pret em {text-transform: uppercase; font: 16px/16px volsemibold;}
.detaliu-pret s {right: initial; left: 90px;}

.detaliu a img {
    width: 90%;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.04);
    }
.detaliu a:hover img {
    border-color: #000;
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    }



.inapoi {display: none;}
.descriere {
    column-count: 2; column-gap: 30px;
    text-align: justify;
    margin: 30px 0 30px 0;
    }
.detaliu-centru h2 {
    display: block; width: 100%;
    column-span: all;
    font: 30px/30px vol;
    margin: 0 0 20px 0;
    }
.detaliu-centru p {margin: 0 0 20px 0; padding: 0; text-align: justify;}
.descriere p:nth-child(2) {display: none;}
.recenzii {
    /*grid-column: 1 / span 3; grid-row: 3 ;*/
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    }
.rec {width: 48%; height: 170px; overflow: hidden; transition: all 2s;}
.rec:hover {height: inherit;}

.recenzii h2 {margin-top: 28px; width: 100%;}
.content .recenzii h3 {margin-bottom: 20px;}
.recenzii h3:before {
    content: "\e803"; font: 20px fontello;
    margin: 0 7px 0 0;
    }
.recenzii p {text-align: justify;}
.rec2 {width: 100%; column-count: 2; column-gap: 40px;}
.rec2 h3 {column-span: all;}

.detaliu-adauga-cant {
   
    }
.detaliu-adauga-cant input {
    display: inline-block; vertical-align: top; width: 50px;
    font: 16px/29px averiaserif !important;
    border: 1px solid #eee; border-radius: 4px;
    text-align: center;
    width: 28%;
    background: #fff;
    font: 20px/20px vol;
    padding: 2px 0 3px 0px; 
    }
.detaliu-adauga-cant input:hover, .detaliu-adauga-cant input:focus {border: 1px solid #999;}
.detaliu-adauga {
    display: inline-block; vertical-align: top;
    float: right;
    border: none; background: none;
    font: 20px/20px vol; color: #777;
    text-align: center; text-transform: uppercase;
    width: 70%;
    margin: 0; padding: 5px 0px;
    border: 1px solid #ccc; border-radius: 4px;
    }
.detaliu-adauga:hover, .detaliu-adauga:focus {
    background: #333; color: #fff;
    border: 1px solid #333;
    }
.detaliu-adauga:before {
    content: "\e8f7"; font: 20px fontello;
    margin: 0 8px 0 0;
    }
.detaliu-adauga.precomanda {float: left; color: green; border-color: green;}
.detaliu-adauga.precomanda:hover,
.detaliu-adauga.precomanda:focus
 {color: #fff; background: green;}

.cod em {font-style: normal; margin: 0 7px 0 0;}

/* POPAP video */
.video-pop {
    display: none; z-index: 1;
    position: fixed; left: 0; top: 0;
    padding-top: 100px;
    width: 100%; height: 100%; 
    overflow: auto;
    background: rgba(0,0,0,0.5);
    }

.video-pop-content {
    background-color: #fefefe;
    margin: auto; padding: 20px;
    border: 1px solid #888; border-radius: 5px;
    width: 840px; 
    animation-name: deschide;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	transform: scale(1.0,1.0);
	}

.closevideo {
    color: #aaa; text-align: center;
    float: right; display: block; width: 30px; height: 30px;
    font: 40px arial;
    }
.video-pop iframe {width: 800px; height: 450px; margin: 20px 0 0 0;}
/* end detaliu */


.anunt-cookie {
	position: fixed; bottom: 0px; left: 0; 
	width: 100%; z-index: 100;
	box-sizing: border-box;
	padding: 20px 40px 10px 40px;
	background: #ffc107; color: #000;
	font-size: 14px; letter-spacing: -0.3px;
	text-align: left;
	box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.4);
	}

.anunt-cookie p {font-size: 14px; line-height: 18px; margin: 0 0 12px 0; padding: 0 140px 0 0;}
.anunt-cookie p a {color: #000; border-bottom: 1px solid #000;}
.anunt-cookie p a:hover {opacity: 0.8;}
.anunt-cookie button {
	position: absolute; top: 10px; right: 40px;
	background: #000; color: #fff;
	text-align: center; box-sizing: border-box;
	border: none; border-radius: 3px;
	font: 16px vol; line-height: 16px; letter-spacing: -0.5px;
	cursor: pointer;
	padding: 5px 20px;
	transition: all 0.5s;
	}
.anunt-cookie button:hover {opacity: 0.8;}

.bottom-proiecte {
    display: flex; width: 1260px; margin: 30px auto 0 auto;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #aaa;
    padding: 20px 0 0 0;
    }
.bottom-proiecte a {display: block; opacity: 0.6;}
.bottom-proiecte a:hover {opacity: 1;}

.bottom-proiecte a:nth-child(1) {width: 8%;}
.bottom-proiecte a:nth-child(2) {width: 12%;}
.bottom-proiecte a:nth-child(3) {width: 12%;} /* rand */
.bottom-proiecte a:nth-child(4) {width: 9%;} /* advh */
.bottom-proiecte a:nth-child(5) {width: 18%;} /* sf */
.bottom-proiecte a:nth-child(6) {width: 13%;}
.bottom-proiecte a img {width: 100%;}

.bottom {
    position: relative;
    width: 1260px; margin: 30px auto 0 auto; padding: 20px 0 0px 0;
    border-top: 2px dashed #999;
    }
.bottom-menu {float: left; width: 48%;}
.bottom-menu li {
    display: inline-block; vertical-align: top;
    width: 48%;
    }
.bottom-menu li a {
    display: block;
    color: #333;
    }

.newsletter {
	position: absolute; top: 15px; right: 250px;
	width: 420px; text-align: left;
	color: #999;
	text-transform: uppercase;
	}
.newsletter h2 {
	display: block;
	color: #555; font: 20px volsemibold;
	}
.newsletter form {
    border: 1px solid #333; border-radius: 3px;
    overflow: hidden;
    }
.newsletter input[type="text"] {
	border: none;
	font: 16px volsemibold; line-height: 16px; color: #000;
	background: #fff;
	padding: 7px 12px; margin: 0;
	width: 64.5%;
    box-shadow: inset 0px 26px 10px -20px rgba(0,0,0,0.15);
    outline: 1px solid transparent;
	}
.newsletter button {
    border: none; float: right;
	font: 16px volsemibold; line-height: 16px; color: #fff;
	background: #333;
	padding: 11px 0px; margin: 0;
	text-transform: uppercase;
	width: 35%;
	cursor: pointer;
	}
.newsletter button:hover {opacity: 0.7;}

.bottom-contact {float: right; width: 48%; text-align: right;}
.bottom-contact a {display: block; color: #333;}



.copy {
    float: none; clear: both; text-align: center;
    margin: 30px auto 50px auto;
    opacity: 0.6;
    font: 16px/20px vol;
    }
.copy a {color: #333;}



.topmenu-contact, .breadcrumb, .cos-mob, #mobil-menu {display: none;}