html,body { height:100%; color: var(--notBlack); font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 300; }

:root {
    --darkPurple: #7887ad;
    --mediumPurple: #8d9fcb;
    --lightPurple: #8d9fcb;
    --midGrey: #666;
    --notBlack: #394155;
    --grape: #5d1451;
    --gold: #ad9e78;
    --darkerPurple: #48516a;
    --red: #8b0000;
}

header { transition:all 0.3s ease; position:fixed; top:0; left:0; width:100%; height:60px; background:none; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index:100; }
.scrolled header {  background:var(--notBlack);}
/* === home Slider ====*/

  #all_slides {
            position: relative;
            height: 100vh;
            padding: 0;
            margin: 0;
            list-style-type: none
        }

        .slide {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s
        }

        .slide.active {
            opacity: 0.5;
            z-index: 2
        }

        .controls {
            display: none;
        }

        .slide {
            font-size: 40px;
            padding: 0;
            box-sizing: border-box;
            background: #333;
            color: #fff;
            background-size: cover
        }

        

        .controls {
            display: none;
            position: relative;
            top: 1rem;
            right: .5rem;
            border: none;
            outline: none;
            font-size: 20px;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 1.5rem;
            background: gold;
            width: 3rem;
            height: 3rem;
            margin-left: .5rem
        }

        .controls:hover,
        .controls:focus {
            background: #eee;
            color: #333
        }

        .container {
            position: relative
        }

        .buttons {
            position: absolute;
            right: .5rem;
            top: 0;
            z-index: 10;
            font-size: 0
        }
        
        
        /* === 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:1s;
}
.animated2 {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:1.4s;
}
.animated3 {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:1.8s;
}
.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
/* === magnify ===== */

.magnify { pointer-events:none;width:40px; position:absolute; object-fit:contain; padding:10px; right:10px; bottom:5px; }

/* logo ==== */

@media screen and (max-width:1023px) {
.logo { width:80px; position:absolute; left:50%; top:0; transform:translate(-50%,0); opacity:1; transition:all 0.4s ease; }

}
@media screen and (min-width:1024px) {
.logo { width:110px;position:absolute; left:40px; top:-10px; transform:translate(0,0); opacity:1; transition:all 0.4s ease; }
header { height:80px; }
.magnify { right:20px; bottom:10px; }

}

@media screen and (min-width:1224px) {
.logo { width:140px; }

}

/* nav ==== */

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

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(--darkPurple); 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; text-align:center; width:100%; height:100%; }
nav li a { color:#fff; display:block; text-decoration:none; font-size:24px; padding:10px; }
nav ul ul li a { font-size:18px;padding:5px; }

.menuOpen nav { opacity:1; pointer-events:inherit; }

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

.burger { background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  left:20px; top:5px;  z-index: 300; }
.burger span {  transition: all 0.4s ease; display: block;  background: var(--darkPurple);  width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }

.burger:before,
.burger:after {  content: "";  display: block;  background: var(--darkPurple);  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;}



}
/* --
@media screen and (max-width:380px) {
    .logo { width:270px; position:absolute; right:20px; top:50%; transform:translate(0,-50%);}
}
*/

@media screen and (min-width:1024px) {
    /*
    .logo { position:absolute; max-width:300px; left:40px; top:50%;transform:translate(0,-50%); }
*/
    .burger {  display:none; }
    nav > ul { display:flex; justify-content:flex-end; padding:20px; max-width:1200px; margin:0 auto; }
    nav li { padding:2px 10px;position:relative;  }
    nav li a { font-size:14px;color:#fff; padding:8px 0; display:block; line-height:24px; text-decoration:none; white-space:nowrap; }
    nav li a:hover:after,
        nav li.active > a { color:var(--darkPurple); }
        nav li > a:hover { color:var(--gold); }

    nav ul ul { text-align:center;transition:all 0.3s ease; display:block;opacity:0; pointer-events:none;position:absolute; padding:10px;left:50%; transform:translateX(-50%); top:60px; background:var(--darkerPurple);  }
    nav ul li:hover > ul { opacity:1;pointer-events:all; top:40px; border-radius:10px; }
    nav ul ul li a:hover, nav ul ul li.active a { color:var(--gold); }
    nav ul ul li a { padding:6px 20px; }
}
@media screen and (min-width:1224px) {
    nav li a { font-size:16px; }
}
.content { width:100%; max-width:1200px; margin:0 auto; padding:20px; }
.contentStyles ul,
.textList { list-style:disc; padding-left:20px; margin-bottom:20px; }
.contentStyles li,
.textList { margin-bottom:12px; }
.contentStyles h2,
.contentStyles h3 { margin-bottom:20px; }

h1,.h1 { font-size:28px;font-family:"Playfair Display", serif; color:var(--notBlack); }
h2,.h2 { font-size:20px;font-family:"Playfair Display", serif; color:var(--darkPurple); line-height:150%; }
h3,.h3 { font-size:18px; line-height:140%;color:var(--red); }
h4,.h4 { font-size:16px; }
p, .p { font-size: 16px;margin-bottom: 6px; margin-top:0; line-height:150%; }
p a { text-decoration:none; display:inline-block; color:var(--darkPurple); }
p a:after { content:""; display:block; width:0; height:1px; background:var(--notBlack); transition:width 0.3s; }
p a:hover:after { width:100%; }

.textList { padding-left:14px;}
.textList ul { padding-left:14px;}
.textList li { list-style:disc; padding-left:4px; margin-bottom:4px;}

.colorWhite { color:#fff; }

@media screen and (min-width:768px) {
.content {padding:40px; }
h1,.h1 { font-size:36px; }
h2,.h2 { font-size:24px;}
}

.divider { border-top:1px dashed #ccc; padding-top:20px; margin-top:40px; }

/* === hero ==== */
.hero:before { content:""; width:100%; height:100px; background: rgb(0,0,0); z-index:1;
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);position:fixed; top:0; left:0;}

.hero{ width:100%; height:280px; position:relative;background:#000; }
@media screen and (min-width:768px) {
    .hero{ height:400px;  }

}
.hero img { width:100%; height:100%; object-fit:cover; opacity:0.85; }
.hero h1 { font-size:30px;  line-height:120%; color:#fff; }
.hero .content { z-index:10; position:absolute; left:50%; top:60%; height:100%; transform:translate(-50%,-50%); display:flex; align-items: center;
flex-direction: column; justify-content: center; }

@media screen and (min-width:768px) {
.hero h1 { font-size:50px; }

}
.homeHero { height:100vh; } 
.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;}
    
}
/* === reducing costs ===== */


/* === teamList ==== */

.teamList { display:flex; flex-wrap:wrap; }
.teamList > div:first-child,
.teamList > div:nth-child(2) {  width:100%; align-items:flex-start;}

.teamList > div { display:flex; width:50%; flex-direction:row; padding:30px; }
.teamList img { width:140px; height:140px; border-radius:50%; margin-right:20px; }

/* === tables ===== */

table { width:100%; margin-bottom:20px;}
td { padding:6px 12px; }
td:last-of-type { text-align:right; }
tr { background:#f6f2f2; }
tr:nth-child(even) { background:#e1d2d2; }





/* === cards ==== */
ul.cards { padding:0;display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;}
.cards > li { list-style:none;width:33%; padding:20px;  }
.cards > li > div { display:flex; flex-direction:column; align-items:flex-start; padding:20px; border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.1); height:100%; }
.cards li img { width:100%; height:auto; margin-bottom:20px; border-radius:3px; }
.cards li .btn { margin-top:auto; }

ul.cardsWide { padding:0;display:flex; flex-wrap:wrap; justify-content:flex-start;}
ul.cardsWide > li { width:100%;display:flex;align-items:flex-start; margin-bottom:20px; }
.cardsWide > li > div { width:100%;display:flex; flex-direction:row; align-items:flex-start; padding:20px; border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.1); height:100%; }

.cardsWide li img { width:200px; aspect-ratio:1/1; object-fit:cover;margin-bottom:0; border-radius:3px 3px 0 0; margin-right:40px; }
@media screen and (max-width:1024px) {

.cards > li { width:100%;  }

}
/* =========== Steps ============= */

.steps { display: grid;  grid-template-columns: auto auto auto; grid-gap:20px;}
.steps span { font-size:20px; font-weight:400;width:80px; height:80px; display:flex; align-items:center; justify-content:center; padding:10px; background:var(--gold); color:#fff; border-radius:50%; margin-bottom:10px;}

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

label { display:block; }
input[type="text"], textarea { -webkit-appearance: none;  outline: none; width:100%; padding:10px; border:1px solid var(--darkPurple); background:#efefef; margin-bottom:20px; }
.error { color:red; }


/* === reviews === */

.logos { background:#fff; padding:40px 0; margin:20px 0; }
.logos img { width:260px; height:200px; padding:20px; object-fit:contain; } 

.callout { background:var(--lightPurple); padding:20px; margin:20px 0 40px 0; border-radius:10px; }
section > .callout { border-radius:0; }
.callout h2,.callout h3, .callout p, .callout li { color:#fff;}
.btn { font-size:16px;-webkit-appearance: none;background:var(--notBlack); cursor:pointer;  border:none;color:#fff; padding:8px 14px; border-radius:5px; text-decoration:none; display:inline-block; }
.btn:hover { background:#333; }

.shoutout { background:var(--notBlack); }
.shoutout .btn { background:var(--darkPurple); }
.shoutout .btn:hover { background:var(--mediumPurple); }

@media screen and (min-width:768px) {
.callout {padding:40px; }

}


/* === footer ====== */


footer { padding:40px; text-align:center; background:var(--notBlack); color:#fff; }
footer h2, footer h3, footer a { color:#fff; }