/* Framework file CSS by Eolie Web Designer */

/* -------------------------------------------------------------------------------- */
/* ! Reset */
/* -------------------------------------------------------------------------------- */
body, html{
    font-family: 'Archivo Black', 'Pacifico', 'Heebo', cursive, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color:#333;
}

html{scroll-behavior: smooth;}

*,*:before,*:after{
    box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6, p, ol, ul, figure{
    margin: 0 0 1rem 0;
    padding: 0;
}

ol,ul{
    list-style-type: none;
}

img{height: auto;}
a{text-decoration:none; color: #111;}

hr{border:none; border-bottom: 2px solid #0d503c; width: 40%;}
.hr-menu{border:none; border-bottom: 1px solid #666; width: 100%;margin: 20px 0 20px 0}



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

.orange{color: #ef8b06;}
.purple{color: #ff00d2;}
.cian{color: #1cbdda;}
.green{color: #0d503c;}
.red{color:#ff0000;}
.yellow{color:#fdb813;}
.black{color:#111;}
.white{color:#fff;}
.grey{color:#c0c0c0;}

.bg-orange{background: #ef8b06;}
.bg-cian{background: #1cbdda;}
.bg-green{background: #0d503c;}
.bg-yellow{background:#fdb813;}
.bg-fume{background:#333;}
.bg-radial-green{background: radial-gradient(circle, rgb(8, 46, 34) 0%, rgb(13, 80, 60) 50%);}
.bg-basilico{background-image: url('../img/hero.webp');}
.bg-pollara{background-image: url('../img/salina/pollara.jpg');}
.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;
}



/* -------------------------------------------------------------------------------- */
/* ! Title Sistem */
/* -------------------------------------------------------------------------------- */
.pre-title{font-weight: bold; text-transform: uppercase; font-size: 1.5rem;letter-spacing: 0.1rem; color: var(--green);}
.h0{font-size: 4rem;margin-bottom:0.5rem; line-height: 1.3; text-transform: capitalize;}
h1, .h1{font-size: 3.5rem;margin-bottom:0.5rem; text-transform: capitalize;}
h2, .h2{font-size: 2.4rem;margin-bottom:1rem;}
h3, .h3{font-size: 1.8rem;margin-bottom:1rem;}
h4, .h4{font-size: 1.1rem;margin-bottom:1rem; line-height: 1.5;}
p, .p{font-size: 1.09rem;margin-bottom:1rem; line-height: 1.3; font-family: 'Heebo', sans-serif;}

@media (max-width: 768px) {
.pre-title{font-weight: bold; text-transform: uppercase; font-size: 1.1rem;letter-spacing: 0.1rem; color: var(--blue);}
.h0{font-size: 2.4rem;margin-bottom:0.1rem; line-height: 1.3; text-transform: capitalize;}
h1, .h1{font-size: 2.5rem;margin-bottom:0.5rem; text-transform: capitalize;}
h2, .h2{font-size: 2rem;margin-bottom:1rem;}
h3, .h3{font-size: 1.5rem;margin-bottom:1rem;}
h4, .h4{font-size: 1rem;margin-bottom:1rem; line-height: 1.5;}
p, .p{font-size: 1rem;margin-bottom:1rem; line-height: 1.5;}
}


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

@media (max-width: 768px) {
    .text-sma-center { text-align: center; }
    .text-sma-right { text-align: right; }
    .text-sma-left { text-align: left; }
    .text-sma-justify{ text-align:justify }
}


/* -------------------------------------------------------------------------------- */
/* ! Button Sistem */
/* -------------------------------------------------------------------------------- */
.btn { 
  font-size: 1rem; text-transform: uppercase; background: #0d503c; color:#fff;
  text-decoration: none; padding: 14px 24px; margin-top: 20px; display: inline-block;
  border-radius: 4px; font-weight: 700; transition: 0.5s; z-index: 999;
}
.btn:hover{ background: #fdb813; }

.btn-back{position: fixed; bottom: 20px; right:10px; z-index: 999; border-radius: 20px; border: none;}

.btn-round{border-radius: 100px; background: transparent; color: #0d503c; border:1px solid #0d503c;}
.btn-round:hover{border-radius: 100px; border:1px solid #0d503c; color:#0d503c}

.btn-round-white{border-radius: 100px; background: transparent; border:1px solid #fff;}
.btn-round-white:hover{border-radius: 100px; border:1px solid #0d503c; color:#0d503c}

.btn-round-yellow{border-radius: 100px; background: var(--yellow); border:1px solid var(--yellow); color: #0d503c;}
.btn-round-yellow:hover{border-radius: 100px; border:1px solid #0d503c; color:#0d503c}

.btn-round-red{border-radius: 100px; padding: 14px 24px; background: red; border:1px solid red; }
.btn-round-red:hover{border-radius: 100px; border:1px solid #fdb813; color: black;}

.btn-round-outline{border-radius: 100px; border:1px solid #0d503c; background: transparent; color:#0d503c}
.btn-round-outline:hover{border-radius: 100px; border:1px solid #0d503c; color:#0d503c}

.btn-whatsapp{border-radius: 100px; border:1px solid #ffffff; background: green; color:#fff}


/* -------------------------------------------------------------------------------- */
/* ! Header */
/* -------------------------------------------------------------------------------- */
/* Header Menu */
.header{display: flex; justify-content: space-around; align-items: center; padding: 0px; background: #fff; position: fixed; width: 100%; z-index: 9999;}
.header a{font-size: 1rem; font-family:'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
    'Open Sans', 'Helvetica Neue', sans-serif; ; font-weight: 500; color:#0d503c; }

.header__button{width: 100%; text-align: center;}
.header__button a{color:#fff; font-weight: 800;}
.header__logo {width: 50%; text-align: center;}
.header__menu {width: 100%; text-align: center;}
.header__logo img{width: 80%;padding: 5px;margin: 0;}

.header__menu ul{margin:0 auto;}
.header__menu li{display: inline-block; position: relative; margin-right: 20px;}
.header__hamburger{display: none;}

/* Scroll Menu */
/*.scroll-down .header{background:rgba(13, 80, 60, 0.8)}
@media (max-width: 768px) {
    .scroll-down .header{background:rgba(13, 80, 60, 0.8);}
}*/


/* Header Sub Menu */
.header__menu li ul{position: absolute; left: 0; width: 180px; display: none; visibility: hidden; text-align: left;}
.header__menu li ul li{width: 100%;}
.header__menu li a{position: relative;}
.header__menu li.header__submenu > a:after{content: " "; width: 16px; height: 16px; position: absolute; top: 30%; right: -18px; transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
 background-size: 100%; overflow: hidden;}
 .header__submenu ul{top:40px}
 .header__submenu ul a{color:#192d43; padding:12px}
 .header__submenu ul li:hover{background:#192d43}
 .header__submenu ul a:hover{color:#fff}
 .header__menu li:hover > ul{display: block; visibility: visible;background: #eee;}
 .header__menu li ul li{margin:0;padding:10px;border:none; border-bottom: 1px solid #192d43;}
 .header__menu li ul li a{font-size: 0.9rem;}

 @media (max-width: 768px) {
    .header{display: flex; justify-content: space-between; background: #fff;}
    .header a{color:#192d43}
    .header__logo img{width: 160%; margin: 0 auto;}
    .header__hamburger{display: block; width: 40px;height: 35px; margin-top: 2px;margin-right: 15px;}
    .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: 70px; 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: 10px; margin: 10px;text-align: left;}
    .header__menu li ul{position: relative;}

    .header__menu li ul li:last-child{border:none;}
    .header__submenu ul{top:10px}

    .header__menu li:hover > ul{display: block; visibility: visible;background: transparent; padding-bottom:20px;}
  
  
    .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;}
}

.social-icons a{margin-left: 20px;}

/* -------------------------------------------------------------------------------- */
/* ! Cover */
/* -------------------------------------------------------------------------------- */
.cover{ 
  padding:10px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center; align-items: center;
 background-size:cover; position: relative; overflow: hidden;
}

.pizza{display: flex; justify-content: center; align-items: center; margin-bottom: 25%; }
.img-pizza{position: absolute; top:-25rem; left: 8rem; width: 50%;}
.text-pizza{position: absolute; top:10rem; right: 20rem; width: 30%; text-align: right;}

@media (max-width: 768px) {
    .img-pizza{position: absolute; top:-9rem; left: 0.5rem; width: 95%;}
    .text-pizza{ max-width: 100%;}
}


/* -------------------------------------------------------------------------------- */
/* ! Background Cover Text */
/* -------------------------------------------------------------------------------- */
.cover:after{content:attr(data-bg-text); position: absolute; top: 40%; left: 50%; text-align:center; transform: translate(-50%);
    background: transparent; color: #fff; min-width: 100%; opacity: 0.1; font-size: 14rem; font-weight: bold; text-transform: uppercase; padding: 10px;z-index: 0; white-space: nowrap;}

@media (max-width: 768px) {
    .cover:after{content:attr(data-bg-text); top: 35%; left: 20%; transform: rotate(90deg);
        color: #fff; max-width: 100%; opacity: 0.1; font-size: 5rem; padding: 10px;z-index: 0;}
}

.bg:after{content:attr(data-bg-text); position: absolute; top: 10%; left: 50%; text-align:center; transform: translate(-50%);
    background: transparent; color: #111; min-width: 100%; opacity: 0.1; font-size: 20rem; font-weight: bold; text-transform: uppercase; padding: 10px;z-index: 0; white-space: nowrap;}



.check{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='green' class='bi bi-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; padding-right: 20px;
}


/* -------------------------------------------------------------------------------- */
/* ! Contatore */
/* -------------------------------------------------------------------------------- */
.counter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  
  .counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 30px;
    padding: 30px;
    opacity: 0; /* Aggiunto per nascondere inizialmente i contatori */
    transform: translateY(50px); /* Aggiunto per spostare i contatori in basso */
    transition: opacity 0.5s, transform 0.5s;
  }
  
  .label {
    margin-bottom: 5px;
    text-align: center;
    font-size: 2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  .count {
    font-size: 3rem;
    font-weight: bold;
  }
  
  .unit {
    margin-top: 5px;
    font-size: 20px;
    color: #777;
  }

/* -------------------------------------------------------------------------------- */
/* ! Card */
/* -------------------------------------------------------------------------------- */
.card{padding: 20px 10px 20px 10px; box-shadow: 0 5px 20px rgba(0,0,0,.1);border-radius: 10px;overflow: hidden;margin: 30px 15px 30px 15px; min-height: 300px;}
.card__img{min-height:200px;display: block;background-position: center center; background-size:cover;margin: -20px -20px 20px -20px;}


/* -------------------------------------------------------------------------------- */
/* ! Portfolio Images */
/* -------------------------------------------------------------------------------- */
.portfolio{width: 100%; height: 100%; position: relative; overflow: hidden;}
.portfolio img{display: block; transform: scale(1); transition: all .2s linear;}
.portfolio img:hover{transform: scale(1.1);}

/* -------------------------------------------------------------------------------- */
/* ! Reviews */
/* -------------------------------------------------------------------------------- */
.reviews {padding:10px; background: #eee;margin: 5px 5px;border-radius:10px;}
.reviews > p {font-size: 14px;padding:10px}
.block-reviews{display: flex;flex-flow: row; align-items: center;}
.reviews__user{margin:4px 4px}
.reviews__img-circle{width: 40px; border-radius:100%;}
.reviews__icon-star li{display: inline-block;}
.block-reviews,.reviews__icon-star{margin-bottom: 0;}

.star, .star-half{  width: 20px; filter: invert(0.4) sepia(0.5) saturate(20) hue-rotate(360deg) brightness(1.2);}

/* -------------------------------------------------------------------------------- */
/* ! 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;}
#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) {
  label, input{display: block;margin: 0;}
  #textarea{width:90%; height:100px; margin-left: 15px;}
  #newsletter{width:5%;margin-left:15px; display: inline;}
#termini{width:5%; margin-left:15px; display: inline;}
}

/* -------------------------------------------------------------------------------- */
/* ! Faq */
/* -------------------------------------------------------------------------------- */
.intro{cursor:pointer; padding: 10px;font-size: 1rem;font-family: 'Raleway', sans-serif;}
.panel{max-height: 0; overflow: hidden; border-radius: 10px; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.panel p{padding: 10px; font-size: 0.9rem;}
.panel--show{max-height: 500px;}

/* -------------------------------------------------------------------------------- */
/* ! Animation */
/* -------------------------------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}

/* -------------------------------------------------------------------------------- */
/* ! Effect */
/* -------------------------------------------------------------------------------- */
.shadow{box-shadow: 2px 2px 15px 5px;}

/* -------------------------------------------------------------------------------- */
/* ! Chat WhatsApp */
/* -------------------------------------------------------------------------------- */
.chat-whatsapp{position:fixed; bottom: 50px; left: 50px; border-radius: 20px;  box-shadow: 2px 2px 15px 5px; z-index: 9999;}
.chat-whatsapp a{display: flex; justify-content: center; align-items: center;}

.btn-chat-whatsapp { background: #25d366; color:#fff;
    text-decoration: none;padding: 20px; border: 1px solid #25d366;
    border-radius: 20px;  transition: 0.5s;
  }
  .btn-chat-whatsapp:hover{background: #075e54; color: fff; border: 1px solid #075e54;}

/* -------------------------------------------------------------------------------- */
/* ! Footer */
/* -------------------------------------------------------------------------------- */
.footer{background: #192d43; color:#fff; padding: 30px; list-style-type: none; font-weight: 300;}
.footer li > a{color:#fdb813; 
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.footer__logo li > img{width: 50%;}

/* -------------------------------------------------------------------------------- */
/* ! Gallery Grid */
/* -------------------------------------------------------------------------------- */
.gallery-grid{--gap: 16px; --num-cols: 4; --row-height: 300px;
  padding: var(--gap); display: grid; grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);}
.gallery-grid a > img{width: 100%; height: 100%; object-fit: cover;}
.gallery-grid a{padding: 0;}
.gallery-grid-col-1{grid-column: span 1;}
.gallery-grid-col-2{grid-column: span 2;}
.gallery-grid-row-2{grid-row: span 2}
.gallery-grid-row-3{grid-row: span 3}


@media all and (max-width:1024px) {
  .gallery-grid{--num-cols: 2; --row-height: 200px}
}

@media all and (max-width: 768px) {
  .gallery-grid{--num-cols: 1; --row-height: 200px}
}

/* -------------------------------------------------------------------------------- */
/* ! Grid Sistem */
/* -------------------------------------------------------------------------------- */
.grid { margin: 0 auto; padding: 0 15px; 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: 10px 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 */
/* -------------------------------------------------------------------------------- */
.spacer{padding-top: 200px;}

/* Align Sistem */
.v-center{display: flex;flex-flow: column;justify-content: center;}

.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: 991px) {
  .tab-none{display: none ;}
}*/

@media (max-width: 768px) {
.sma-none{display: none;}
}

.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;}

/* Image Sistem */
.img-res { width: 100%;
    height: auto;
    margin-bottom: 10px;
    vertical-align: middle;
}

/* Border Sistem */
.border-radius-1{border-radius: 5%;}
.border{border: 2px solid #192d43; padding: 5px;}

/* Flexbox */
.column{display: flex; flex-flow: column;}


/* Translate */
.translateDW-10{transform: translateY(100px);}
.translateDW-15{transform: translateY(150px);}
.translateDW-20{transform: translateY(200px);}
.translateDW-30{transform: translateY(300px);}
.translateDW-40{transform: translateY(400px);}
.translateDW-45{transform: translateY(450px);}

.translateUP-10{transform: translateY(-100px);}
.translateUP-15{transform: translateY(-150px);}
.translateUP-20{transform: translateY(-200px);}
.translateUP-30{transform: translateY(-300px);}
.translateUP-40{transform: translateY(-400px);}
.translateUP-45{transform: translateY(-450px);}

.translateSX-10{transform: translateX(-100px);}
.translateSX-15{transform: translateX(-150px);}
.translateSX-20{transform: translateX(-200px);}
.translateSX-30{transform: translateX(-300px);}
.translateSX-40{transform: translateX(-400px);}
.translateSX-45{transform: translateX(-450px);}

.translateDX-10{transform: translateX(100px);}
.translateDX-15{transform: translateX(150px);}
.translateDX-20{transform: translateX(200px);}
.translateDX-30{transform: translateX(300px);}
.translateDX-40{transform: translateX(400px);}
.translateDX-45{transform: translateX(450px);}

@media (max-width: 991px) {
  .translate-tab-none{transform: none;}
  }

@media (max-width: 768px) {
.translate-sma-none{transform: none;}
.translateY-sma-5{transform: translateY(50px);}
.translateY-sma-10{transform: translateY(100px);}
.translateY-sma-15{transform: translateY(150px);}
.translateY-sma-20{transform: translateY(200px);}
.translateY-sma-30{transform: translateY(300px);}
.translateY-sma-40{transform: translateY(400px);}
.translateY-sma-45{transform: translateY(450px);}
}

/* ! Justify Content*/
.jc-start{justify-content: flex-start;}
.jc-end{justify-content: flex-end;}
.jc-center{justify-content:center;}
.jc-left{justify-content:left;}
.jc-right{justify-content:right;}
.jc-between{justify-content: space-between;}
.jc-around{justify-content: space-around;}
.jc-evenly{justify-content:space-evenly;}

/* ! Viewport */
.vh100{height: 100vh;}
.vh80{height: 80vh;}
.vh60{height: 60vh;}
.vh40{height: 40vh;}

/* ! Z-Index*/
.z0{z-index: 0;}
.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}

.z-0{z-index: -0;}
.z-1{z-index: -1;}
.z-2{z-index: -2;}
.z-3{z-index: -3;}

/* 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;}

@media (max-width: 768px) {
    /* Margin Sistem Smartphone*/
    .sm-0{margin: 0 }
    .sm-1{margin: 10px}
    .sm-2{margin: 20px}
    .sm-3{margin: 40px}
    .sm-4{margin: 100px}
    
    .sml-0{margin-left: 0 }
    .sml-1{margin-left: 10px}
    .sml-2{margin-left: 20px}
    .sml-3{margin-left: 40px}
    .sml-4{margin-left: 100px }
    
    .smr-0{margin-right: 0 }
    .smr-1{margin-right: 10px}
    .smr-2{margin-right: 20px}
    .smr-3{margin-right: 40px}
    .smr-4{margin-right: 100px }
    
    .smt-0{margin-top: 0 }
    .smt-1{margin-top: 10px}
    .smt-2{margin-top: 20px}
    .smt-3{margin-top: 40px}
    .smt-4{margin-top: 100px }
    
    .smb-0{margin-bottom: 0}
    .smb-1{margin-bottom: 10px}
    .smb-2{margin-bottom: 20px}
    .smb-3{margin-bottom: 40px}
    .smb-4{margin-bottom: 100px}
    
    /* Padding Sistem Smartphone*/
    .sp-0{padding: 0}
    .sp-1{padding: 10px}
    .sp-2{padding: 20px}
    .sp-3{padding: 40px}
    .sp-4{padding: 100px}
    
    .spl-0{padding-left: 0 }
    .spl-1{padding-left: 10px}
    .spl-2{padding-left: 20px}
    .spl-3{padding-left: 40px}
    .spl-4{padding-left: 100px }
    
    .spr-0{padding-right: 0 }
    .spr-1{padding-right: 10px}
    .spr-2{padding-right: 20px}
    .spr-3{padding-right: 40px}
    .spr-4{padding-right: 100px }
    
    .spt-1{padding-top: 10px;}
    .spt-2{padding-top: 20px;}
    .spt-3{padding-top: 40px;}
    .spt-4{padding-top: 15vh;}
    
    .spb-1{padding-bottom: 10px;}
    .spb-2{padding-bottom: 20px;}
    .spb-3{padding-bottom: 40px;}
    .spb-4{padding-bottom: 15vh;}
}

/* End File */