/* MAHOME CSS - version 0.1 - luglio 2023 */


/* ======================= CSS variables & default style ====  */

/*colors*/
html {
    --ma-text: #484848;
    --ma-title: #484848;
    --ma-black: #000; 
    --ma-green: #345E41;
    --ma-dark-green: #1c231f;
    --ma-grey: #fafaf9;
}

/* typography */
body {background:#fff; color:var(--ma-text); font-family:'Prompt', sans-serif; font-weight:200;}
h1,h2,h3,h4,h5 { font-family:'Prompt', sans-serif; font-weight:500;}
a {color:var(--ma-green);}
a:hover {opacity:.9;}
p {line-height:160%;}

h1 {font-size:50px;}
h2 {font-size:40px;}

a.arr-dx {text-decoration: none; font-weight: 500; color: #000;  transition: all .2s linear;}
a.arr-dx:hover i {position:relative; right:-5px;}

.btn {border-radius: 0px; text-transform: uppercase; font-weight: 400; padding:12px 30px; font-size:14px;}
.btn:hover {opacity:.8;}
.btn-green {background-color: var(--ma-green); color:#fff;}
.btn-green:hover {background-color: var(--ma-green); color:#fff;} 
.btn-lg {font-size:1em; padding:0.5rem 2rem;}






/* ====================== Struttura ed elementi comuni ============= */

/* ===== HEADER ===== */

/* navbar */
.navbar { color:var(--ma-text); height:86px; }
.navbar.fixed-top {background:#FFF; box-shadow: 0px 5px 5px 0px rgba(0,0,0,.1);}
.logo {width:80px; }
.logo svg {display: block; width: 80px; height: auto; fill: #000; stroke: #000; stroke-width: 1.5px; transition: all .5s linear ;}
.navbar.fixed-top .logo svg {width:60px;}

/* menu */
ul.navbar-nav {margin-top:10px;}
ul.navbar-nav li.nav-item {text-transform: uppercase; padding-left:26px; padding-right:26px; font-size:14px; font-weight:500; letter-spacing: .6px;}
ul.navbar-nav li a {position:relative; color:var(--ma-text); }
ul.navbar-nav li a:hover {color:inherit; opacity:.8;}
ul.navbar-nav li a.active { color:var(--ma-green) !important;}

ul.navbar-nav li.nav-item.switch-lang {padding:0.5rem 26px;} 
ul.navbar-nav li.nav-item.switch-lang a {text-decoration:none; }

.navbar-toggler {border:0; background:#fff;} /* mobile menu icon */
.navbar-toggler-icon {color:#fff !important;}
.navbar-toggler:focus {box-shadow:none;}

.offcanvas .offcanvas-text {display:none;}
.offcanvas.show .offcanvas-text {display:block;}

/* hero + claim */
.claim {margin-top:80px; color:#fff;}
.claim h1 {font-size:50px; text-transform: uppercase; font-weight: 500; text-shadow: #666 3px 2px 10px;}
.claim h2 {font-size:25px; text-shadow: #666 3px 2px 10px;}
.claim .btn {background:#fff; color:#000; border-color: #000; opacity:.7;}
.claim .btn:hover {opacity: 1;}

/* ===== CONTAINER ===== */

.white-content {background:#fff;}
.white-left-content {background-image: linear-gradient(to left, transparent 50%, white 50%);}
.white-right-content {background-image: linear-gradient(to right, transparent 50%, white 50%);}

.fullscreen-img {height:400px; position:relative; background-repeat: no-repeat; background-size: cover;}
.parallax-window {
    min-height: 400px;
    background: transparent;
}


/* ===== ELEMENTI ===== */

/* contact form */
.vip-form {}
.vip-form input, .vip-form textarea {background-color:var(--ma-grey); border-color:var(--ma-text); border-radius: 0px;}
.vip-form input#email {border:0; border-bottom:1px solid var(--ma-text);}

.page form input, .page form textarea {background-color:#fff; border-color:var(--ma-text); border-radius: 0px;}

/* scritte bg */
.letter-shadow {font-size:80px; opacity:.1; line-height:110px; margin:0 !important; position:relative; z-index:0; bottom:-40px;}

/* back-to-top */
.back-to-top {visibility: hidden; position:fixed; bottom:52px; right:25px; width:40px; height:40px; background-color: #345E41; transition: all .6s linear; z-index:9999;}
.back-to-top a {color: #fff; font-size:40px; line-height:40px; text-decoration: none; display:block; width:60px; height:80px; }
.back-to-top.show {visibility:visible !important;}

/* slider */
.controls {position:absolute; top:calc(50% - 30px); left:0; width:100%;}
.controls .prev, .controls .next {height:60px; width:60px; margin:0 30px; text-align:center; font-size:60px; line-height:60px; color:#fff; transition: all .2s linear;} 
.controls .prev:hover {margin-left:15px;}
.controls .next:hover {margin-right:15px;}



/* ===== FOOTER ===== */

footer {position:relative; background-color: var(--ma-dark-green); color:#bcbcbc; padding:1rem; font-size:14px;}
footer a {color:#bcbcbc; text-decoration: none;}






/* =========================== Pagine del sito ===================================== */

/* ====== 01. HOMEPAGE */
.homepage {background:var(--ma-grey);}
.homepage .logo svg {fill: #fff; stroke: #fff;} 
.homepage .navbar.fixed-top .logo svg {fill: #000; stroke: #000;} 
.homepage .hero {height:800px;}
.hero.make-top {padding-top:86px;}
.hero.make-top .navbar {transition: all .5s ease;}
.hero.make-top .navbar.fixed-top {}   

/* servizi in HP  */
.servizi {background:#fff;}
.servizio .icon {width:160px; margin-right:10px;}
.servizio .icon img {max-width:100%;}

/* carosello in HP */
.carosello {margin-left:0%; position:relative;}
.carosello .hp-slider a {position:relative; width:100%; display:inline-block; overflow:hidden;}
.carosello .hp-slider a img {position:relative;  transition: all .2s ease;}

.carosello .hp-slider .hp-vip-info  {position: absolute; bottom:0px; left:0px; display:block; width:100%; height:120px; padding:20px 40px; text-decoration: none; color: #fff; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 80%);}
.carosello .hp-slider .hp-vip-info h4 {font-size:24px;}
.carosello .hp-slider .hp-vip-info p {text-transform: uppercase; font-size:16px; }

.carosello .hp-slider a:hover { opacity:1 !important;}
.carosello .hp-slider a:hover img  {transform: scale(1.1);}
.carosello .hp-slider a:hover p i {margin-left:10px;}

/* lanci in HP */
.lancio {background:#fff;}
.lancio h2 {margin-bottom:2.6rem;}
.lancio p {line-height:180%;}
.fullscreen-img h3 {font-size:40px; padding-top:30px; color:#fff;}
.lancio.lancio-end {background-color:none; }
.lancio.lancio-end .lancio-text-wrapper {background:url(../images/Italy.webp) center center no-repeat; background-size: contain;}
.lancio.lancio-end .lancio-text {text-align:right;}

/* ratings HTP */
.rating-slider {margin-top:4rem;}
.rating-slider i {color: #000; padding: 3px;}
.rating-slider p {margin:1.2rem 0;}
.rating-slider .author {font-weight: 500;}
.rating-slider > div {text-align:center;}

/* ======== 02. VIP */
.vip .hero {padding-top:86px;}
.vip h2 {font-size:30px; color:#000; margin-bottom: 20px;}
.vip h4 {color: #3e3e3e; font-size: 16px; line-height: 1.5; font-weight: 500; text-transform: uppercase; margin-bottom: 12px;}

/* slider */
.wrapper-slider {
	position:relative;
	background:#fff;
	margin-top: -17px; /* FAB: removed slider auto pixel */
}
/* .vip-slider img {min-height:400px;} */

.vip .info {margin-bottom:15px;}
.vip .info span {display: inline-block; margin: 0 5px;}
.vip .desc {}

.calendar {background:var(--ma-grey); height:200px;}

.sidebar {margin-top:-40px;}
.sidebar-box {background:var(--ma-grey); }

.related h3 {font-size:25px;}
.related h3 a {color:#000; text-decoration: none;}
.related p.rel-info {padding-top: 5px; font-size:14px;}
.related p.rel-desc {border-bottom: 1px solid #ddd; padding-bottom:10px;}

/* ======== 03. PAGE (OTHERS) */

.page .hero {height:286px; padding-top:86px;}
.page .claim {margin-top:60px; }
.page .claim h1 {text-transform: none;}

/* == CONTATTI */

.price .card {border:0; border-radius: 0; background:var(--ma-grey);}
.price .card small {font-size: 18px; font-weight: 200;}


/* ====================== Responsive (Media query) ============= */


/* Small devices ONLY */
@media (max-width: 767.99px ) {  

    .homepage {background:#fff;}
    .homepage .hero {height:500px;}
    .homepage .logo svg {fill: #000; stroke: #000; }
    .claim {margin-top:40px;}
    
    .logo {width:45px; margin-top:8px;}
    .logo svg {width: 42px;}
    .navbar.fixed-top .logo svg {width:42px;}

    .servizio .icon {width: 120px; margin-right: 0px;}   
    
    .full-height-page {min-height: calc(100vh - 360px);}
   
}

/* Medium devices ONLY */
@media (min-width: 768px) and (max-width: 991.99px) {  

    .claim h1 {font-size:75px;}
    .homepage .logo svg {fill: #000; stroke: #000; }

    .full-height-page {min-height: calc(100vh - 339px);}

}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  

    .claim h1 {font-size:100px; max-width:75%;}
    .page .claim h1 {font-size:50px;}

    .top-menocento {margin-top:-100px;}

    .letter-shadow {font-size:110px;}

    .fullscreen-img {height:700px;}
    .fullscreen-img h3 {font-size:60px; padding-top:50px;}

    .carosello {margin-left:16%; position:relative;}
    
    .page .hero {height:486px; padding-top:86px;}
    .page .claim {margin-top:160px; }

    .vip-slider {}

    .full-height-page {min-height: calc(100vh - 539px);}

}



/* animazioni */
.homepage .claim h1 {animation: slidein .5s, fadein 2s; }
.homepage .claim h2 {animation: fadein 2s;}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slidein {
    from { margin-left: -5000px; }
    to   { margin-left: 0; }
}


/* debug 
.container {border:1px dotted red;} 
.row {border:1px solid yellow;} 
.col {border:1px dotted blue;} */