aside, footer, header, nav, section 
	{ 
	display: block;
	}
	
body 
	{	
	font-family: Calibri, "Trebuchet MS", sans-serif;
	font-size: 1em;
	background-color: #e5f2f9;	
	}
	
a 
	{
    text-decoration: none;
	}

#main 
	{
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
	background-color: #fff;
	padding-top: 1%;
	border-top: solid 5px #c0d730;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);	
	background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
	}

header 
	{
	width: 100%;
	height: 75px;
	position: relative;	
	margin-bottom: 2%;	
	}

#logo
	{
	position: absolute;
	top: 5%;
	left: 5%;
	}
	
#lang-phone
	{
	float: right;
	margin: 0 130px 0 0;	
	}
	
#languages
	{
	visibility: hidden;
	}
	
#languages, #phone
	{
	float: right;
	}
	
#languages img
	{
	margin-left: 5px;
	}
	
#satisfaction
	{
	position: absolute;
	right: 1%;
	bottom: 0;
	}
	
#social
	{
	position: absolute;
	right: 120px;
	bottom: 0;
	}
	
#social img
	{
	width: 90%;
    height: auto;
    max-height: 90%;
	}

#phone
	{
	width: 90%;
	max-width: 215px;
	font-size: 1.7em;
	font-weight: bold;
	font-style: italic;
	line-height: 100%;
	color: #027dc3;
	text-align: right;
	}

#phone img
	{
	float: left;	
	}
	
#image-home img
	{
	border-bottom: solid 5px #c0d730;
	width: 100%;
	}
	
aside
	{
	width: 31%;
	float: left;
	margin: 1%;
	}

aside img
	{
	width: 100%;
	height: auto;
	}
	
aside a
	{
	text-decoration: none;
	}

#content
	{
	width: 66%;
	float: right;
	margin: 1% 1% 1% 0;
	}
	
#content img
	{
	width: 100%;
	height: auto;
	}
	
#content p 
	{
	font-size: 1.2em;
	padding: 0 2%;
	}

#content ul
	{
	list-style-image: url("../images/bifat.png");
	font-size: 1.2em;	
	line-height: 2em; 
	margin: 3% 0 0 3%;
	}

#companie
	{
	width: 65%;
	float: right;
	margin: 1% 1% 1% 0;
	font-size: 1.2em;
	}
	
#servicii
	{
	width: 65%;
	float: right;
	margin: 1% 1% 1% 0;
	font-size: 1.2em;
	line-height: 2em; 
	}
	
#servicii ul
	{
	list-style-image: url("../images/bifat.png");
	line-height: 2em;
	margin-top: 0;
	}
	
#produse
	{
	width: 65%;
	float: right;
	margin: 1% 1% 1% 0;
	font-size: 1.2em;	
	}
	
#produse ul
	{
	list-style-image: url("../images/bifat.png");
	line-height: 1.5em;
	margin-top: 0;
	}

.produs 
	{
	width: 100%;
	overflow: auto;
	padding-bottom: 2%;
	margin-bottom: 2%;
	border-bottom: solid 1px #c0d72f;
	}

.poza-produs 
	{
	width: 16%;
	float: left;
	padding: 2%;
	border: solid 1px #027dc3;
	}

.poza-produs img
	{
	width: 100%;
	}

.text-produs 
	{
	width: 77%;
	float: left;	
	padding-left: 2%;
	}
	
#companie p:first-letter 
	{
	font-size: 1.3em;
	font-weight: bold;
	color: #027dc3;
	}

#galerie 
	{
	width: 63%;
	float: right;
	margin: 1% 1% 1% 0;
	padding-left: 2%;
	border-left: solid 1px #027dc3;
	}
	
#galerie ul li 
	{
	list-style: none;
	}

#symbols
	{
	width: 67%;
	float: right;
	margin-bottom: 1%;
	text-align: center;
	}

#symbols ul
	{
	margin: 0;
	padding: 0;
	}
	
#symbols ul li 
	{
	list-style: none;
	display: inline-block;	
	}
	
#gmap
	{
	width: 65%;
	float: right;
	margin-right: 1%;
	margin-bottom: 1%;
	text-align: center;
	}

footer
	{
	width: 98%;
	clear: both;
	padding: 1%;
	border-top: solid 1px gray;
	font-size: 1em;	
	color: grey;
	text-align: center;
	}
	
h1
	{
	font-size: 1.7em;
	color: #027dc3;
	margin: 2%;
	}	
	
#pagini 
	{
	width: 97%;
	float: right;
	margin: 1% 1% 1% 0;
	font-size: 1em;
	text-align: center;
	}	
	
	
ul.pagini 
	{
    display: inline-block;
    padding: 0;
    margin: 0;
	}

ul.pagini li 
	{
	display: inline;
	}

ul.pagini li a 
	{
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
	}

ul.pagini li a.active 
	{
    background-color: #027dc3;
    color: #fff;
	}

ul.pagini li a:hover:not(.active) 
	{
	color: #fff; background-color: #c0d72f;
	}
	
/* ------------------------------------------------ MENIURI */
nav 
	{
	position: relative;
	width: 100%;	
	text-align: left;
	background: #a3bd00;
	background: linear-gradient(#bfd730, #a3bd00);	
	}

.horizontal-menu, .horizontal-menu-active
	{
	display: inline-block;
	margin: 0;
	}
	
.horizontal-menu
	{
	cursor: pointer;
	padding: 0.7% 5%;
	display: inline-block;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #a3bd00;
	background: linear-gradient(#bfd730, #a3bd00);
	border-bottom: solid #a3bd00;	
	}

.horizontal-menu-active
	{
	cursor: pointer;
	padding: 0.7% 5%;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #242424;
	background: linear-gradient(#535353, #242424);
	border-bottom: solid #a3bd00;	
	}
	
.horizontal-menu:hover
	{
	background: #242424;
	background: linear-gradient(#535353, #242424);
	}	
	
.servicii-a
	{
	cursor: pointer;
	padding: 10px;
	border: solid 1px #c0d72f;
	border-left: solid 5px #c0d72f;
	background-color: #f9fbea;
	overflow: auto;
	margin-bottom: 3%;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 145%;
	color: #aac30c;
	}
	
.servicii-b
	{
	cursor: pointer;
	padding: 10px;
	border: solid 1px #027dc3;
	border-left: solid 5px #027dc3;
	background-color: #e5f2f9;
	overflow: auto;
	margin-bottom: 3%;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 145%;
	color: #027dc3;
	}
	
.servicii-a:hover
	{	
	background-color: #c0d72f;
	color: #fff;	
	}

.servicii-b:hover
	{	
	background-color: #027dc3;
	color: #fff;	
	}
	
.servicii-a img, .servicii-b img
	{
	max-width: 200px;
	height: auto;
	width: auto;
	float: left;
	margin-right: 3%;
	}
	
/* ------------------------------------------------ GALERIE */
.imagini
	{	
	margin: 0;
	padding: 0;
	}

.imagini li
	{
	float: left;
	margin: 0 2% 2% 0;
	position: relative;
	}
	
.imagini li > a,
.imagini li > a img
	{
	display: block;
	border: none;
	}
	
.imagini li > a
	{	
	position: relative;
	padding: 10px;
	background: #f9fbea;
	border: solid 1px #c0d72f;
	}

.imagini li > a span
	{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
	background: rgba(210,240,255,0.5);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%, rgba(210,240,255,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(210,240,255,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	}
	
.imagini li > a span img
	{
	margin: 35% auto;
	}

.imagini li > a:hover span
	{
	opacity: 1;
	filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
	}

.imagine-overlay
	{
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background: rgb(210,240,255);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%, rgba(210,240,255,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(210,240,255,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(210,240,255,1) 100%);
	}

.imagine-overlay a.lb-close
	{
	background: #027dc3;
	z-index: 1001;
	color: #fff;
	position: absolute;
	top: 43px;
	left: 50%;
	font-size: 15px;
	line-height: 26px;
	text-align: center;
	padding: 5px;
	width: 50px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 0;
	filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s linear 1.2s;
	-moz-transition: opacity 0.3s linear 1.2s;
	-o-transition: opacity 0.3s linear 1.2s;
	-ms-transition: opacity 0.3s linear 1.2s;
	transition: opacity 0.3s linear 1.2s;
	}

.imagine-overlay img
	{	
	max-width: 95%;
	max-height: 95%;
	position: relative;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	}

.imagine-overlay:target 
	{
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	bottom: 0px;
	right: 0px;
	padding-top: 80px;
	}

.imagine-overlay:target img 
	{
	-webkit-animation: fadeInScale 1.2s ease-in-out;
	-moz-animation: fadeInScale 1.2s ease-in-out;
	-o-animation: fadeInScale 1.2s ease-in-out;
	-ms-animation: fadeInScale 1.2s ease-in-out;
	animation: fadeInScale 1.2s ease-in-out;
	}

.imagine-overlay:target a.lb-close,
.imagine-overlay:target > div
	{
	opacity: 1;
	filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
	}

@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}

@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}

@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}

@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

x:-o-prefocus, .imagine-overlay img {
    height: 100%;
}

/* ..............................................................................................................................................Media Queries */
@media screen and (max-width: 1300px) {
	.servicii-a, .servicii-b {width: 335px;display: inline-block;margin: 10px;text-align: left;}
	.imagini li {float: none;display: inline-block;}	
	#companie, #produse {padding: 0 1%;width: calc(91% - 335px);}
	#content, #symbols, #servicii, #gmap {width: calc(92% - 335px);}	
	#galerie {width: calc(90% - 335px);text-align: center;}	
	}
	
@media screen and (max-width: 1000px) {
	#phone {width: 85%; font-size: 1.5em;}
	}

@media screen and (max-width: 900px) {	
	aside {float: none; width: 98%; overflow: auto; text-align: center;}	
	#content, #companie, #servicii, #produse, #galerie {clear: left;}	
	#companie, #produse, .produs, #galerie {float: none; width: 98%;}	
	#gmap, #servicii {float: none; width: 98%; margin-left: 1%;}	
	#content, #symbols {float: none; width: 100%;}
	}

@media screen and (max-width: 880px) {
	#social {display: none;}
	}

@media screen and (max-width: 800px) {
	#satisfaction {display: none;}
	#lang-phone {margin-right: 2%;}
	#logo img {width: 90%;}
	}

@media screen and (max-width: 700px) {
	#satisfaction {display: none;}
	#lang-phone {margin-right: 2%;}
	#logo img {width: 90%;}	
	}

@media screen and (max-width: 540px) {
	.horizontal-menu, .horizontal-menu-active
	{display: block; text-align: center; border: 0; padding-top: 2%; padding-bottom: 2%;}	
	}

@media screen and (max-width: 500px) {
	#logo img {width: 60%;}	
	#phone {font-size: 1.3em;}
	#phone img {display: none;}	
	.servicii-a, .servicii-b {width: 75%;text-align: center;}	
	.servicii-a img, .servicii-b img {width: 100%; float: none;}
	}