/* CLASSES IN FILE
div.navTab
div.navTab_triangleStroke
div.navTab_triangleFill
div.navStart
div.navStep1
div.navStep2
div.navStep3
div.navStep4
div.navStep5
div.navEnd */


/*
Code Sections:
 1.TABS
2.TRIANGLE
3.TEXT */







/* 1.TABS */
div.navTab {
    position: relative;
    flex:1;
    height: 80px;
    min-width: 40px;
    text-align: center;
    
    border-right: 3px solid black;
    border-top: 3px solid black;
    border-bottom: 3px solid black; 

    padding:5px;
      
}


div.navStart {
    border-left: 3px solid black;
}


/* contained inside of navTab */
nav.navPage a{
    text-decoration: none;
    display: block;
    height:100%;
    display:flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    margin:0;
    padding:0;
}





/* 2.TRIANGLE */

div.navTab_triangleFill {
    position: absolute;
    right: -19px;
    top:20.19px;
    width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-left: 20px solid red;
    border-bottom: 20px solid transparent;
    z-index:1;
}

div.navTab_triangleStroke {
    position: absolute;
    right: -23px;
    top:18px;
    width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-left: 22px solid black;
    border-bottom: 22px solid transparent;
    z-index:1;
}

div.navCurrent{
    border-bottom: none;
}

/* tab colors 
   start  #820202   #505050
   step1  #a6030e   #686868
   step2  #b3081f   #808080
   step3  #cf1f3c   #989898
   step4  #df3954   #b0b0b0
   step5  #e86680   #c8c8c8
   result #f7afc0   #e0e0e0*/


div.navTab.colorActive_Start .navTab_triangleFill {
    border-left-color:  #820202;
}

div.navTab.colorActive_Step1 .navTab_triangleFill {
    border-left-color:  #a6030e;
}

div.navTab.colorActive_Step2 .navTab_triangleFill {
    border-left-color:  #b3081f;
}

div.navTab.colorActive_Step3 .navTab_triangleFill {
    border-left-color:  #cf1f3c;
}

div.navTab.colorActive_Step4 .navTab_triangleFill {
    border-left-color:  #df3954;
}
div.navTab.colorActive_Step5 .navTab_triangleFill {
    border-left-color:  #e86680;
}


div.navTab.colorInactive_Step1 .navTab_triangleFill {
    border-left-color:  #686868;
}

div.navTab.colorInactive_Step2 .navTab_triangleFill {
    border-left-color:  #808080;
}

div.navTab.colorInactive_Step3 .navTab_triangleFill {
    border-left-color: #989898;
}

div.navTab.colorInactive_Step4 .navTab_triangleFill {
    border-left-color:  #b0b0b0;
}
div.navTab.colorInactive_Step5 .navTab_triangleFill {
    border-left-color:  #c8c8c8;
}





/* 3.TEXT */

nav.navPage  h4 {
    /* font-size: 1.5rem; */
    /* font-size: 1.4rem; */
    
    transform: scaleY(1.2);
    
    font-family: Comic Sans Ms, sans-serif;
    /* margin-bottom:auto; */
    /* margin-top: 5px; */
    color:black;
    
    /* text-align: center; */
    /* padding-left:5px;
    padding-right:3px;
    padding-top:5px;
    padding-bottom:10px; */

    margin-top:3px;
    margin-bottom:auto;
    text-indent: -19px;
    margin-left:18px;
    
}    
 
div.navTab.colorActive_Start h4,
div.navTab.colorActive_Step1 h4,
div.navTab.colorActive_Step2 h4,
div.navTab.colorActive_Step3 h4,
div.navTab.colorActive_Step4 h4,
div.navTab.colorActive_Step5 h4,
div.navTab.colorActive_End h4 {
    color:white;
    /* -webkit-text-stroke: 1px black; */
    text-shadow:
    2px 2px 2px black,
    -2px -2px 2px black,
    2px -2px 2px black,
    -2px 2px 2px black;
}


/* nav.navPage .navCurrent h4{
 
} */

nav.navPage .navCurrent h5{
    margin-bottom:5px;
}

nav.navPage h5 {
    /* font-size: 1rem; */
    /* font-size: 0.9rem; */
    /* transform: scaleX(0.8); */
    
    /* transform: scaleY(0.9); */
    color:black;
    font-family: Comic Sans Ms, sans-serif;
    /* padding-top:10px;
    padding-bottom:0px;
    padding-left:5px;
    padding-right:5px; */
   
    margin-top:auto;
    margin-bottom: 2px;
    /* margin-left:2px; */
}

div.navTab.colorActive_Start h5,
div.navTab.colorActive_Step1 h5,
div.navTab.colorActive_Step2 h5,
div.navTab.colorActive_Step3 h5,
div.navTab.colorActive_Step4 h5,
div.navTab.colorActive_Step5 h5,
div.navTab.colorActive_End h5 {
    color:white;
    /* -webkit-text-stroke: 0.2px black; */
    text-shadow:
    1.5px 1.5px 1.5px black,
    -1.5px -1.5px 1.5px black,
    1.5px -1.5px 1.5px black,
    -1.5px 1.5px 1.5px black,
    
    1px 1px 1px black,
    -1px -1px 1px black,
    1px -1px 1px black,
    -1px 1px 1px black;
}