body { 
    margin:0; 
    padding:0;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif
}
/* --------------------------------------------------------------------- GENERALITATI ---------------------- */

#wrapper { 
    width:100%;
    max-width:1000px;
    margin:auto
}
#header{
    width:100%; 
    position:relative;
    height: 20%  
}
#meniu{
    height:40px;
    background: #4d9ceb
}
#content{ 
	position: relative;
	z-index: 10;
    margin: auto
}
#footer{ 
    width:100%;
    height: 10%;
    min-height: 80px;
    clear: both;
	background: #4d9ceb;
    position:relative
}
ul {list-style:none}
a {text-decoration:none}
#text {text-align:justify}
h1, h2 {text-transform: uppercase; font-size:16px}
h1 {margin-left:20px}
aside h1 {margin:0}
.divisions > p > a {color:#4d9ceb}
#text > p > strong, .divisions > p > strong, #auto > p > strong, #boats > p > strong, #horeca > p > strong, #office > p > strong, #residential > p > strong {font-weight:normal}

/* ---------------------------------------------------------------------------- LOGO ------------------- */
#header [src*="images/logo.jpg"] { 
    width:18%;
    heght: auto;
    margin: 20px
}
[src*="images/en.jpg"], [src*="images/es.jpg"] {width:3%; float:right; margin:1px}
#tel{float:right; margin-right:10px}

/* ---------------------------------------------------------------------- MENIUL ORIZONTAL ------------- */
#meniu ul {
	list-style-type: none;
	padding:0;
	margin: 0;
	float: right;
    background: #4d9ceb;
}
#meniu ul li {
    width: 120px;
	height: 40px;
    background: #4d9ceb;
	border-right:1px solid rgba(0,0,0,0.2);
	float:left;
	text-align: center;
	transition: all .5s;
}
#meniu ul li:last-child {
	border: none;
}
#meniu ul li a {
	text-decoration: none;
	color:#fff;
    line-height:40px;
	font-size: 15px;
    font-weight:bold;
	text-transform: uppercase;
	font-family: 'Trebuchet MS';
	display: block;
	transition: all .5s;
}
#meniu ul li:hover a {
    color:#626365;
}

/* -------------------------------------------------------------------------- SUB-MENIU ----------------- */
#meniu ul li ul {
	margin:0;
	position: relative;
	z-index: 830;
    background: #4d9ceb;
}
#meniu ul li ul li {
	border-radius: 0;
    background: #4d9ceb;
}
#meniu ul li ul li:last-child {
	border-radius: 0 0 10px 10px;
}
#meniu ul li:hover ul li a {
	color:#fff;
}
#meniu ul li ul li:hover a {
	color: #626365;
}

/* ------------------------------------------------------------------ MAGIA CU MENIUL -------------------- */
#meniu ul li ul {
	height:0px;
	overflow:hidden;
	transition: all 0.5s;
}
#meniu ul li:hover ul {
	height:500%;	
}

/* ---------------------------------------------------------------------------- FOOTER ------------------- */
#footer {
	text-align: center;
	padding-top: 20px;
}
#footer a {
	text-decoration: none;
	color: #fff;
	font-size:18px;
	font-family: 'Trebuchet MS';
	border-right: 1px solid #626365;
	padding: 0 10px;
}
#footer a:last-child {
	border: none;
}
#footer a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------- HARTA SI FORMULAR --------------- */
#harta {float:left; width: 46%; margin:2% 0 2% 2%}		
aside {float:left; margin:2% 0px 2% 2%; height:auto; width:46%}	
aside h1 {text-transform: uppercase; font-size:16px}
#contactdata {margin-top:4%}
#contactdata li {font-family: 'Trebuchet MS'; padding-left:10%; background-size:7% auto; height:24px; line-height:24px;margin-top:5px; width:90%}

.address {background:url('images/home.png') top left no-repeat; }
.telephone {background:url('images/telephone.png') top left no-repeat;}
.email {background:url('images/email.png') top left no-repeat;}

#contactform {margin-top:20px;}

input[name=nume], input[name=email], textarea {
border:none;
width:100%;
height:30px;
margin-bottom:10px; 
color:#000;
padding-left:10px;
font-size:20px;
}
.inputholder {
	position: relative;
	border-bottom:1px solid #ccc;
    display:block;
}
#contactform textarea {height: 60px; width:99%; padding-top:20px;}

#contactform button[name=submit] {
	border:none;
	width:150px;
	height:30px;
	background: transparent;
	position:relative;
	float:right;
	text-align:center;
	line-height:30px; 
	padding:0;	
	letter-spacing:0;
}
#innerstyle {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	border:1px solid #ccc;
	z-index:1;
	width: 148px;
	height: 28px;	
}
#tl, #tr, #br, #bl, #ib {
	position:absolute;
	width:1px;
	height:1px;
	background: black;
	z-index:7;
	opacity:0;
	transition:all 0.5s;	
}
#ib {bottom:-1px;left:0;}
#tl {top:0;left:0;}
#tr {top:0;right:0;}
#br {bottom:0;right:0;}
#bl {bottom:0;left:0;}
#contactform button[name=submit]:hover { letter-spacing:2px; color:#667; }
#contactform button[name=submit]:hover #tl,
#contactform button[name=submit]:hover #br { width:100%;opacity:1;}
#contactform button[name=submit]:hover #tr,
#contactform button[name=submit]:hover #bl { height:100%;opacity:1;}
.inputholder:hover #ib { width:100%;opacity:1;}

#contactform input:hover, #contactform textarea:hover {
	letter-spacing:2px;
	transition:all 0.2s;
}
input[name=nume]:focus, input[name=email]:focus, textarea:focus {
	outline:none;
}
::-webkit-input-placeholder {
   color: #000;
}
:-moz-placeholder { /* Firefox 18- */
   color: #000;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #000;  
}
:-ms-input-placeholder {  
   color: #000;  
}

/* ------------------------------------------------------------------------------------- CAROUSEL ------------ */
.carousel {width:100%; position:relative}
.clearfix {clear:both}

/* ------------------------------------------------------------------------------------ PORTOFOLIO ---------- */
#content-portofolio img {width:16.65%; height:auto; padding:0 1.49%}
#content-portofolio h1{text-transform: uppercase; font-size:16px; margin-left:20px}
#content-portofolio p {text-align:justify} 
 
/* ------------------------------------------------------------------------------------- DIVISIONS ---------- */
.divisions {width:100%; height:auto; float:left}
.divisions img {width:30%; height:auto; float:left; margin-right:5%; margin-bottom:3%}
.divisions p, article h2 {width:65%; height:auto; float:left; display:block}
.divisions p {text-align:justify}
#boats img, #auto img, #horeca img, #residential img, #office img {width:60%; padding:0 20%}
#boats p, #auto p, #horeca p, #residential p, #office p {text-align:justify}
#boats li, #auto li, #residential li, #office li {list-style-type:disc; margin-left:20px}

/* ------------------------------------------------------------------------------------- MOBIL -------------- */ 
#mobil, [for=bifa], [type=checkbox]{
    display: none
}
@media screen and (max-width:1000px){
    #meniu, #mobil, [type=checkbox] { display: none}
    
    
input:checked + #mobil, [for=bifa] {display: block} 
[src*="images/en.jpg"], [src*="images/es.jpg"]  {width:6%; margin:2% 1% 0 0}
[src*="images/en.jpg"] {margin-right:3%}
[for=bifa]{
    margin: 10% 85.5%;
    position: absolute;
}      
#image, #text { 
    float:none;
    width:100%;
}
#header [src*="images/logo.jpg"] { 
    float: left;
    padding-left: 2px;
    min-width:30%;
} 
#tel{display:none}
#mobil {padding: 70px 0 0 0}
#mobil ul{padding:0; margin:0}
#mobil ul li {
    width: 100%;
	height: 30px;
    background: #4d9ceb;
    border-bottom:1px solid rgba(0,0,0,0.2);
	transition: all .5s;
}
#mobil ul li:last-child { 
    border:none;
}
#mobil ul li a {
    text-align: center;
	text-decoration: none;
	color:#fff;
    line-height:30px;
	font-size: 12px;
    font-weight:bold;
	text-transform: uppercase;
	font-family: 'Trebuchet MS';
	display: block;
	transition: all .5s
}
#mobil ul li:hover a {color:#626365}
#mobil li:first-child{clear:both}
#footer a:first-child,#footer a:nth-child(2),#footer a:nth-child(3) {display:none}
 {padding:0 1%}  
#content-portofolio img {width:16.65%; height:auto; padding:0 1%}
#gmap_canvas, #harta, #harta > div	{width:100%!important; margin:0}

.divisions img {display:none}
.divisions h2 {width:93%; padding-left:10px; padding-right:10px; border-bottom:2px solid #4d9ceb}
.divisions p {width:93%; margin-top:1%}

#boats h2, #auto h2, #horeca h2, #residential h2, #office h2 {width:93%; padding-left:10px}
#boats img, #auto img, #horeca img, #residential img, #office img {width:60%; padding:0 20%}
#boats ul li, #office ul li, #residential ul li {  }
#text, p {padding:0 1%}
#boats p, #auto p, #horeca p, #residential p, #office p, #content-divisions .class > p, #content-portofolio {padding:0 3%}
#contactdata {padding:0; margin:0}
#contactdata [class="address"], #contactdata [class="telephone"], #contactdata [class="email"] {width:90%; padding-left:8%; margin:0; font-size:15px
}
#contactform {margin-top:10px; width:100%}
aside {width:93%; margin:3%}
aside h1 {margin-top:6%}
#header{border-bottom: #4d9ceb solid 1px}
#tel {display:block; width:90%}
#wrapper {font-size:13px}
}