/* IMPORT OTHER CSS
========================================================================== */
  @import url('css/reset.css');
  @import url('webfont/style.css');
  
/* BASE STYLES
========================================================================== */
  html {font-size: 16px;}
  body {font-family: 'Montserrat Medium', sans-serif, Arial; font-size: 16px; line-height: 1.5; color: #fff; -webkit-font-smoothing: subpixel-antialiased !important;} 
  p {font-size: 1em; line-height: 1.5; clear: both; display: block; width: 100%; box-sizing: border-box;}
  p.information {color: #121212;}
  p.information.last {padding-bottom: 60px;}
  a {color: #fff; text-decoration: none; cursor: pointer; transition: color 0.3s ease;}
  a.blue {font-family: 'Montserrat Bold', sans-serif, Arial; color: #01567C;}
  a:hover,a:focus {color: #f3c213;}
  a.blue:hover,a:focus {color: #121212;}
  img {margin: 0; padding: 0; border: 0; width: 100%; height: auto; display: block;}
  
/* BASE HEADINGS                                          
========================================================================== */  
  h1, h2, h3, h4 {text-align: center; font-family: 'Montserrat Bold', sans-serif, Arial; margin: 1em 0; line-height: 1.2; color: #fff;}
  h1 {font-size: 2.5rem;}
  h1.information {padding: 80px 0px 10px 0px; color: #0b0b0b;}
  h2 {padding-top: 230px; font-size: 2rem;}
  h2.blue {color: #01567c;}
  h2.information {margin: 0.5em 0; padding: 35px 0px 0px 0px; color: #0b0b0b; text-align: left;}
  h2.contacts {}
  h3 {margin: 1em 0 0.5em 0; font-size: 1.5rem; color: #01567c;}
  h3.information {padding: 10px 0px 0px 0px; color: #0b0b0b; text-align: left;}
  h4 {font-size: 1.5rem;}  
  
/* BASE LAYOUT
========================================================================== */  
  .container {margin:0 auto; padding:0; border: 0; width: 1320px; height: auto; position: relative;}  
  
/* BASE CLEAR
========================================================================== */  
  .clearfix:after {clear:both; content:""; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0;}  
  
/* NAVIGATION MENU
========================================================================== */
  .nav-bar {position: relative; width:100%; height:140px; z-index:1000; background-color:rgba(1, 86, 124, 0.5)}
  .menu-horizontal {width:1320px; position:relative; height:140px; margin:0 auto;}
  .menu-horizontal #logo {margin: 35px 25px 35px 0px; width:262px; height:70px; background: url('images/logo-tre-mari-immobiliare.png') no-repeat 0 0; float:left;}
  .menu-horizontal .flag {margin: 54px 0px; width: 32px; height: 32px; float: right;}
  .menu-horizontal .flag img {border-radius: 10%; opacity: 0.8;}
  .menu-horizontal .flag img:hover {opacity: 1;}
  .menu-horizontal ul {width:auto; float:left; text-align:left; list-style:none;}
  .menu-horizontal li {margin-left:15px; display:inline-block; position:relative;}
  .menu-horizontal ul li a {color:#fff; font-size:16px; display:block; padding: 0px 15px;letter-spacing: 1px; line-height:142px; -webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
  .menu-horizontal ul li.active a {color:#f3c213;}
  .menu-horizontal ul li a:hover {color:#f3c213;}
  .menu-orizontal .flag {margin: 50px 0px; width: 40px; height: 40px;}
  .menu-vertical {display:none;} 
  #icons-nav {display:none;}  
  
  /* EXTRA
========================================================================== */
  #extra {height: 100vh; position: relative; z-index: 0;}
  
  /* COVER
========================================================================== */    
 .cover {position:fixed; top:0; left:0; width: 100%; height: 100vh; background: url('images/tre-mari-villasimius.jpg') no-repeat center center/cover; display: flex; align-items: center; justify-content: center; text-align: center;}
 .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); /* semitrasparente */ z-index: 1;}
 .cover-text {position: relative; z-index: 2; color: #fff; padding: 0 20px;}
 .cover-text h1 {font-size: 3rem; margin-bottom: 1rem;}
 .cover-text p {font-size: 1.2rem;} 
    
  /* SECTION
========================================================================== */    
  section {position: relative; margin-bottom: -50px; width: 100%; height: 100vh; /* altezza viewport */ font-size: 1.5rem; text-align: justify; z-index: 9;}    
  section.other {height: auto; padding-bottom: 150px;}
  section.other p {padding-bottom: 40px;}
  #chi-siamo {background-color: #01567c;}
  #servizi {background-color: #fff; color: #01567c;}
  #contatti {background-color: #01567c; color: white;} 
  .column-3 {margin-top: 20px; border-right: 1px solid #01364e; width: 439px; height: 200px; float: left;}
  .column-3.dx {border-right: 0px; float: right;} 
  .column-3 p {text-align: center; font-size: 16px; line-height: 26px;}

  /* SOCIAL
========================================================================== */  
  .social {margin: 0px auto; margin-top: 10px; width: 130px; height: 51px; position-relative;}  
  .social .icon-facebook {margin-left: 10px; width: 51px; height: 51px; background: url(images/icon-facebook.png) center center no-repeat; float: left;}
  .social .icon-facebook:hover {background: url(images/icon-facebook-hover.png) center center no-repeat;}
  .social .icon-instagram {margin-left: 10px; width: 51px; height: 51px; background: url(images/icon-instagram.png) center center no-repeat; float: left;}
  .social .icon-instagram:hover {background: url(images/icon-instagram-hover.png) center center no-repeat;}
    
  /* WHATSAPP
========================================================================== */    
  .whatsapp-icon {position: fixed; bottom: 20px; right: 20px; z-index: 9999;}
  .whatsapp-icon img {width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-in-out;}
  .whatsapp-icon:hover img { transform: scale(1.1);}
    
  /* SERVICE
========================================================================== */       
  .wrapper-box-service {width: 660px; height: auto; float: left;}  
  .wrapper-box-service.grey {background: #f0f0f0;}
  .box-service {margin: 30px; padding: 30px 0px; width: 600px; float: left;} 
  .box-service p {font-size: 1.1rem; text-align: center;} 
    
/* FOOTER
========================================================================== */     
  .footer {margin-top: 50px; padding: 70px 0px 70px 0px; position: relative; background: #01364e; z-index: 2;} 
  .footer .copyright {width: auto; height: auto; float: left;}
  .footer .privacy {width: auto; height: auto; float: right;}  
  
  
@media screen and (max-width:1319px) {
  /* NAVIGATION MENU========================================================================== */
  .nav-bar {height:60px;}
  .nav-bar a {text-decoration:none;}
  .menu-horizontal {display:none;}
  .menu-vertical {margin:0px auto; width:100%; display:block; overflow:hidden; position: relative;}
  .menu-vertical strong {font-family: 'Montserrat Bold',sans-serif,Arial;}  
  .menu-vertical #logo {margin-top: 15px; width: 111px; height: 30px; position: absolute; left: 3%; top: 0; content: ""; background: url('images/logo-tre-mari-immobiliare-mobile.png') no-repeat 0 0; z-index: 9999;} 
  .menu-vertical .nav-lista {float:left;width:100%;overflow:hidden;height:0;}
  .menu-vertical .nav-lista li {font-size:12px;float:left;list-style:none;width:100%;background:#01567c;border-bottom:1px solid #014c6d;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;text-align:center;}
  .menu-vertical .nav-lista li a {display:block; padding:10px 0px; color:#ffffff;}
  .menu-vertical .nav-lista li.active a {color:#ffffff; text-decoration:none;}
  .menu-vertical .nav-lista li a:hover {background: #014c6d; color:#ffffff;}
  .menu-vertical .nav-menu {position:relative; color:#ffffff; display:block; margin:0px 10px 0px 0px; cursor:pointer; float:right; font-size:31px; line-height:60px;}
  .menu-vertical .nav-aperto {height:auto;}  
  .icons-nav {width: 106px; height: 30px; position: fixed; top:15px; right:50px; z-index:2147483638;} 
  .icons-nav a.phone {margin-right: 8px; width: 30px; height: 30px; background: url('images/icons/icon-phone-nav.png') no-repeat 0 0; cursor: pointer; float: left;}
  .icons-nav a.phone:hover {background: url('images/icons/icon-phone-nav-hover.png') no-repeat 0 0;} 
  .icons-nav a.instagram {margin-right: 8px; width: 30px; height: 30px; background: url('images/icons/icon-instagram-nav.png') no-repeat 0 0; cursor: pointer; float: left;}
  .icons-nav a.instagram:hover {background: url('images/icons/icon-instagram-nav-hover.png') no-repeat 0 0;} 
  .icons-nav a.en {width: 30px; height: 30px; background: url('images/icons/icon-en-nav.png') no-repeat 0 0; cursor: pointer; float: left;}
  .icons-nav a.en:hover {background: url('images/icons/icon-en-nav-hover.png') no-repeat 0 0;}
  .icons-nav a.it {width: 30px; height: 30px; background: url('images/icons/icon-it-nav.png') no-repeat 0 0; cursor: pointer; float: left;}
  .icons-nav a.it:hover {background: url('images/icons/icon-it-nav-hover.png') no-repeat 0 0;}    
  .icons-nav a.home {width: 30px; height: 30px; background: url('images/icons/icon-home-nav.png') no-repeat 0 0; cursor: pointer; float: left;}
  .icons-nav a.home:hover {background: url('images/icons/icon-home-nav-hover.png') no-repeat 0 0;}
}   

@media screen and (min-width:768px) and (max-width:1319px) {
 
/* BASE STYLES
========================================================================== */
  html {font-size: 12px;}
  body {font-size: 12px;}
  p {text-align: left;}
  
/* BASE HEADINGS                                          
========================================================================== */  
  h1, h2, h3, h4 {text-align: left;}
  h2 {padding-top: 0px; font-size: 2rem;} 
  h2.contacts {padding-top: 0px; text-align: center;}
  h4 {text-align: center;} 
  h1.information {padding: 0px 0px 0px 0px;}
  h2.information {padding: 20px 0px 0px 0px;}
  h3.information {padding: 10px 0px 0px 0px;}
  
/* BASE LAYOUT
========================================================================== */   
   .container {width: 720px;}
   
  /* COVER
========================================================================== */    
 .cover-text h1 {text-align: center;}
 .cover-text p {text-align: center;}    
   
  /* SECTION
========================================================================== */    
  section {margin-bottom: -25px; height: auto;}   
  section.other p {padding-bottom: 30px;}
  #chi-siamo {padding: 30px 0px 80px 0px;}
  #servizi {padding: 30px 0px 80px 0px;}
  #contatti {padding: 50px 0px;} 
  .column-3 {margin-top: 0px; margin-bottom: 20px; border-right: none; width: 720px; height: auto; float: left;}
  .column-3.dx {border-right: 0px; float: left;} 
  .column-3 p {text-align: center; font-size: 16px; line-height: 26px;}
  
  /* WHATSAPP
========================================================================== */    
  .whatsapp-icon {bottom: 10px; right: 10px;}  
  
  /* SERVICE
========================================================================== */       
  .wrapper-box-service {width: 720px;}  
  .wrapper-box-service.grey {background: none;}
  .box-service {margin: 0px; padding: 0px; width: 720px;} 
  .box-service p {text-align: left;}  
  
/* FOOTER
========================================================================== */         
  .footer {margin-top: 0px; padding: 60px 0px 80px 0px;} 
  .footer .copyright {margin-top: 20px; width: 100%;}
  .footer .privacy {width: 100%; float: left;}   
  .footer .privacy p.privacy-policy {text-align: center;}         
        
    
}

@media screen and (min-width:576px) and (max-width:767px) {

/* BASE STYLES
========================================================================== */
  html {font-size: 12px;}
  body {font-size: 12px;}
  p {text-align: left;}
  
/* BASE HEADINGS                                          
========================================================================== */  
  h1, h2, h3, h4 {text-align: left;}
  h2 {padding-top: 0px; font-size: 2rem;}  
  h2.contacts {padding-top: 0px; text-align: center;}
  h4 {text-align: center;} 
  h1.information {padding: 0px 0px 0px 0px;}
  h2.information {padding: 20px 0px 0px 0px;}
  h3.information {padding: 10px 0px 0px 0px;}
    
/* BASE LAYOUT
========================================================================== */    
 .container {width: 420px;}
    
  /* COVER
========================================================================== */    
 .cover-text h1 {text-align: center;}
 .cover-text p {text-align: center;}     
    
  /* SECTION
========================================================================== */    
  section {margin-bottom:-25px; height: auto;}
  section.other p {padding-bottom: 30px;}
  #chi-siamo {padding: 30px 0px 80px 0px;}
  #servizi {padding: 30px 0px 80px 0px;}
  #contatti {padding: 50px 0px;}  
  .column-3 {margin-top: 0px; margin-bottom: 20px; border-right: none; width: 420px; height: auto; float: left;}
  .column-3.dx {border-right: 0px; float: left;} 
  .column-3 p {text-align: center; font-size: 16px; line-height: 26px;}
  
  /* SERVICE
========================================================================== */       
  .wrapper-box-service {width: 420px;}  
  .wrapper-box-service.grey {background: none;}
  .box-service {margin: 0px; padding: 0px; width: 420px;} 
  .box-service p {text-align: left;}  
  
/* FOOTER
========================================================================== */         
  .footer {margin-top: 0px; padding: 60px 0px 80px 0px;}        
    
}

@media screen and (max-width: 575px) {

/* BASE STYLES
========================================================================== */
  html {font-size: 12px;}
  body {font-size: 12px;}
  p {text-align: left;}
  
/* BASE HEADINGS                                          
========================================================================== */  
  h1, h2, h3, h4 {text-align: left;}
  h2 {padding-top: 0px; font-size: 2rem;} 
  h2.contacts {padding-top: 0px; text-align: center;}
  h4 {text-align: center;} 
  h1.information {padding: 0px 0px 0px 0px;}
  h2.information {padding: 20px 0px 0px 0px;}
  h3.information {padding: 10px 0px 0px 0px;}
  
/* BASE LAYOUT
========================================================================== */   
   .container {width: 320px;}
   
  /* COVER
========================================================================== */    
 .cover-text h1 {text-align: center;}
 .cover-text p {text-align: center;}    
   
  /* SECTION
========================================================================== */    
  section {margin-bottom: -25px; height: auto;}   
  section.other p {padding-bottom: 30px;}
  #chi-siamo {padding: 30px 0px 80px 0px;}
  #servizi {padding: 30px 0px 80px 0px;}
  #contatti {padding: 50px 0px;} 
  .column-3 {margin-top: 0px; margin-bottom: 20px; border-right: none; width: 320px; height: auto; float: left;}
  .column-3.dx {border-right: 0px; float: left;} 
  .column-3 p {text-align: center; font-size: 16px; line-height: 26px;}
  
  /* WHATSAPP
========================================================================== */    
  .whatsapp-icon {bottom: 10px; right: 10px;}  
  
  /* SERVICE
========================================================================== */       
  .wrapper-box-service {width: 320px;}  
  .wrapper-box-service.grey {background: none;}
  .box-service {margin: 0px; padding: 0px; width: 320px;} 
  .box-service p {text-align: left;}  
  
/* FOOTER
========================================================================== */         
  .footer {margin-top: 0px; padding: 60px 0px 80px 0px;} 
  .footer .copyright {margin-top: 20px; width: 100%;}
  .footer .privacy {width: 100%; float: left;}   
  .footer .privacy p.privacy-policy {text-align: center;}           
}