body {
    /* background-image: url('http://dev.lcjelectro.com/images/footer-BG.png'); */
    font-family: 'Alegreya Sans', sans-serif;
    
    background-color: white;
    max-width: 1920px;
    margin: 0 auto;


    height: 110vh;

}


/* DON'T DO THIS 
.container {
    max-width: 1920px;
    padding: 0;
}
*/

header {
    /*background-image: url('../images/header-bg-logo.png');
    background-repeat: no-repeat;
    background-size: auto;*/
    height: 170px;
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: 'Alegreya Sans SC', sans-serif;
}

#logolink {    
    width: 358px;
    margin-left: 26px;
    height: 121px;
    position: absolute;
}

#navbgcontain {
	display: grid;
    grid-template-columns: 376px auto;
    position: absolute;
}

#headerimg {
    position: absolute;   
    margin-top: -2px;
    width: 1920px;
}

#navbg {
	position: relative;
	 width: 100%;
	/* width: 1547.744px; */
	
	/*height: 222px; */
	height: 180.215px;
	/* float: right;*/

}

#navbgimg {
	/*
	float: right;
	*/
	width: 100%;
	height: 100%;
	
}



nav {   /* wrapper of the primary/black nav */
    position: absolute;
    height: 136px;
    margin-left: 38%;
    
    width: 55%;
    max-width: 1085px;
    
    display: flex;
    

}
.menu-lcj-h {  
        /* This is the Real Wrapper for the full size of the hidden nav 
            Like nav element.
            So why so different setup? 
            bc of the width, and this behind inside the samll div.
        */
    position: relative;
    height: 136px;
    
    width: 54.5vw;
    max-width: 1085px;
    
    display: flex; 
   
   /*
    top: 0;
    margin-left: 38%;  
   */
}

.nav {   /* the ul of the primary nav  */
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
   /*
    height: 100%;
    position: absolute; 
    width: 100%;
   */
}

.nav-h {  /* the ul of the secondary nav. NOW THEY ARE THE SAME :-) */
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.activenavitem2 {   
        /* "wrapper" of the second 'hidden' nav. 
            It's only the width of one Nav Item. 
            And it's overflow is hidden ;-)
        */
    overflow: hidden;
    position: absolute;
    color: #fff;
    background-color: #F80000;
    /* background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%)); */

    width: 174.45px;  /* starting width */
    margin-left: 37.76%;
   
   height: 163px; 
   transform: skewX(-15deg);
   top: -1px;

    /* 
    
    margin-top: 135px;
    */
}



.nav-item-lcj {   /* lis of the primary & secondary nav */
    display: flex;
    flex-direction: row;
    flex: 1 1 0px;
    
    text-align:center;
    align-items: center;

}

.nav-item-lcj a {  /* anchors inside the nav lis in both navs */
    flex: 1 1;
    
    color: black;
    text-decoration: none;
    
    font-size: 30px;
    font-weight: 600;
    
    /*--switch: calc((var(--light) - var(--threshold)) * -100%);
    color: hsl(0, 0%, var(--switch)); */
}

.nav-item-lcj a  p {           
    /* p inside the anchors. Both Navs. Used to vert center. Better way? */
    margin: 16px 0 16px 0;
}




.m-h a {
    /* just makig the secondary nav links white. */
    color: white;
}

.m-h a p {
	transform: skewX(15deg);

}

#main {
	min-height: 100vh;
	overflow: hidden;
	margin-top: 119px;
	

}





#homebanner { 
	/* background-image: url(../images/banner-1.jpg);*/

    /* margin-top: -50px; */
    max-width: 1920px;
    position: relative;
    top: 0;
}


.slide-down {
	/* display: block !important; */
	/* transform: skewX(-15deg) !important; */
	top: 2500px;
	animation: slideDown 3s;
}
.slide-up {
	display: block !important;
	/* transform: skewX(-15deg) !important; */
	top: 0px;
	animation: slideup 3s;
}

#homebanner-image {
	position: absolute;
	top: -50px;
	z-index: 0;
}

#description {
	display: none;
	position: relative;

	
	top: 10em;

	transform: skewX(-15deg);

	background-color: rgba(255, 255, 255, 0.6);

	width: 600px;
	height: auto;
	padding: 2em;
	padding-left: 3.3em;

	/* transform: skewX(-15deg); */
	
	
	/*animation: slideInLeft 4s; */
	 
	 /* animation: skew 2s;  */
	/* transition: all 3s; */

	/*
	animation: home-description 5s;
	animation-timing-function: steps(2, end);
	*/

}
.isLeft {
	left: -1920px;
}

.desc-visible {
	display: block !important;
	/* transform: skewX(-15deg) !important; */
	animation: slideInLeft 3s;
	margin: 0 auto;



}

@keyframes skew {
	0% {
    	transform: skewX(-15deg);	
    	
    }
    100% {
    	
    	transform: skewX(-15deg);
    	
    }
}

@keyframes slideInLeft {
	0% {
    	/* transform: skewX(15deg); */
    	transform: translateX(-1920px) skewX(15deg);;
    }
    100% {
    	/* transform: skewX(-15deg);  */
    	transform: translate(0) skewX(-15deg);
    }

  /*0% {
    opacity: 0;
    transform: translateX(-1000px);
    
  }
  25% {
    transform: translateX(-750px);
  }
  50% {
    transform: translateX(-500px);
  }
  75% {
    transform: translateX(-250px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
  */
}

.slide-down {
  animation: slideDown 3s;
}

.left500 {
	/* margin-left: -500px !important; */
}

@keyframes slideDown {
	
  0% {
    /* opacity: 0; */
    transform: translateY(0);
  }
  100% {
    /* opacity: 1; */
    transform: translateY(2500px);
    
  }
}

@keyframes slideup {
	0% {
		/* opacity: 0; */
	    transform: translateY(2500px);
	}
	100% {
	    /* opacity: 1; */
	    transform: translateY(0);
	    
	}


}




#description p {
	font-size: 20px;
	font-weight: bold;
	transform: skewX(15deg);
	animation: skew-opp 3s;
}

@keyframes skew-opp {
	0% {
    	transform: skewX(-15deg);	
    	
    }
    100% {
    	
    	transform: skewX(15deg);
    	
    }
}


footer {
	border: 1px solid red;

}





/* ## for reference ## */

#moveme {
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: pink;


}


:root {
    /* we need this just for the current color of red.. 
        Ok don't need, it was kinda cool */
    /*
    --hue: 0;
    --sat: 100;
    --light: 49;
    --threshold: 80;
    */
}

.activenavitem {
    /* this was the original sliding "highlighter" should need it anymore. 
        we're sliding a whole separate menu around.. :-) */
    
    /* these were the only two active attrs:
    position: absolute;
    background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%));
    */

    /* 
    background-color: #F80000; 
    */
    /* height: 163px;
    width: 152px;
    /* margin-left: 529px;  
    color: #fff;
    */    
}

.nav-item-lcj a.active { /* there kinda is not active cause the "clicked link" get hidden.. */
/*
    color: #fff;    
    font-weight: 700;
    mix-blend-mode: difference;
*/

}

.nav-lcj li.active {
    /* background-color: #F80000; */
}

.nav-item-lcj a:selection {
   /*  color: pink;  */
}



/* ## Likely not needed, from bs ## */


/* 
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #F80000;
    font-weight: 700;
    
}

.nav-pills .nav-link {
    border-radius: 0rem;
    font-size: 30px;
    
    /* font-size:8vw; */
/*    
    font-weight: 600;
    font-variant: small-caps;
    height: 100%;
    padding-top: 46px;
    transform: skewX(-15deg);

}
.nav-link {
    display: block;
    padding: 0;
}
.nav-item a {
    color: #000;
    text-decoration: none;
    background-color: transparent;
    height: 100%;

}

.nav-item a p {
    transform: skewX(15deg);
    margin: 0;
}

*/