html,body { height:100%; color: var(--dark); font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300; }

:root {
    --dark: #222222;
    --medium: #d9c6c6;
    --light: #efe7e7;
    --primary: #aa8181;
    --primaryDark: #925d5d;
}

.avatar { width:180px; height:180px; border-radius:50%; display:block; margin:0 auto 12px auto; }

/* === header -==== */

header { transition:background-color 0.4s ease;position:fixed; top:0; left:0; width:100%; z-index:100; background:none; padding:20px 40px; color:#fff; display:flex; justify-content:space-between; align-items:center; }
header a,footer a { color:#fff; }
.scrolled header {background:var(--dark);box-shadow:0 0 10px rgba(0,0,0,0.1);}


.logo { width:320px; }

@media screen and (max-width:480px) {
    header { padding:20px; }
    .logo { width:270px; }

}

.scrollDownArrow { color:#fff; text-decoration:none; padding:10px 0; font-size:15px; text-transform:uppercase; letter-spacing:3px; text-shadow:0 0 5px rgba(0,0,0,0.3);}
.scrollDownArrow::after { content:""; width:14px; height:14px; border-top:2px solid #fff; border-right:2px solid #fff; position:absolute; left:calc(50% - 10px); top:40px; transform:rotate(135deg); }

.scrollDownArrow::after { 
-webkit-animation-name: bounce;
animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}

@keyframes bounce {0, 20%, 50%, 80%, 100% { top:40px;}
	40% {top:36px;}
	60% {top:36px;}
    
}


        /* === animation ==== */
        
        @keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
        
        
.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:0s;
}
.animated2 {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:1.4s;
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

/* == nav ==== */

nav ul { display:flex; }
nav ul li a { text-decoration:none; padding:6px 12px; }
nav ul li a:hover { color:var(--primary); }
nav ul li.active a { color:var(--primary); }

@media screen and (max-width:480px) {
    
nav { transition:all 0.3s ease; display:flex; width:100%; height:100%; left:0; top:0; opacity:0; pointer-events:none; position:fixed; background:var(--dark); background-size: 150%;
background-position: -200px -100px; z-index:200;padding:40px; }
nav ul { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; }
nav li a { color:#fff; display:block; text-decoration:none; font-size:24px; padding:10px; text-decoration:none;text-transform: uppercase;
letter-spacing: 3px;font-weight:400;}
.menuOpen nav { opacity:1; pointer-events:inherit; }

}


/* ==== numbered list ======= */
ol {counter-reset: item;list-style-type:decimal; padding-left:10px;}
ol li { display:block;margin-bottom:20px; font-weight:bold; }
ol li li { font-weight:normal;  }
ol li:before { content: counters(item, ".") " "; counter-increment: item; }


/* === text list ==== */

.textlist ul{ list-style-type:disc; padding-left:20px; margin-bottom:10px; }
.textlist li {  line-height:140%; }

/* == hero ==== */

.hero { position:relative; width:100%; height:450px; display:flex; flex-direction:column; align-items:center;justify-content: flex-end; padding:140px 40px 0; }
.hero img { width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0; }
.hero video { width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0; }

.hero h1 {z-index:10; color:#fff;  font-size:30px;background: var(--dark);padding: 12px 20px; 
  text-transform: uppercase;   letter-spacing: 3px;}

  

.grad { background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
width: 100%; height:180px; position:absolute; left:0; top:0; z-index:1; }


.homeHero { height:100%; justify-content:center;  }
.homeHero h1 { background:none; padding:0;text-shadow:0 0 10px rgba(0,0,0,0.2);
 font-size:40px; letter-spacing:0; text-transform:unset; }

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

    .hero { height:350px; }
.homeHero { height:100%; justify-content:center;  }
    
    
}
/* ==== cards ====== */

.cards { display:flex; flex-direction:row; flex-wrap:wrap; }
.cards li { padding:20px; display:flex; flex-direction:column;  }
.cards li img { aspect-ratio:16/9; object-fit: cover;}
.cards3 li {width:33.3333%;  }
.cards4 li {width:25%;  }
.cards .btn { margin-top:auto; }


.cardsLotus li { align-items:flex-start; }

.cardsLotus li img { aspect-ratio:unset; width:40px; height:auto; object-fit:unset; margin-bottom:0; }


.cardsLotus li h3 { margin-top:6px; }
.cardsLotus .btn { margin-top:auto;   }

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

.cards { flex-direction:column; }
.cards li { padding:20px 0;   }
.cardsLotus li  {width:100%;  }
.cards3 li {width:100%;  }
.cards4 li {width:100%;  }

}

/* == burger ==== */

.burger { display:none; }
@media screen and (max-width:480px) {
.burger { display:block; background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  right:20px; top:18px;  z-index: 300; }
.burger span {  transition: all 0.4s ease; display: block;  background: var(--primary); width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }


.burger:before,
.burger:after {  content: "";  display: block;  background: var(--primary);  width: 60%;  height: 4px;  position: absolute;  left: 20%;
  transform-origin: center center;  transform: rotate(0deg);  transition: all 0.3s ease;}

.burger:before {  top: 30%;  margin-top: -2px;}
.burger:after {  bottom: 30%;  margin-bottom: -2px;}

/* == burger onclick ==== */

.menuOpen .burger span { left:100%; opacity: 0;  background: #fff;}
.menuOpen .burger:before {  top: 50%;  transform: rotate(45deg); background: #fff; }
.menuOpen .burger:after {  bottom: 50%;  transform: rotate(-45deg);  background: #fff;}



}
/* ===== cta ====== */

.callout { background:var(--primary); color:#fff; padding:60px; text-align:center;  }
.callout p { max-width:600px; margin-left:auto; margin-right:auto; }
.callout h3 { color:inherit;  max-width:480px; margin-left:auto; margin-right:auto; }

.callout a { color:inherit; }
/* === text ====== */
h2,.h2 { color:var(--dark); font-size:24px; }
.template-8 h2 { color:var(--primary);}
.editableContent h2 { margin-bottom:24px; }

h3,.h3 { color:var(--primary); font-size:18px; margin:24px 0 12px; }
h4,.h4 { color:var(--dark); font-size:16px; margin:24px 0 12px; }
p,.p { font-size:14px; line-height:170%; margin:0 0 12px 0; }
.btn { font-size:14px;background:var(--dark); color:#fff; border:none;padding:5px 22px; border-radius:20px; display:inline-block; text-decoration:none; }
.btn:hover { background:var(--primaryDark); }

.bgLight { background:var(--light); }
.bgDark  { background:var(--dark); color:#fff; }
.bgDark a { color:#fff; }

.bgPrimary  { background:var(--primary); }
.bgPrimary,
.bgPrimary a,
.bgPrimary h2,
.bgPrimary h3 { color:#fff; }

main { padding:80px 0 0 0; }

@media screen and (max-width:480px) {
    p, .p { font-size:16px; }
    main { padding:40px 0 0 0; }    
}

/* ==== forms ===== */

form { max-width:600px; margin:0 auto; }
label { display:block; margin-bottom:3px; font-size:16px; }
input[type="text"], textarea { -webkit-appearance: none;  text-align:center; border-radius: 5px;outline: none; width:100%; padding:10px; border:none; background:var(--light); margin-bottom:20px; }
.error { color:red; }
select { border: none; background:var(--light);    padding: 10px; border-radius: 5px;}
input.btn { padding:12px 24px; cursor:pointer; }
/* === footer ====== */

footer { background:var(--dark); padding:40px; color:#fff; text-align:center; }