/*
DARKEST: #0c3950
Base:    #114f6f ; R: 17, G: 79, B: 111
R stem:    #5490a3 ; R: 84, G: 144, B: 163
Big triangle:    #5d9bb0 ; R: 93, G: 155, B: 176 
Middle triangle:    #88c2d1 ; R: 136, G: 194, B: 209
Little triangle:     #c3e9ef ; R: 195, G: 233, B: 239
LIGHTEST/palest: #ebf7f9
*/



/**************************************************/
/****************UNIVERSAL THINGS******************/
/**************************************************/

:root {
    --darkest-teal: #0c3950;
    --dark-base-teal: #114f6f;
    --body-teal: #5490a3;
    --body-teal-variant:#5d9bb0;
    --medium-teal:#88c2d1;
    --light-teal:#c3e9ef;
    --lightest-teal:#ebf7f9;
    --dark-gold: hsl(47, 77%, 40%);
    --logopadwidth: 5vw;
  }

*,
*::before,
*::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 7vh !important;
}

html, body {
    height:auto;
    min-height: 100vh;
    min-width:100%;
    display: flex; 
    flex-direction: column;
    color:white;
}

@font-face {
    font-family: "LemonMilk";
    src: url("./LEMONMILK-Regular.otf");
  }
@font-face {
    font-family: "LemonMilkBold";
    src: url("./LEMONMILK-Medium.otf");
  }
  @font-face {
    font-family: "LemonMilkLight";
    src: url("./LEMONMILK-Light.otf");
  }
  @font-face {
    font-family: "LemonMilkProUltraLight";
    src: url("./Lemon-Milk-Pro-UltraLight.otf");
  }


body {
    font-family: "Libre Franklin", sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0%;
    color:white;
    background-color: var(--darkest-teal);
    overflow-x:hidden;
    position:absolute;
    text-wrap:wrap;
}

p {
    padding-top:2px;
    padding-bottom:5px;
    font-weight:normal;
    font-size:1.1rem;
    font-weight:500;
}

.section-title {
    font-size:2.5rem;
    padding-top:1vh;
    padding-bottom:3.5vh;
    margin-bottom:0;
    font-family: "LemonMilk";
    font-weight:500;
}

header {
    font-family: "LemonMilk", sans-serif;
    text-align: center;
    position: relative;
	position:fixed;
    width: 100%;
    min-height: 28vh;
    background-color: rgba(255,255,255, 1);
    color:var(--dark-base-teal); 
    /*clip-path: polygon(100% 0, 100% 20%, 50% 40%, 0 20%, 0 0); */
    /*polygyon: the 20%s are how far up/down the corners are; 50% is where horizontally the point is; 40% is how far down the point is*/
    /*best documentation for this: https://verpex.com/blog/website-tips/css-shapes-the-triangle */
    margin-bottom:-150px;
    z-index:2;
    opacity:0;
    animation: slideInDown 1s forwards;
    animation-timeline: auto;
    animation-range: normal;
}
.header-skewed {
    clip-path: polygon(100% 0, 100% 26%, 20% 40%, 0 26%, 0 0); 
    -webkit-backface-visibility:hidden;
    outline: 2px solid transparent;
    will-change: transform;
    position:fixed;
    /*polygyon: the 20%s are how far up/down the corners are; 30% is where horizontally the point is; 40% is how far down the point is*/
}

@keyframes slideInDown {
    0% {
        /*transform: scaleY(0);*/
        transform: scaleY(0);
        transform-origin: 0% 0%;
    }

    100% {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity:1;
    }
}

.dilate-skewed-strip {
    position: absolute;
	position:fixed;
    /*top:5px;*/
    width: 100%;
    height: 28vh;
    background-color: var(--medium-teal);
    clip-path: polygon(0% 28%, 0% 26%, 20% 40%, 100% 26%, 100% 28%, 20% 47%); 
    -webkit-backface-visibility:hidden;
    outline: 2px solid transparent;
    will-change: transform;
    /*polygyon: the 20%s are how far up/down the corners are; 30% is where horizontally the point is; 40% is how far down the point is*/
    z-index:150;
    opacity: 0;
    animation: fadeIn 1s forwards;
}
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

.dilate-skewed-background {
    position: absolute;
	position:fixed;
    /*top:5px;*/
    width: 100%;
    height: 28vh;
    background-color: var(--medium-teal);
    filter: blur(10px);
    clip-path: polygon(100% 0%, 100% 28%, 20% 47%, 0% 28%, 0% 0%); 
    -webkit-backface-visibility:hidden;
    outline: 2px solid transparent;
    will-change: transform;
    /*polygyon: the 20%s are how far up/down the corners are; 30% is where horizontally the point is; 40% is how far down the point is*/
    z-index:1;
    opacity: 0;
    animation: fadeIn 1s forwards;
}
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

.dilate-skewed-white {
        position: absolute;
        position:fixed;
        /*top:5px;*/
        width: 100%;
        height: 28vh;
        background-color:#FFFFFF;
        clip-path: polygon(100% 0%, 100% 26%, 20% 47%, 0% 26%, 0% 0%); 
        -webkit-backface-visibility:hidden;
        outline: 2px solid transparent;
        will-change: transform;
        /*polygyon: the 20%s are how far up/down the corners are; 30% is where horizontally the point is; 40% is how far down the point is*/
        z-index:0;
        opacity: 1;
        animation: fadeOut 1s forwards;
        animation-timeline: scroll();
        animation-range: 0% 100vh;
    }
    @keyframes fadeOut {
        to {
            opacity: 0;
        }
    }


.header-skewed, .dilate-skewed-background, .dilate-skewed-strip {
    outline: 2px solid transparent;
    will-change: transform;
    animation: slideInDown 1s forwards, shrinkup 0.5s forwards;
    animation-timeline: auto, scroll();
    animation-range: normal, 0% 50vh;
}
    @keyframes shrinkup {
        to {
            transform:scaleY(0.9);
            transform-origin: 0 0;
        }
    }
header  nav > ul > * {
    animation: shrink 0.5s forwards;
    animation-timeline: scroll();
    animation-range: 0% 50vh;
}
    @keyframes shrink {
        to {
            transform:scale(0.9);
            transform:scaleY(1.1);
            
        }
    }


nav {
    display: flex;
    width: 100%;
    height: 5.5rem;
    background-color: transparent;
    min-width: 1%;
    padding-right:1%;
    position:relative;
}

nav ul {
    position:absolute;
    display:flex;
    flex-shrink:1;
    width:100%;
    margin-left:-5%;
    /*margin-right:-2%;*/
    padding-right:5vw;
    height:10vh;
    margin:0 auto;
    top:-0.75vh;
    alignment-baseline:middle;
    align-items:center;
    justify-content:space-around;
    list-style-type: none;
}

nav a {
    color:var(--dark-base-teal);
    font-size: 1.5rem;
    text-align: right;
    vertical-align:middle;
    vertical-align:-webkit-baseline-middle;
    margin-top: 0.25%;
    margin-bottom: 0.5%;
    padding:15px;
    text-decoration:none;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration-color: transparent;
    -webkit-text-decoration-color: transparent;
    -moz-text-decoration-color: transparent;
}


nav #iconcontainer {display:none;margin-right:-6vw;}
nav a.icon {
    display:inline-flex;
    position:relative;
    /*top:0;right:0 !important;*/
    max-width:100px;
    max-height:100px;
    text-align:right;
    margin-top: auto;
    color:var(--dark-base-teal);
    font-size: 1.7rem;
    text-decoration:none;text-transform:uppercase;font-weight:bold;text-decoration-color:transparent;
    -webkit-text-decoration-color: transparent;
    -moz-text-decoration-color: transparent;
    transition: 0.5s all ease-in-out; 
    }

/*************UNDERLINE ON NAV LINKS*****************/
nav li a {
    color:var(--dark-base-teal); 
	filter: drop-shadow(0 0 0.75rem rgba(255,255,255, 1)) drop-shadow(0 0 0.75rem rgba(255,255,255, 1)) drop-shadow(0 0 0.75rem rgba(255,255,255, 1));
    padding-bottom: .15em;
    background-image: linear-gradient(to right, var(--dark-gold)); /* update the color here */
    background-size: 0em 0.15em; /*width and height*/
    background-position: 50% 100%; /*x and y within the a element [text box]*/
    background-repeat: no-repeat;
    background-blend-mode:normal;
    transition: 0.45s linear, background-size .2s 0.25s linear; /*SECOND NUMBER IS THE DELAY*/
    -webkit-transition: 0.45s linear, background-size .2s 0.25s linear; /*SECOND NUMBER IS THE DELAY*/
    -webkit-transform: translateZ(0);
    }

.teal {
    background-image: linear-gradient(to right, var(--dark-gold));
    animation: turnteal 1s forwards !important;
    animation-delay:0 !important;
}
    @keyframes turnteal {
        100% {background-image: linear-gradient(to right, var(--medium-teal)) !important;}
    }

nav a:hover, nav li:hover {
    background-size: 80% .15em; /*, .15em 85%, .15em 85%;*/
    background-position: 50% 100%, 100% 100%; /*, 8% 85% , 92.5% 100%;*/
    /*transform:scale(1.1);*/
    letter-spacing: 1px;
    }

nav ul:hover a:not(:hover):not(.icon) {
    color:var(--body-teal);
    animation: all 3s ease-in-out forwards;
}

#headerlogo:hover ~ li a {
    color:var(--dark-base-teal)
}

#stoplabel:hover ~ li a, #startlabel:hover ~ li a {
    color:var(--dark-base-teal); 
}

.headerlogo {
    filter: drop-shadow(0 0 0.75rem rgba(255,255,255, 1)) drop-shadow(0 0 0.75rem rgba(255,255,255, 1)) drop-shadow(0 0 0.75rem rgba(255,255,255, 1));
    position:relative;
    display: flex;
    flex-direction: column;
    align-self:end;
    padding:0;
    padding-left: 5vw;  
}

.headerlogo img {
    max-height:7.5vh;
    min-height:30px;
    width:auto;
    max-width:80vw;
    height:auto;
    padding-top:0.75vh;
}

.bonuselement {
    text-align: left;
    margin-right:-5%;
    padding-right: 5%;
    position:relative;
    top:0%;
    left:25px;
}

#mobilemenu {
	position:fixed;
	background-color: #FFFFFF;
	border-radius: 3%;
	width:240px;
	right:3%;
	top:10vh;
	z-index:200;
	min-width: 0;
	max-height:0;
	height:auto;
	overflow: hidden;
	outline:var(--medium-teal) solid 5px;
    display:none;
}

	#mobilemenu.open {
        display:block;
		animation: fullheight 1s forwards ease-in-out;
	}
	@keyframes fullheight {
		100%{ 
			max-height:100%;
		}
	}

	#mobilemenu.closed {
        display:block;
		animation: closeheight 0.5s forwards ease-in-out;
	}
	@keyframes closeheight {
		0%{ 
			max-height:100%;
		}
		99% {outline:var(--medium-teal) solid 5px;}
		100%{ 
			max-height:0;
			outline:transparent;
		}
	}

	#mobilemenu ul {
		display:flex;
		position: relative;
		width:100%;
		margin:0;
		padding:0;
		left:0;
		flex-direction:column;
		align-items: top;
		justify-content: space-evenly;
		text-align: center;
		transition:all 0.2s linear;
	}

	#mobilemenu li {
		display:inline-flex;
		position: relative;
		flex-direction:column;
		height:auto;
		transition: 0.6s linear;
		border-bottom: var(--medium-teal) solid 3px;
		flex-grow: 1;
		justify-content: center;
		padding-top: .95em;
		padding-bottom: 1em;
		transition:all 0.2s linear;
		}
	#mobilemenu li a {
		font-size:1.5em;
		font-family:"LemonMilk";
		color:var(--dark-base-teal); 
		text-decoration: none;
	}
	#mobilemenu li:hover, #mobilemenu li:active {
		/*background-color:var(--dark-base-teal);*/
		background-color:rgba(17, 79, 111, 1);
	}
	#mobilemenu li:hover a, #mobilemenu li:active a {
		color:#FFFFFF;
	}

	#mobilemenu.open > #mobilemenu ul {opacity:1;}
	#mobilemenu.closed >  #mobilemenu ul {transition-delay:0.05s;opacity:0;}
	#mobilemenu.open > #mobilemenu li {opacity:1;}
	#mobilemenu.closed > #mobilemenu li {transition-delay:0.05s;opacity:0;}




    .tagline {
    font-size:2rem;
    padding-top:5px;
    font-family: "LemonMilkProUltraLight";
}

.wrapper {
    display:grid;
    grid-template-columns: repeat(1fr,2);
    max-width:100%;
    text-align: left;
    border-radius: 0%;
    overflow-x:hidden;
	z-index:0;
    align-content: center;
    gap:0;
}

.wrapper>section {
    grid-column: col 1 span 2;
    padding-top:7vh;
    padding-bottom:7vh;
}
.wrapper>section>*{
    /*border:10px solid black;*/
    padding-left:10vw;padding-right:10vw;
}
/*CENTERED TITLES NEED MORE SPACE, FIX THIS*/

.wrapper>section:nth-child(1) {
    background:#FFFFFF;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-bottom:0;
}
.wrapper>section:nth-child(3n+2)
{
    background:#FFFFFF;
    color:var(--darkest-teal);
    padding-left:5vw;
    padding-right:5vw;

}
.wrapper>section:nth-child(3n+3)
{
    background:var(--body-teal);
    color:#FFFFFF;
    padding-left:5vw;
    padding-right:5vw;
}
.wrapper>section:nth-child(3n+4)
{
    background:var(--darkest-teal);
    color:#FFFFFF;
    padding-left:5vw;
    padding-right:5vw;
}


#home1 {grid-column:1 / span 3;grid-row:1;
    padding:0;
    padding-top:7vh;
    background:linear-gradient(to right, #f5f5f5,#f5f5f5, #e5e5e5);
}
#home2 {grid-column:4 / span 4;grid-row:1;
    background:var(--darkest-teal);
    align-content:center;
    padding-top:10vh;
    padding-bottom:3vh;
    padding-left:5vw;
    padding-right:5vw;
    color:#FFFFFF;
    text-align:left;
}

#aboutus {margin:0;padding:0 !important;}

#aboutus #bgdiv {width:100%;margin:0;padding:0;background-color: rgba(255,255,255,0.85);background-image:url('mountains.png');background-blend-mode:lighten;background-size:100%;-webkit-background-size:cover;}
#aboutus .container {opacity:0;margin-left:auto;margin-right:auto;padding-bottom:8vh;padding-top:5vh;width:70vw;text-shadow: #FFFFFF -1px -1px;}

.aboutfadein {
    animation:opacfadein 1.5s forwards;
    animation-delay: 0;
    animation-iteration-count: 1
}
@keyframes opacfadein {
    to {opacity:1;}
}



#services {
    align-content:center;
    text-align:center;
    margin:0;
    padding-top:4vh;padding-bottom:10vh;
}

#servicestitlecontainer {
    padding-top:0;
    /*
    animation: opacfadein 1s forwards;
    animation-timeline: scroll(root);
    animation-range: 0% 1%;
    animation-delay: 0;
    }
@keyframes opacfadein {
    from {opacity:1;}
    to {opacity:1;}*/
}
#servicestitlecontainer p {width:60%;}

#services h2 {
    /*
    animation:reveal 2s forwards;
    animation-timeline: scroll(root);
    animation-range: 0% 1%;
    animation-delay: 0;
}
@keyframes reveal {
    from {
        opacity:1;
    }
    to {opacity:1;}*/
}

#chevroncontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 35%;
    background:#FFFFFF;
    animation: shrinkonscroll 1s forwards;
    animation-timeline: scroll(root);
    animation-range: 0% 1vh;
    }
@keyframes shrinkonscroll {
    to {height:1vh;}
}

.chevron {
    position: absolute;
    position:fixed;
    bottom:15vh;
    width: calc(0.75rem * 3.5);
    height: calc(0.75rem * 0.8);
    opacity: 0;
    transform: scale(0.3);
    animation: move-chevron 3s ease-out infinite;
    margin-top:-15vh;
}

.chevron:first-child {animation: move-chevron 3s ease-out 1s infinite;}
.chevron:nth-child(2) {animation: move-chevron 3s ease-out 2s infinite;}

.chevron:before,.chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background:var(--dark-base-teal);
    animation: disappearchevrons2 1s forwards;
    animation-timeline: scroll(root);
    animation-range: 0% 1vh;
    }
@keyframes disappearchevrons2 {
    to {
        opacity:0;
    }
}

.chevron:before {
    left: 0;
    transform: skewY(30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
}

@keyframes move-chevron {
    25% {opacity: 1;}
    33.3% {
    opacity: 1;
    transform: translateY(calc(0.75rem * 3.8));
    }
    66.6% {
    opacity: 1;
    transform: translateY(calc(0.75rem * 5.2));
    }
    100% {
    opacity: 0;
    transform: translateY(calc(0.75rem * 8)) scale(0.5);
    }
}

.subcontainer {
    display:flex;width:100%;justify-content:space-around;gap:3.5vw;
}

.flexsubdiv {
    display:flex;flex:1;justify-content:top;flex-direction:column;text-align:center;min-width:30%;
}

.flexsubdiv li {
    padding-bottom:1.5vh;
    list-style-type:none;
    /*list-style-position:outside; DOESN'T WORK because of :before*/
    text-align:left;
    margin-left:1.75rem;
}
.flexsubdiv li:before {
    content: "\25B2";
    padding-right:0.75rem;
    color:var(--body-teal);
    margin-left:-1.75rem;
}

.svggoldbg {
    background:linear-gradient(to right, #FFFFFF,var(--dark-gold) 10%,var(--dark-gold) 90%,#FFFFFF 100%);
    background-size:70% 70%;
    background-position:center;
    background-repeat: no-repeat;
    border-radius:50px;
}

#bios {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    min-width:100%;
    align-content:center;
    gap:0;
    padding-left:12vw;padding-right:12vw;margin:0;
    width:100%;
    
}
#bios div {padding:0;padding-bottom:5.5vh;}
#bios img {width:70%;margin-left:auto;margin-right:auto;}
.bio {grid-column: 2 / span 3;margin:0;min-width:100%;}
.bio p {text-align:left;font-weight:normal;min-width:100%;padding-left:1.5vw;}
#bios div:not(.bio) p {font-size:1.5rem;}

#elevate {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:1vw;
    align-content:center;
    background: linear-gradient(
        60deg,
        var(--medium-teal) 0%,
        var(--medium-teal) 40%,
        var(--body-teal-variant) 40%,
        var(--body-teal-variant) 100%
      ),
      linear-gradient(
        60deg,
        var(--medium-teal) 0%,
        var(--medium-teal) 40.01%,
        var(--body-teal-variant) 40.01%,
        var(--body-teal-variant) 100%
      ) ;
    background-blend-mode:soft-light;
}

#elevate1 {
    grid-column: 1 / span 2;
    grid-row:1;
    margin:auto;
    padding:3vh;
    padding-right:10vw;
    outline: 1px solid transparent;
}

#elevate2 {
    grid-column: 3 / span 3;
    grid-row:1;
    margin:auto;
    padding:3vh;
    margin-right:10vw;
    padding-left:1vw;
    outline: 1px solid transparent;
}

#elevateyouredge {font-size:4em;padding:0;margin-top:0;text-align:right;}

#elevatetextcontain {
    transform:skewX(35deg);
    -webkit-transform:skewX(35deg);
}

.elevatequestion {font-weight:800;font-size:1.33rem;margin-bottom:-1.5vh;transform:skewX(-35deg);-webkit-transform:skewX(-35deg);}
.elevateanswer {font-weight:400;padding-bottom:1.75vh;transform:skewX(-35deg);-webkit-transform:skewX(-35deg);}
.elevateanswer_last {font-weight:400;padding-bottom:0;transform:skewX(-35deg);-webkit-transform:skewX(-35deg);}

#contactus {grid-column: col 1 span 2;padding-bottom:5vh;}


#process {margin-left:-2.5vw;padding-left:0;padding-right:0;padding-bottom:8vh}
#process .section-title {margin-left:1.5vw;}


/******titles/bold*******/
.slidecontainer1 { grid-column: 1 / span 1;grid-row:1;margin-bottom:3vh;text-align:left;}
    .slidecontainer1 p {text-align:left;}

.slidecontainer2 { grid-column: 2 / span 1;grid-row:3;margin-bottom:3vh;margin-left:0.5vw;margin-right:2.5vw;text-align:center;}
    .slidecontainer2 p {text-align:center;}

.slidecontainer3 { grid-column: 3 / span 1;grid-row:5;margin-bottom:3vh;text-align:left;}
    .slidecontainer3 p {text-align:left;}

.slidecontainer1 p,.slidecontainer2 p,.slidecontainer3 p {font-family:'LemonMilkProUltraLight';font-weight:900;font-size:1.9rem;}


/******subtext/smaller*******/
.slidecontainer4 { grid-column: 1 / span 1;grid-row:2;margin-bottom:-5vh;text-align:left;}
.slidecontainer5 { grid-column: 2 / span 1;grid-row:4;margin-bottom:-5vh;margin-left:0.5vw;margin-right:2.5vw;text-align:center;}
.slidecontainer6 { grid-column: 3 / span 1;grid-row:6;margin-bottom:0;text-align:left;}

.slidecontainer4 p,.slidecontainer5 p,.slidecontainer6 p {font-weight:300;font-size:1rem;}


/******borders and spacing*******/
.slidingborder1 {margin-bottom:-15px;margin-right:-4px;padding-left:3vw;height:100%;position:relative;animation:slideInRight 1s forwards;animation-delay:0}
.slidingborder1::before {
    content:'';position:absolute;background:linear-gradient(to right, transparent,transparent, var(--dark-gold));height:5px;width:105%;left:-10%;top:90%;z-index:0;border-radius: 3px;transform: scaleY(0);transform: scaleX(0);
    animation:borderslideRight 1s linear forwards, glowpulseleft 1s ease forwards;
    animation-delay:0.5s;
}

.slidingborder2 {margin-bottom:-15px;height:100%;position:relative;transform:scaleX(0); animation:slideInRight 1s forwards;animation-delay:0.5s}
.slidingborder2::before {
    content:'';position:absolute;background:linear-gradient(to right, transparent,transparent,  var(--dark-gold));height:5px;width:100%;left:2.5%;top:90%;z-index:0;border-radius: 3px;transform: scaleY(0);transform: scaleX(0);
    animation:borderslideRight 1s linear forwards, glowpulseboth 1.5s ease forwards;
    animation-delay:1s;
}

.slidingborder3 {margin-bottom:-15px;margin-right:-4px;padding-left:3vw;height:100%;position:relative;transform:scaleX(0); animation:slideInRight 1s forwards;animation-delay:1s}
.slidingborder3::before {
    content:'';position:absolute;background:linear-gradient(to right, transparent,transparent, var(--dark-gold));height:5px;width:100%;left:-0%;top:90%;z-index:0;border-radius: 3px;transform: scaleY(0);transform: scaleX(0);
    animation:borderslideRight 1s linear forwards, glowpulseright 2s ease forwards;
    animation-delay:1.25s;
}

.slidingborder4 {margin-bottom:-5px;margin-right:-4px;padding-left:3vw;height:100%;position:relative;animation:slideInRight 1s forwards;animation-delay:0.25s}
.slidingborder5 {margin-bottom:-5px;margin-left:12px;height:100%;position:relative;transform:scaleX(0); animation:slideInRight 1s forwards;animation-delay:0.75s}
.slidingborder6 {margin-bottom:-5px;margin-right:-4px;padding-left:3vw;height:100%;position:relative;transform:scaleX(0); animation:slideInRight 1s forwards;animation-delay:1.25s}


    @keyframes borderslideRight {
        0% {transform: scaleX(0);transform-origin: 0% 0%;}
        99.9% {transform: scaleX(1);transform-origin: 0% 0%;opacity:0.8;}
        100% {transform: scaleX(1);transform-origin: 0% 0%;opacity:0.8;background-color:var(--dark-gold)}
    }

    @keyframes borderslidedown {
        0% {transform: scaleY(0);transform-origin: 0% 0%;}
        99.9% {transform: scaleY(1);transform-origin: 0% 0%;opacity:0.8;}
        100% {transform: scaleY(1);transform-origin: 0% 0%;opacity:0.8;background-color:var(--dark-gold)}
    }

    @keyframes glowpulseleft {
        50% {background-color:var(--dark-gold)}
        100% {background-color:none;background:linear-gradient(to left,var(--dark-gold),var(--dark-gold),transparent);}        
    }

    @keyframes glowpulseright {
        50% {background-color:var(--dark-gold)}
        100% {background-color:none;background:linear-gradient(to right,var(--dark-gold),var(--dark-gold),transparent);}        
    }

    @keyframes glowpulseboth {
        50% {background-color:var(--dark-gold)}
        100% {background-color:none;background:linear-gradient(to right, transparent,var(--dark-gold),var(--dark-gold),var(--dark-gold),transparent);}        
    }
        @keyframes slideInRight {
        0% {
            transform: scaleY(0);
            transform-origin: 100% 1000%;
        }
    
        100% {
            transform: scaleY(1);
            transform-origin: 100% 100%;
        }
    }

#FAQ, #FAQ * {
    background-color: #675518;
    color:white;
    font-weight: 300;
    text-shadow: none;
    margin-left:-1.5vw;margin-right:-1.5vw;
    }
#FAQ .subtitle {
    color:#ceac30;
    font-size:1.5rem;
    padding-top:1vh;
    padding-bottom:0vh;
    margin-bottom:0;
    font-family: "LemonMilkProUltraLight";
    font-weight:900;
    }
#FAQ p {margin-top:0.5vh;}

    .footer span {
        padding:8px;
    }

.contactform {
    display:inline-block;
    position:relative;
    min-height:700px;
    height:auto;
    min-width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:none;
    border:none;
    color:var(--darkest-teal);
    font-family:"Libre Franklin", sans-serif;
    font-weight:300;
    vertical-align: top;
}

#prefooter {
    background:whitesmoke;
    color:var(--darkest-teal);
    padding-top:0;
    padding-right:0;
    padding-left:0;
    padding-bottom:5vh;
    margin:0;
}
#prefooter * p {text-align: left;font-size:0.95rem;padding:0;text-wrap:balance;}
#prefooter .section-title {
    padding-left:0; 
    padding-bottom:1.25vh;
    text-align:left;
}
#prefooter .subcontainer {margin:0;padding:0;gap:0;width:100%;flex-direction:row; flex-wrap: nowrap;justify-content:stretch;}
#prefooter #icondiv {flex-basis:44%;flex-shrink:0;}
#prefooter .flexsubdiv {flex:1 0 28%;margin:0;flex-wrap: nowrap;padding-right:1vh}
#prefooter .flexsubdiv div, #prefooter .flexsubdiv div div {padding:0;margin:0;}
#prefooter .flexsubdiv div p {text-align:left;font-family:'LEMONMILK'; font-weight:400; font-size:0.75rem;padding-left:2px;}
#prefooter .flexsubdiv div img {margin:0;padding:0;min-width:80px;max-width:80px}
#LIdiv a img, #FBdiv a img {transition: transform 0.5s ease-in-out;
    transition-timing-function: cubic-bezier(0.5 0.5 0.5 0.1);
}
#LIdiv a:hover img, #FBdiv a:hover img {transform:scale(1.1);-webkit-transform:scale(1.1);}
#prefooter .section-title {font-size:1.33rem}
#prefooter img {max-height:240px;padding:2vw;margin-left:auto;margin-right:auto;}
#prefooter #FBdiv{margin-right:1.5vh}



.footer {
    position: absolute;
    bottom:0px;
    width: 100%;
    min-height: 20rem;
    background-color: var(--medium-teal);
    clip-path: polygon(100% 100%, 100% 100%, 70% 80%, 0 100%, 0 100%); 
    /*polygyon: 70% is where horizontally the point is; 80% is how far down the page the point is*/
    margin-bottom:0px;
    opacity: 1;
    }

    .footer span {
        color: var(--darkest-teal);
		font-family: "LemonMilkLight";
        text-align: center;
        position: absolute;
        bottom:0;
        width: 100%;
        font-weight: bold;
		font-size: 0.95rem;
        padding: 10px;
    }



/**************************************************/
/*********************BUTTON***********************/
/**************************************************/


a button, button {
    color:white;
    background:#675618;
    display: inline-block;
    position:relative;
    height:40px;
    text-align:center;
    vertical-align: middle;
    width: auto;
    min-width:190px;
    padding-left:5px;padding-right:5px;padding-bottom:7px;
    margin-top:20px;padding-top:8px;margin-bottom:15px;
    vertical-align: middle;
    cursor:pointer;
    font-family: "LemonMilk", sans-serif;font-weight:bold;font-size:1rem;font-weight:500;
    text-transform: uppercase;text-shadow: none;
    box-shadow:inset 0px 0px 1px 1px #FFF;
    text-shadow: 1px 1px 0 #000;
	-webkit-backface-visibility: hidden;
    opacity:1;
    border-radius: 3px;
    transition: letter-spacing 0.5s ease-in-out, scale 0.8s ease-in-out;
    transition-timing-function: cubic-bezier(0.5 0.5 0.5 0.1);
    }

a:hover button {
    font-size: 1.06rem;
    letter-spacing: 1.5px;
    padding-top:7px;
}

.darkbutton {
    background:var(--dark-base-teal);
    color:#FFFFFF;
    font-weight:normal;
    box-shadow:none;
    text-shadow:none;
}


/**************************************************/
/**********SIZE SENSITIVE THINGS HERE**************/
/**************************************************/




/*********************MOBILE***********************/

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

    *::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 7.5vh !important;
    }
    

    #contactus {grid-column: col 1 span 2;padding:0;margin:0;margin-left:-2.5vw;padding-top:5vh;padding-bottom:5vh;}

  
    #process {padding-left:0;margin-left:-3.5vw;}
    #process .subtitle {padding-bottom:0.5vh;}
    /******titles/bold*******/
    .slidecontainer1 { grid-column: 1 / span 3;grid-row:1;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}
    .slidecontainer2 { grid-column: 1 / span 3;grid-row:3;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}
    .slidecontainer3 { grid-column: 1 / span 3;grid-row:5;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}

    .slidecontainer1 p,.slidecontainer2 p,.slidecontainer3 p {text-align:center;font-size:1.75rem;}

    /******subtext/smaller*******/
    .slidecontainer4 { grid-column: 1 / span 3;grid-row:2;margin-bottom:3vh;width:100%;text-align:center;}
    .slidecontainer5 { grid-column: 1 / span 3;grid-row:4;margin-bottom:3vh;width:100%;text-align:center;margin-left:-2vw;}
    .slidecontainer6 { grid-column: 1 / span 3;grid-row:6;margin-bottom:3vh;width:100%;text-align:center;}

    .slidecontainer4 p,.slidecontainer5 p,.slidecontainer6 p {text-align:center;font-size:1rem;}

/******borders and spacing*******/
    .slidingborder1,.slidingborder2,.slidingborder3,.slidingborder4,.slidingborder5,.slidingborder6 {text-align:center;padding:0;width:100%;}

    .slidingborder1::before {
        width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 1s ease forwards;
    }
    .slidingborder2::before {width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 1.5s ease forwards;
    }
    .slidingborder3::before {width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 1.75s ease forwards;
    }


   
    nav li a {
        display:none;
    }

    nav #iconcontainer {display:inline-flex;}

    nav button, nav .particle, nav #startlabel, nav #stoplabel {
       display:none;
	   opacity:0;
	   pointer-events: none;
    }

    .headerlogo {
        padding-left: 3vw;
        margin-left: -6vw;
    }

    .headerlogo img {
        max-height:6.9vh;
        max-width:70vw;
        margin-top:-0.45vh;
    }

    @media screen and (min-width:580px) {    
    .headerlogo img {
        margin-top:-0.5vh;
        }
    }


    @media screen and (min-width:200px) and (max-width:260px) {
    .headerlogo img { left:0;margin-left:var(--logopadwidth);max-width:50vw}
    .icon {left:calc(var(--logopadwidth)/8)}
    #mobilemenu {width:80vw;}
    }

    @media screen and (max-width:200px) {
    .headerlogo {display:none}
    #mobilemenu {width:80vw;}
    }


    #mobilemenu {
		position:fixed;
		background-color: #FFFFFF;
		border-radius: 3%;
		right:2vw;
		top:7.5vh;
		min-width: 0;
		max-height:0;
		height:auto;
		overflow: hidden;
		outline:var(--medium-teal) solid 5px;
	}

.wrapper>section {
    margin:0;
    padding-top:6vh;
    padding-bottom:6vh;
    padding-left:2vw;
    padding-right:1vw;
}

.wrapper>section:nth-child(1) {
    grid-template-columns: 1fr;
}

#home{padding-left:0;padding-right:0;}
#home1 {grid-column:1;grid-row:1;
    display:none;
}
#home2 {grid-column:1;grid-row:1;
    left:0;
    background:var(--darkest-teal);
    align-content:center;
    color:#FFFFFF;
    text-align: left;
    padding:10vw;
    padding-top:0;padding-bottom:0;
    margin-top:-1vh;
    margin-bottom:-5vh;
}

/*#aboutus .container {margin:auto;width:83vw;text-shadow: #FFFFFF -1px -1px;padding:0;padding-top:3vh;padding-bottom:7vh;}*/
#aboutus .container {opacity:0;margin-left:auto;margin-right:auto;padding-bottom:8vh;padding-top:5vh;width:83vw;text-shadow: #FFFFFF -1px -1px;}


#bios img {width:80%;}
.bio {display:none;}
#bios {grid-template-columns: 1fr;}
#bios div p {font-size:2rem;padding-left:1.5vw;}

#FAQ {grid-column: col 1 span 2;margin:0;padding-left:0.1vw;padding-right:0.1vw;width:100%;}

#services {
    grid-column: col 1 span 2;
    align-content:center;
    text-align:center;
    min-width:100%;padding-left:0;padding-right:0;
}

#servicestitlecontainer p {width:98%;}

.subcontainer {
    display:flex;flex-direction:column;width:100%;justify-content:space-around;padding-top:2vh;gap:3.5vw;
}

.servicediv {
    display:flex;flex:1;justify-content:top;flex-direction:column;text-align:center;padding:0;min-width:100%;
}

.flexsubdiv li {
    padding-bottom:1.5vh;
    list-style-type:none;
    text-align:center;
    margin-left:0.5rem;
}

#elevate {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    align-content:center;
    background:var(--body-teal);
    padding-top:7vh;
    width:100%;
    margin-left:0;
    padding-right:0;
    margin-right:-4vw;
}

#elevate1 {
    grid-column: 1 / span 2;
    grid-row:1;
    padding-top:1vh;
    padding-bottom:0vh;
    margin-left:auto;margin-right:auto;
    padding-left:6.5vw;
    font-size:0.95rem;
}

#elevate2 {
    grid-column: 1 / span 2;
    grid-row:2;
    margin:auto;
    padding-bottom:1.25vh;
}

#elevateyouredge {font-size:3.5em;padding:0;margin-top:0;text-align:center;margin-left:-5vw;}

#elevatetextcontain {
    transform:skewX(0deg);
    -webkit-transform:skewX(0deg);
}

.elevatequestion {font-weight:800;margin-bottom:-0.5vh;transform:skewX(0deg);-webkit-transform:skewX(0deg);}
.elevateanswer {padding-bottom:1.75vh;transform:skewX(0deg);-webkit-transform:skewX(0deg);}
.elevateanswer_last {padding-bottom:0;transform:skewX(0deg);-webkit-transform:skewX(0deg);}

.contactform {
    min-height:780px;
    max-height:90vh;
    height:auto;
    margin-bottom:-15px;
}

#prefooter {padding-bottom:7vh}
#prefooter #icondiv {display:none}
#prefooter .subcontainer {flex-wrap: wrap-reverse;}
#prefooter .flexsubdiv {flex:0 0 100%;width:100%;margin:0;flex-wrap:wrap;padding-left:0;padding-top:1vh;}
#prefooter * p, #prefooter * a, #prefooter * {text-align:center;margin-left:auto;margin-right:auto;padding:0;}
#prefooter .flexsubdiv div div {display:grid;width:100%;justify-content: center;gap:0;padding-bottom:1vh;}
#prefooter .flexsubdiv div div p {text-align:center;margin-left:9px;}
#prefooter .flexsubdiv div div p img {max-width:30%}
#prefooter #FBdiv {margin-left:29%;flex:0 1 50%;}
#prefooter #LIdiv {margin-right:35%;flex:0 1 50%;}
#prefooter #FBdiv p:nth-child(2) {margin-left:-0.25vw;}
 #prefooter #LIdiv p:nth-child(2) {margin-left:-0.2vw;}

.footer span {
        padding:7px;
        padding-bottom:3px;
        font-size:0.8rem;
    }

}

/*********************TABLET***********************/

@media screen and (min-width: 751px) and (max-width: 980px) {

    nav {
        display: flex;
        margin-right:0%
    }

    nav a {
        font-size: 1.1rem;
    }

    nav a:hover, nav li:hover {
    background-size: 70% .15em; /*, .15em 85%, .15em 85%;*/
    background-position: 50% 100%, 100% 100%; /*, 8% 85% , 92.5% 100%;*/
    letter-spacing: 0px;
    }

    ul {
        width:65%;
        padding-left:1vw;
    }

    nav .particle, nav #startlabel, nav #stoplabel {
        display:none;
        opacity:0;
        pointer-events: none;
        }

    .headerlogo img {
    max-height:7vh;
    height:auto;width:auto;
    padding-left:0.1vw;
    }

.wrapper>section:nth-child(1) {
    grid-template-columns: 1fr;
}

#home1 {
    display:none;
}
#home2 {
    background:var(--darkest-teal);
    align-content:center;
    padding-top:10vh;
    padding-bottom:8vh;
    padding-left:5vw;
    padding-right:1vw;
    color:#FFFFFF;
    text-align: left;
}

#services {
    grid-column: col 1 span 2;
    align-content:center;
    text-align:center;
    min-width:100%;padding-left:2.5vw;padding-right:0;
}

#servicestitlecontainer p {width:98%;}

.subcontainer {
    display:flex;flex-direction:column;width:100%;justify-content:space-around;padding-top:2vh;gap:5.5vw;
}

.servicediv {
    display:flex;flex:1;justify-content:top;flex-direction:column;text-align:center;padding:0;min-width:100%;
}

.flexsubdiv li {
    padding-bottom:1.5vh;
    list-style-type:none;
    text-align:center;
    margin-left:1.5rem;
}

#aboutus #bgdiv {width:100%;padding:3vh;background-color: rgba(255,255,255,0.85);background-image:url('mountains.png');background-blend-mode:lighten;background-size:100%;-webkit-background-size:cover;}
#aboutus .container {margin-left:auto;margin-right:auto;width:85vw;text-shadow: #FFFFFF -1px -1px;padding-bottom:6vh;padding-top:3vh;}


#bios {padding-top:6vh;padding-left:7vw;padding-right:7vw;padding-bottom:4.25vh}
#bios .section-title {padding-bottom:2vh}
#bios img {width:90%;margin-top:5vh;}
.bio {}
.bio p {font-size:1.05rem;padding-left:4vw;}


    #process {padding-left:0;margin-left:-2vw;padding-bottom:5.5vh;}
    #process .section-title {padding-bottom:5vh;}
    /******titles/bold*******/
    .slidecontainer1 { grid-column: 1 / span 3;grid-row:1;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}
    .slidecontainer2 { grid-column: 1 / span 3;grid-row:3;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}
    .slidecontainer3 { grid-column: 1 / span 3;grid-row:5;margin-bottom:3vh;width:100%;margin-left:-1.5vw;}

    .slidecontainer1 p,.slidecontainer2 p,.slidecontainer3 p {text-align:center;font-size:1.75rem;}

    /******subtext/smaller*******/
    .slidecontainer4 { grid-column: 1 / span 3;grid-row:2;margin-bottom:3vh;width:100%;text-align:center;}
    .slidecontainer5 { grid-column: 1 / span 3;grid-row:4;margin-bottom:3vh;width:100%;text-align:center;}
    .slidecontainer6 { grid-column: 1 / span 3;grid-row:6;margin-bottom:3vh;width:100%;text-align:center;}

    .slidecontainer4 p,.slidecontainer5 p,.slidecontainer6 p {text-align:center;font-size:1rem;}

/******borders and spacing*******/
    .slidingborder1,.slidingborder2,.slidingborder3,.slidingborder4,.slidingborder5,.slidingborder6 {text-align:center;padding:0;width:100%;}

    .slidingborder1::before {
        width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 1s ease forwards;
    }
    .slidingborder2::before {width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 1.5s ease forwards;
    }
    .slidingborder3::before {width:100%;margin-left:auto;margin-right:auto;left:0.5vw;text-align:center;
        animation:borderslideRight 1s linear forwards, glowpulseboth 2s ease forwards;
    }


#elevate {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    align-content:center;
    background:var(--body-teal);
}

#elevate .section-title{padding-left:0;margin-left:0;}

#elevate1 {
    grid-column: 1 / span 2;
    grid-row:1;
    margin:auto;
    padding:0;
    padding-bottom:1.5vh;
    padding-top:2vh;
}

#elevate2 {
    grid-column: 1 / span 2;
    grid-row:2;
    margin:auto;
    padding-right:0vw;
    padding-left:1vw;
    padding-bottom:0;
}

#elevateyouredge {font-size:3em;padding:0;margin-top:0;text-align:center;}

#elevatetextcontain {
    transform:skewX(0deg);
    -webkit-transform:skewX(0deg);
}

.elevatequestion {font-weight:800;margin-bottom:-0.5vh;transform:skewX(0deg);-webkit-transform:skewX(0deg);}
.elevateanswer {padding-bottom:1.75vh;transform:skewX(0deg);-webkit-transform:skewX(0deg);}
.elevateanswer_last {padding-bottom:0;transform:skewX(0deg);-webkit-transform:skewX(0deg);}

#contactus {padding-top:5vh}
.contactform {
    min-height:780px;
    max-height:90vh;
    height:auto;
    margin-bottom:-15px;
}

#prefooter {padding-bottom:3vh;padding-left:1.75vw;}
#prefooter #icondiv {display:none}
#prefooter .subcontainer {width:100%;flex-direction:row; flex-wrap: nowrap;}
#prefooter .flexsubdiv {flex:0 0 49.9%;width:49.9%;margin:0;flex-wrap:nowrap;padding-left:5vh;}

.footer span {padding-bottom:0.9vh}


}

/*******************LAPTOP**********************/

@media screen and (min-width: 981px) and (max-width: 1280px) {

    nav a {
        vertical-align: top;
        margin-bottom: 0.5%;
        color:var(--dark-base-teal);
        font-size: 1.25rem;
    }

    ul {
        /*padding-right:3%;*/
    }

#home2 {padding-bottom:9vh;}

#elevate1 {
    grid-column: 1 / span 2;
    grid-row:1;
    margin:auto;
    padding:0;
    padding-bottom:0vh;
    padding-top:12vh;
    margin-left:0;
}


#bios img {width:75%;margin-top:7vh;}
.bio {margin:auto; }
.bio p {margin-left:2.25vw;}

.contactform {
    min-height:780px;
    max-height:90vh;
    height:auto;
    margin-bottom:-15px;
}

#prefooter {padding-bottom:7vh}
#prefooter img {max-height:200px;}
#prefooter #icondiv {flex-basis:42%;flex-shrink:0;}
#prefooter .flexsubdiv {flex-basis: 29%;}

}

/*********************DESKTOP***********************/

@media screen and (min-width: 1281px) and (max-width: 1600px) {  

    .headerlogo {
        position:relative;
        display: flex;
        flex-direction: column;
        align-self:end;
        padding:0;
        padding-left: 5.5vw;
        padding-top:0.5vh;   
    }
    nav ul {
        /*padding-right:3%;*/
    }

    #bios img {width:70%}
    .bio {margin:auto; }

}


/*********************OVERSIZED***********************/

@media screen and (min-width: 1601px) {

    nav a {
        vertical-align:middle;
        vertical-align:-webkit-baseline-middle;
        margin-top: 0.25%;
        margin-bottom: 0.5%;
        font-size: 1.5rem;
    }

    .headerlogo {
        position:relative;
        display: flex;
        flex-direction: column;
        align-self:end;
        padding:0;
        padding-left: 5.5vw;
        padding-top:0.5vh;   
    }

    .bio {margin:auto; }

}


/*****FOR FREAKS WHO TRY TO BREAK IT*********/

@media screen and (min-width: 500px) and (max-height: 500px) {
    nav ul li {padding-top:0;margin-top:-10px;}
    nav ul li a {
        font-size:1rem;
    }
    nav .headerlogo {top:1vh;}
    nav a.icon {min-height:50px;max-height:50px;height:50px;}
}

@media screen and (max-width: 550px) and (min-height: 500px) {
    #home2 {padding-top:15vh;padding-bottom:15vh}
}

@media screen and (max-height: 500px) {
    nav .headerlogo {top:1vh;}
    nav a.icon {min-height:50px;max-height:50px;height:50px;}
}

@media screen and (min-height: 201px) and (max-height: 350px) {
    .dilate-skewed-strip {display:none;}
    nav ul {top:1px}
    nav a.icon {min-height:40px;max-height:40px;height:40px;padding-top:1vh;}
    nav .headerlogo {top:1vh;}
}

@media screen and (max-height: 200px) {
    .dilate-skewed-strip {display:none;}
    nav ul {top:5px;margin-top:5px;}
    nav ul li a {
        font-size:1rem;
    }
    nav a.icon {min-height:40px;max-height:40px;height:40px;}
    nav .headerlogo {top:5px;}
}

@media screen and (max-height: 50px) {
    .dilate-skewed-strip {display:none;}
    nav ul {top:5px;margin-top:1px;}
    nav ul li a {
        font-size:1rem;
    }
    nav a.icon {min-height:40px;max-height:40px;height:40px;}
    nav .headerlogo {top:5px;}
}