/* -------------------------------------------------------------------------------- */
/* ! Reset */
/* -------------------------------------------------------------------------------- */
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0; color: #111;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration:none; color:#00F000;}
hr{border:none; border-bottom: 3px solid #000; width:20px;}
.hr-white{border:none; border-bottom: 3px solid #fff; width:20px;}
em{color:green;}
b{color:green;}
body{background:#fff;}

/* -------------------------------------------------------------------------------- */
/* ! Button Sistem */
/* -------------------------------------------------------------------------------- */
.button{font-size: 1.2rem; text-transform: uppercase; font-weight: bold; background: #333; color:#fff; padding: 14px 25px;display: inline-block;border-radius: 4px}
.button:hover{background: #000;}

.button--small{  padding: 10px 20px;font-size: 1rem;}
.button--round{background: #fff; color:#000; padding: 15px 30px; border-radius: 100px; font-weight: bold;}
.button--round:hover{background: #000; color:#fff;}

.button--round-outline{background: transparent; color:#fff; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #fff}
.button--round-outline:hover{background: #ff0; color:#000;}

.button--round-out-black{background: transparent; color:#111; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #111;}
.button--round-out-black:hover{background: green; color:#fff; transition-duration: 0.5s;}

.button--round-out-green{background: transparent; color:#fff; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #fff;}
.button--round-out-green:hover{background: green; color:#fff; transition-duration: 0.5s;}

.panel{
  background: #ddd;height: 0;overflow: hidden;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.panel--open{height: 300px;}


/* -------------------------------------------------------------------------------- */
/* ! Title Sistem */
/* -------------------------------------------------------------------------------- */
.text-0{font-size: 4.5rem; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 3.0rem}
  p{padding-bottom: 15px;}

}

/* -------------------------------------------------------------------------------- */
/* ! Color Palette */
/* -------------------------------------------------------------------------------- */
:root{
    --orange:#ef8b06;
    --cian:#1cbdda;
    --blue:#192d43;
    --red:#f14101;
    --yellow:#fdb813;
    --black:#000;
    --green:green;
    --bg-header:#fff;
    --linkMenu:#111;
}

.text-white{color:white;}
.text-yellow{color:yellow;}
.text-black{color:black;}
.text-blue{color: #112855;}
.text-awana{color:#a39379;}
.orange{color: #ef8b06;}
.purple{color: #ff00d2;}
.cian{color: #1cbdda;}
.red{color:#f14101;}
.grey{color:#c0c0c0;}
.green{color:green;}

.bg-white{background: #fff;}
.bg-black{background: #111;}
.bg-yellow{background: #ff0;}
.bg-blue{background: #112855;}
.bg-green{background: green; border-radius: 5px;}
.bg-orange{background: #ef8b06;}
.bg-cian{background: #1cbdda;}
.bg-fume{background:#333;}
.bg-text-tr-white{background: rgba(255,255,255,1); padding: 20px}
.bg-black-opacity{background: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5)); border-radius: 10px;}
.bg-newsletter{background: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/estate-eolie.jpg') no-repeat center left;
    background-size: cover; height: 50vh;
}


/* Components
--------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Top Bar */
/* -------------------------------------------------------------------------------- */
.top_bar{background: #112855;display: flex; justify-content: space-around; align-items: center;}
.top_bar a{color:#fff;display: block;padding: 5px;}
.top__contacts li{display: inline-block;}
.top__contacts img{width: 30px; transform: translateY(10px); filter: invert(1);}
.top__icons{margin-bottom: 0;text-align: right;}
.top__icons li{display: inline-block; width: 30px;margin-right: 10px; filter: invert(1);}

/* -------------------------------------------------------------------------------- */
/* ! Header */
/* -------------------------------------------------------------------------------- */
.header{display: flex; justify-content: space-evenly; align-items: center; width: 100%; padding:10px; background: #fff; border-bottom: 2px solid green; position: fixed;z-index: 9999;}
.header a{color:#111;display: block;padding: 5px;}
.header__logo img{width: 200px;}
.header__menu{margin-bottom: 0; font-weight: bold;text-transform: uppercase;}
.header__menu li{display: inline-block;}
.header__hamburger{display: none;}

.scroll-down .header{background: #fff;transform: translateY(-61px); transition:all .1s ease-in-out;}

@media (max-width: 768px) {
  .header{background: #fff;}
  .header__hamburger{display: block;; width: 40px;height: 35px; margin-top: 5px;margin-right: 5px;}
  .header__hamburger span{width: 33px;height: 2px;background: #000;margin-top: 8px;display: block; transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}
  .header__menu{position:absolute; top:94px;  left:0; width: 100%;background: #fff;height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1);z-index: 999;}
  .header__menu li{display: block; border-bottom: 1px solid #666; padding: 5px; margin: 10px;}

  .menu-open .header__hamburger span:nth-child(1){transform: translateY(5px) rotate(45deg);}
  .menu-open .header__hamburger span:nth-child(2){transform: translateY(-5px) rotate(-45deg);}

  .menu-open .header__menu{height: 100vh;}
  .menu-open{overflow:hidden;}

  .scroll-down .header{transform: none;}
}



/* -------------------------------------------------------------------------------- */
/* ! Cover */
/* -------------------------------------------------------------------------------- */
.cover{ 
  padding:10px; margin:0px auto; min-height:100vh; width:100%; 
  display:flex; flex-direction:column; justify-content:center; align-items: center;
  background: #fff; position: relative; overflow: hidden;
}

.content__image{width: 100%; height: 350px; }
.content__image img{width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }

/* Cover Helpers */
.cover-top{min-height: 100vh;}
.cover-center{min-height: 50vh;}
.cover-bottom{min-height: 80vh;}


/* ! card */
.card{background: #fff;padding: 30px;border-radius: 15px; margin: 20px 20px; text-align: center;box-shadow: 10px 10px 20px 2px #111;}


/* -------------------------------------------------------------------------------- */
/* ! Form*/
/* -------------------------------------------------------------------------------- */

.form input, textarea{font-family: sans-serif; font-size: 1rem; margin: 5px auto; padding: 10px; border: 1px solid #ccc;border-radius:5px;background:#fff;width: 100%;opacity: 0.7;}
.form label{color:#fff}
#nome{width:90%;}
#cognome{width:90%;}
#telefono{width: 90%;}
#email{width:90%}
#oggetto{width: 95%;}
#textarea{width:95%; height:100px;}
#newsletter{width:3%;margin:5px 0;}
#termini{width:3%; margin:5px 0;}
#bottone{ width: 50%;background: #fff; color:#192d43; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #ccc;}
#bottone:hover{background: #192d43; color:#fff; transition-duration: 0.5s;border: 1px solid #fff;}

.bg-form{background: #fdb813}

.status-msg{padding:20px; width: 100%; border: 2px solid green; background: rgba(0, 255, 0, 0.3); border-radius: 5px; color: #000;}

@media (max-width: 768px) {
  .form, .nome,.cognome,.email,.telefono,.messaggio,.bottone{width: 100%;}
}

/* -------------------------------------------------------------------------------- */
/* ! Footer */
/* -------------------------------------------------------------------------------- */
.footer{background: #ddd; color: #112855; padding: 5rem 20px;}
.footer a{color: #111; text-transform: uppercase; }
.footer a:hover{color: #112855;}

/* -------------------------------------------------------------------------------- */
/* ! Grid Sistem */
/* -------------------------------------------------------------------------------- */
.grid { margin: 0 auto; padding: 0 10px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap; z-index: 1}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-10{ width: 10%; }
.col-15{ width: 15%; }
.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-45{ width: 45%; }
.col-50{ width: 50%; }
.col-55{ width: 55%; }
.col-60{ width: 60%; }
.col-65{ width: 65%; }
.col-70{ width: 70%; }
.col-75{ width: 75%; }
.col-80{ width: 80%; }
.col-85{ width: 85%; }
.col-90{ width: 90%; }
.col-95{ width: 95%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}

 

/* -------------------------------------------------------------------------------- */
/* ! Helpers */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Align Sistem */
/* -------------------------------------------------------------------------------- */
.spacer{margin-top: 100px;}

/* Align Sistem */
.inline-block{display: flex;flex-flow: row; align-items: center;}
.inline-block h1,h2,h3,h4,h5,p{margin: 5px 0 0 5px;}

.reverse{flex-direction: row-reverse;}
@media (max-width: 768px) {
  .sma-reverse{flex-direction: column-reverse;}
}

.relative{position: relative; }

@media (min-width: 769px) {
  .desk-none{display: none;}
   }
  
  @media (max-width: 768px) {
  .sma-none{display: none;}
  
  .sma-reverse{flex-flow: column-reverse; }
  }

.center{display: flex; flex-flow: column; align-items: center;}
.left{display: flex; flex-flow: column; align-items: flex-start;}
.right{display: flex; flex-flow: column; align-items: flex-end;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}
.text-justify{text-align: justify;}

.v-center{display: flex; flex-direction: column;justify-content: center;}
.img-block{display: flex; justify-content: center;align-items: center; width: 100%;}

.icon-small{width: 40px; padding: 5px;}
.icon--small-fil{width: 40px; padding: 5px;filter: invert(1);}


.br-t .card{border-top: 2px solid black;}
.br-b .card{border-bottom: 2px solid black;}
.img-res{width: 100%;}

/* Margin Sistem */
.m-0{margin: 0 }
.m-1{margin: 10px}
.m-2{margin: 20px}
.m-3{margin: 40px}
.m-4{margin: 100px}

.ml-0{margin-left: 0 }
.ml-1{margin-left: 10px}
.ml-2{margin-left: 20px}
.ml-3{margin-left: 40px}
.ml-4{margin-left: 100px }

.mr-0{margin-right: 0 }
.mr-1{margin-right: 10px}
.mr-2{margin-right: 20px}
.mr-3{margin-right: 40px}
.mr-4{margin-right: 100px }

.mt-0{margin-top: 0 }
.mt-1{margin-top: 10px}
.mt-2{margin-top: 20px}
.mt-3{margin-top: 40px}
.mt-4{margin-top: 100px }

.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}
.mb-3{margin-bottom: 40px}
.mb-4{margin-bottom: 100px}

/* Padding Sistem */
.p-0{padding: 0}
.p-1{padding: 10px}
.p-2{padding: 20px}
.p-3{padding: 40px}
.p-4{padding: 100px}

.pl-0{padding-left: 0 }
.pl-1{padding-left: 10px}
.pl-2{padding-left: 20px}
.pl-3{padding-left: 40px}
.pl-4{padding-left: 100px }

.pr-0{padding-right: 0 }
.pr-1{padding-right: 10px}
.pr-2{padding-right: 20px}
.pr-3{padding-right: 40px}
.pr-4{padding-right: 100px }

.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pt-3{padding-top: 40px;}
.pt-4{padding-top: 15vh;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 40px;}
.pb-4{padding-bottom: 15vh;}

/* Effect Helper */
.shadow-rb{box-shadow: 10px 10px 20px 2px #111;}
.shadow-lb{box-shadow: -10px 10px 20px 2px #111;}


/* End File */