/*styles*/

@font-face {
	font-family: agency;
	src: url('fonts/AGENCYB.eot');
	src: local('☺'), url('fonts/AGENCYB.ttf') format('truetype'), url('fonts/AGENCYB.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: menu;
	src: url('fonts/DIN-Medium.eot');
	src: local('☺'), url('fonts/DIN-Medium.ttf') format('truetype'), url('fonts/DIN-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face { 
	font-family: footer; 
	src: url('fonts/LDS_DRUMMON.eot'); 
	src: local('lds-drummom'), url('fonts/LDS_DRUMMON.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


html,body{
	height:100%;
}

header{
	position:relative;
	width:100%;
	padding-top:40px;
	z-index:1;	
}

header > a{
	text-decoration:none;
}

header img#logo{
	position:relative;
	width:146px;
	height:123px;
	margin-left:30px;
	border:5px solid #fff;
	z-index:1;
}

header img#logo-active{
	position:relative;
	margin-left:30px;
	border:5px solid #df2c2c;
	z-index:1;
}

body{
	background-color: #383838;
	font-family: verdana;
	overflow-x:hidden;
}

div.container{
	width:960px;	
	/*min-height:813px;
	height:100%;*/
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow-x:hidden;		
	margin:0 auto -55px;
	background:url('images/pattern.png');
	background-color:#2e2e2e;
	box-shadow:0px 0px 25px #000;
}

section.content{
	position: relative;
	width:900px;
	height:100%;
	margin-top:80px;
	padding-bottom:50px;
	padding-left:30px;
	padding-right:30px;
}

.push{
	
	height:55px;
	clear:both;
}





/*grid styles*/

.grid {
	clear:both;
	width:100%;
}

.grid .item{ 
	position:relative;
	width:200px; 
	float:left;
	margin-left:5px;
	margin-top:5px;
}

.grid .item img { 
	width:200px; 
	height:auto;
	border:1px solid #666;
}










/*footer*/

footer{
	height:55px;
	margin-bottom:-55px;
}

footer section {
	position: relative;
	width:960px;
	margin:0 auto;
	height:55px;
	color:#fff;
	z-index:2;
	font-size:15px;
	font-family:arial;
}

footer section p{
	position: relative;
	text-align:center;
	bottom:-30px;
}

div#footer-strip{
	position: relative;
	width:100%;
	height:55px;
	left:0px;
	
	background-color:#51819f;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);
	color: #fff;
	z-index:1;
}








/*menu*/

header nav ul {
	position:relative;
	width:772px;	
	margin-top:-105px;
	padding-left:188px;
	padding-top:16px;
	padding-bottom:12px;
}

div#whitestrip{
	position: relative;
	height:44px;
	width:100%;
	z-index:-1;
	margin-top:-44px;
	background-color:#fff;
	opacity: 0.2;
	-moz-opacity: 0.2;
	filter:alpha(opacity=20);
}

header nav ul li{
	display:inline;
	font-size:18px;
	line-height:23.32px;
	font-family:menu;
	margin-left:15px;
}

header nav ul li.first{
	margin-left:10px;
}

header nav ul li a:hover{
	color:#fff;
}

header nav ul li a{
	text-decoration:none;
	color:#5490b8;
}

header img#logo.active-menu{
	border-color:#000;
}

.active-menu a{
	color:#fff;
}

div#bluestrip{
	position:absolute;
	width:100%;
	height:37px;
	margin-top:0px;
	left:0;
	z-index:0;
	background-color:#138ad6;	
}
div#orangebar{
	position: relative;
	top:0;
	left:255px;
	background-color:#000;/*#df2c2c;*/
	height:12px;
	width:50px;
}











/*content index*/

div#container-poze{
	width:900px;
	/*height:394px;*/
	height:450px;
}

div#container-poze div img{
	position: relative;
	z-index:2;
}

div#container-poze div > span{
	position:absolute;
	background-color:#fff;
	padding:5px;
	z-index:1;
}

div#container-poze div > a, div#container-poze div > span a{
	text-decoration:none;
	color: #616161;
}

div#container-poze div#grafica,div#container-poze div#productie,div#container-poze div#despre,div#container-poze div#locatii,div#container-poze div#webdesign{
	position:relative;
	float:left;
}

div#container-poze div#locatii{		
	margin-top:-2px;
	width:425px;
}

div#container-poze div#webdesign{	
	margin-top:-3px;
}

div#container-poze div#grafica span{
	bottom:5px;
	left:0px;
	width:265px;
	border-radius:0px 0px 5px 5px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	text-align:center;
}

div#container-poze div#locatii span{
	bottom:5px;
	left:0px;
	width:417px;
	border-radius:0px 0px 5px 5px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	text-align:center;
}

div#container-poze div#productie span{
	top:2px;
	left:0px;
	width:335px;
	border-radius:5px 5px 0px 0px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	text-align:center;
}

div#container-poze div#despre span{
	top:0px;
	right:0px;
	width:24px;
	height:178px;
	border-radius:0px 5px 5px 0px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	text-align:center;
}









div#container-poze div#despre img{
	width:277px;
	height:189px;
}
div#container-poze div#productie img{
	width:348px;
	height:189px;
}
div#container-poze div#locatii img{
	width:428px;
	height:205px;
}
div#container-poze div#grafica img{
	width:274px;
	height:394px;
}
div#container-poze div#webdesign img{
	width:200px;
	height:206px;
}














/*open-page styles*/

ul#submenu{
	width:700px;
	margin:0 auto;
	height:30px;
}

ul#submenu li{
	position:relative;
	font-family:agency;
	font-size:24px;
	float:left;
	width:33.33%;
	text-align:center;
	color:#c5c5c5;
	cursor:pointer;
}

ul#submenu li.active-submenu{
	color:#fff;
}

div#arrow{
	clear:both;
	position: relative;
	margin-top:5px;
	width:36px;
	height:28px;
	background:url('images/arrowup.png') no-repeat;
}

div.container-content{
	position:relative;
	width:94%;
	padding:3%;
	height:auto;
	overflow: hidden;
	margin-bottom:50px;
	background:url('images/transparent-bk.png') repeat;
}

.tab{
	position:relative;
	width:98%;
	height:auto;
	line-height:150%;
	font-size:14px;
	margin:0 auto;	
	color:#fff;
	background:transparent;
	display: none;
}

.tab ul{
	margin-bottom:10px;
	list-style-type:square;
	margin-left:40px;
}

.tab p{
	margin-bottom:10px;
}

.tab p span{
	font-size:20px;
	font-weight:bold;
}

.tab article{
	margin-bottom:40px;
}

.active-tab{
	display: block;
}

section.galerie-poze{
	margin-top:20px;
	margin:0 auto;
}





/*productie styles*/

section#productie ul#submenu li{
	width:175px;
	text-align:center;
}


/*locatii styles*/
section#locatii ul#submenu li{
	width:700px;
	text-align:center;
}









/*contact box*/
div#contact{
	position: absolute;
	display: none;
	left: 100%;
	margin-top: 50px;
	/*height: 430px;
	width: 620px;*/
	width:0px;
	height:0px;
	overflow: hidden;
	background-color: #fff;
	z-index: 5;	
}

div#contact-btn{
	position: absolute;
	background-color: white;
	width: 13px;
	height: 138px;
	text-align: center;
	padding:10px;
	font-size:20px;
	margin-top: 50px;
	right: 0;
	border-radius: 5px 0px 0px 5px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	cursor: pointer;
	z-index: 5;
}

/*
div#contact div#contact-btn{
	position:relative;
	height:138px;
	width:auto;
	left:0;
	top:0;
	margin-left:-29px;
	float:left;
	padding:10px;
	background-color:#fff;
	font-size:20px;
	border-radius:5px 0px 0px 5px;
	behavior: url('js/PIE-1.0.0/PIE.php');
	text-align:center;
	cursor:pointer;
}*/

div#contact section#contact-form{
	position: relative;
	float: left;
	height:auto;
	width:250px;
	padding:10px;	
	font-size:12px;
}

div#contact section#contact-form input[type='text']{
	width:250px;
	margin-bottom:10px;
	padding:5px;
	background-color:#f0f0f0;
	font-style:italic;
	border:0;
}

div#contact section#contact-form textarea{
	width:250px;
	height:120px;
	padding:5px;
	margin-bottom:10px;
	font-style:italic;
	border:0;
	background-color:#f0f0f0;
}

div#contact section#contact-form button{
	width:100px;
	height:23px;
	border:0;
	float:right;
	color:#4f4f4f;
	font-style:italic;
	background:url('images/button-bk.png') no-repeat;
	margin-bottom:30px;

}

div#contact section#contact-form form p{
	clear:both;
	margin-bottom:10px;
	text-align: center;
	color: #666;
	font-style: italic;
}

div#contact section#map{
	position: relative;
	float:left;
	width:325px;
	height:auto;
	padding:10px;
}

div#contact section#map section#address{
	margin-top: 10px;
	color: #666;
	font-style: italic;
	font-size: 12px;
	line-height:140%;
}

div#contact section#map section#address p{
	margin-bottom:10px;
}














@media only screen and (max-width: 1200px) {	
	
	div#contact{display: block}

	header nav ul li{
		font-size:15px;
	}

	

	div#container-poze{
		width:860px;	
		height:450px;
	}




	div#container-poze div#locatii{	
		width:auto;
	}

	div#container-poze div#webdesign{	
		margin-top:-2px;
	}
	


	div#container-poze div#grafica span{		
		width:238px;		
	}

	div#container-poze div#locatii span{		
		width:370px;
	}

	div#container-poze div#productie span{		
		width:309px;
	}

	div#container-poze div#despre span{
		width:20px;
		height:auto;		
	}

	


	div#container-poze div#despre img{
		width:257px;
		height:auto;	
	}
	
	div#container-poze div#productie img{
		width:322px;
		height:auto;
	}
	
	div#container-poze div#locatii img{
		width:378px;
		height:auto;
	}
	
	div#container-poze div#grafica img{
		width:248px;
		height:auto;
	}
	
	div#container-poze div#webdesign img{
		width:201px;
		height:182px;
	}

}


@media only screen and (max-device-width: 480px) {
	div#contact{display: block}

	header nav ul li{
		font-size:12px;
	}

	

	div#container-poze{
		width:860px;	
		height:450px;
	}




	div#container-poze div#locatii{	
		width:auto;
	}

	div#container-poze div#webdesign{	
		margin-top:-2px;
	}
	


	div#container-poze div#grafica span{		
		width:238px;		
	}

	div#container-poze div#locatii span{		
		width:370px;
	}

	div#container-poze div#productie span{		
		width:309px;
	}

	div#container-poze div#despre span{
		width:20px;
		height:auto;		
	}

	


	div#container-poze div#despre img{
		width:257px;
		height:auto;	
	}
	
	div#container-poze div#productie img{
		width:322px;
		height:auto;
	}
	
	div#container-poze div#locatii img{
		width:378px;
		height:auto;
	}
	
	div#container-poze div#grafica img{
		width:248px;
		height:auto;
	}
	
	div#container-poze div#webdesign img{
		width:201px;
		height:182px;
	}		
}