#agave_phases {
    
    $headline_font: allumi-std, sans-serif;
    $accent_font: work-sans, sans-serif;
    
    color: #000000;
    font-size: 18px;
    line-height: 21px;
    
    
    section {
        
        h1 {
            font-family: $headline_font;
            font-size: 43px;
            font-weight: 600;
            letter-spacing: 2.21px;
            line-height: 48px;
            margin-bottom: 2px;
            
            @include breakpoint(large) {
                font-size: 63px;
                line-height: 68px;
            }
        }
        
        h2 {
            color: #0E2F38;
            font-family: $headline_font;
            font-size: 36px;
            font-weight: 300;
            letter-spacing: 1.26px;
            line-height: 50px;
            margin-bottom: 13px;
        }
        
        h3 {
            color: #0E2F38;
            font-family: $headline_font;
            font-size: 21px;
            font-weight: 700;
            letter-spacing: 0.84px;
            line-height: 26px;
        }
        
        p {
            color: #000000;
            font-size: 18px;
            line-height: 21px;
            margin-bottom: 22px;
        }
        
        a:visited, a:link {
            color: #00B9E7;
        }
        
    }
    
    .cta-link {
        position: relative;
        text-decoration: none;
        
        &:after {
            background-color: #0097BC;
            bottom: -7px;
            content: "";
            display: block;
            height: 2px;
            left: 0;
            text-decoration: none;
            transform: scaleX(0);
            transition: transform 200ms ease-in-out;
            position: absolute;
            width: 100%;
        }
        
        &:hover {
            color: #0097BC;
            
            &:after {
                transform: scaleX(1);
                transition: transform 200ms ease-in-out;
            }
        }
    }
    
    
    input[type=checkbox] {
        
        display: none;
        opacity: 0;
        
        & + label {
            align-items: center;
            color: #004071;
            display: grid;
            grid-auto-flow: column;
            grid-gap: 16px;
            justify-content: flex-start;
            font-size: 18px;
            font-weight: 600;
            line-height: 21px;
            position: relative;
            margin: 0;

            &:before {
                border: 3px solid #38B9E8;
                border-radius: 50%;
                content: '';
                cursor: pointer;
                height: 36px;
                width: 36px;
            }
            
            &:hover {
                &:before {
                    background-color: #38B9E8;
                }
            }
            
        }
        
        &:checked + label {
            
            &:before {
                color: #ffffff;
		    	content: '\f00c';
                background-color: #38B9E8;
                font-family: "FontAwesome";
				font-size: 24px;
				font-weight: 400;
				padding: 3px;
            }

        }
    }
    
    .hero {
        
        background-size: cover;
        padding: 50px 0;
        text-align: center;
        
        @include breakpoint(large) {
            background-position: center;
            text-align: left;
        }
        
        .content-wrapper {
            
            @include breakpoint(large) {
                align-items: center;
                display: flex;
                min-height: 600px;
            }
            
            .content {
                width: 100%;
            }
            
        }
        
        h1 {
            color: #ffffff;
        }
        
        h2 {
            color: #00B38C;
            font-weight: 500;
            text-transform: none;
        }
        
        p {
            color: #ffffff;
            font-family: $accent_font;
            font-size: 20px;
            font-weight: 400;
            line-height: 32px;
        }
        
        .btn-primary {
            background-color: #ffffff;
            border: 3px solid #ffffff;
            display: inline-block;
            font-family: $headline_font;
            font-weight: 600;
            font-size: 15px;
            line-height: 23px;
            margin-top: 8px;
            
            &:hover {
                background-color: #00B9E7;
                border: 3px solid #00B9E7;
                color: #ffffff;
                text-decoration: none;
            }
        }
    } //.hero
    
    .intro {
        padding: 50px 0;

        p {
            font-size: 20px;
            font-weight: 400;
            line-height: 32px;
        }
        
    } //.intro
    
    .phases {
        
        .phase {
            
            border-top: 10px solid #EAEAEA;
            
            /* Using a custom css grid for this section since features needed are not in the older "Float Grid" 
               contained in current outdated 6.3 version of Foundation currently employed. Upgrading Foundation 
               would break the rest of the Agave Project pages. - CB 2/27/2022
            */
            .phase-row {
                @include breakpoint(large) {
                    display: grid;
                    grid-auto-flow: column;
                    grid-template-columns: 34% auto;
                }
            }
            
            .progress-column {
                background-size: cover;
                background-position: center;
                padding: 0;
                position: relative;
                text-align: center;
                
                .content-wrapper {
                    
                    padding: 37px 10px 22px 10px;
            
                    @include breakpoint(large) {
                        align-items: center;
                        display: grid;
                        height: 100%;
                        padding: 37px 10px 110px 10px;
                        min-height: 630px;
                    }
                    
                    .content {
                        width: 100%;
                        
                        .icon {
                            margin-bottom: 47px;
                        }
                    }
                    
                }
                
                h3 {
                    color: #ffffff;
                }
                
                p {
                    color: #ffffff;
                    font-family: $headline_font;
                    font-weight: 600;
                    font-size: 46px;
                    line-height: 50px;
                }
                
                .dashboard {
                    background-color: rgba(0,0,0, 0.5);
                    backdrop-filter: blur(11px);
                    padding: 37px 3%;
                    
                    @include breakpoint(large) {
                        padding: 37px 16%;
                        position: absolute;
                        width: 100%;
                        bottom: 0;
                    }
                    
                    .progress-visual {
                        display: grid;
                        grid-auto-flow: column;
                        grid-gap: 10px;
        				margin-bottom: 17px;

        			    .segment {
        			    	background-color: #A5A5A5;
        			    	height: 8px;
        			    	
        			    	&.complete {
        			    		background-color: #00B38C;
        			    	}
        			    }
        
        			}
                    
                    .progress-label {
                        color: #ffffff;
                    }
                }
            }
            
            .tasks-column {
                padding: 0;
                
                @include breakpoint(large) {
                    padding: 0 10%;
                }
                
                .tasks-content {
                    padding-top: 75px;
                    padding-bottom: 70px;
                    
                    @include breakpoint(large) {
                        display: grid;
                        align-items: center;
                        height: 100%;
                    }
                    
                    ul {
                        list-style: none;
                        margin: 0;
                    }
                    
                    .checklist {
                        padding: 0 3%;
                        margin-bottom: 25px;
                        
                        @include breakpoint(large) {
                            padding: 0 0 0 30px;
                        }
                        
                        .group {
                            margin-bottom: 37px;
                            
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                        
                        ul {
                            
                            li {
                                align-items: center;
                                border-bottom: 3px solid #EAEAEA;
                                display: grid;
                                grid-auto-flow: column;
                                grid-gap: 16px;
                                justify-content: space-between;
                                padding: 13px 0;
                                
                                &:last-child {
                                    border-bottom: none;
                                }
                                
                                label {
                                    
                                }
                            }
                        }
                        
                    }
                    
                    .actions {
                        background-color: #E5FFFC;
                        padding: 25px 3% 0 3%;
                        
                        @include breakpoint(large) {
                            padding: 25px 30px 0 30px;
                        }
                        
                        h3 {
                            margin-bottom: 15px;
                        }
                        
                        ul {
                            margin-bottom: 25px;
                            
                            @include breakpoint(large) {
                                column-count: 2;
                                column-gap: 10px;
                            }
                            
                            li {
                                font-weight: 600;
                                margin-bottom: 20px;
                                
                                p {
                                    font-weight: 600;
                                    margin-bottom: 0;
                                }
                                
                                a {
                                   font-weight: 700; 
                                   font-size: 18px;
                                }
                            }
                        }
                    }
                    
                    &.show-sub-task {
                        .checklist {
                            display: none;
                        }
                        .actions {
                            display: none;
                        }
                        .modal-sub-task {
                            display: block;
                        }
                    }
                    
                    .modal-sub-task {
						display: none;
						padding: 0 3%;
                        
                        @include breakpoint(large) {
                            padding: 0;
                        }

						.back {
						    padding-left: 16px;
						    
						    &:before {
						    	content: '\f0d9';
						    	display: inline-block;
						    	font-family: "FontAwesome";
						    	font-style: normal;
								font-size: 30px;
								font-weight: 900;
								position: relative;
								left: -16px;
								top: 6px;
						    }

						}
						
						.sub-task-content {
							display: none;
							padding: 50px 0 30px 0;
							position: relative;
							text-align: center;
							
							h3 {
								margin: 0 0 31px 0;
							}

							.form-wrapper,
							.video-wrapper {
								opacity: 0;
							}
							
							.completion-message {
								display: none;
							}
							
							&.show-form {
								display: block;
								
								.form-wrapper,
    							.video-wrapper {
    								opacity: 1;
    							}
							}
							
							&.show-completion {
								display: block;
								
								.completion-message {
                                    align-items: center;
									display: grid;
									left: 0;
									height: 100%;
									position: absolute;
									top: 0;
									width: 100%;
    								
    								.row {
    									height: 100%;
    								}
    							}
							}
						
						}
					} //.modal-sub-task
					
					.video-container {
					    width: 100%;
					    overflow: hidden;
	                    padding-bottom: 56%;
	                    position: relative;
	                    
	                    &.hide {
							opacity: 0;	
						}
						
						video {
						    left: 0;
						    position: absolute;
                            top: 0;
						}
	                
	                    img {
	                	    height: 100%;
	                        left: 0;
	                	    object-fit: cover;
	                	    position: absolute;
	                	    top: 0;
	                	    width: 100%;
	                	}
	                	
	                	.play {
	                	    align-items: center;
	                	    background-color: rgba(19, 35, 88, 0.7);
	                	    display: grid;
	                        justify-content: center;
	                        cursor: pointer;
	                        height: 100%;
	                        font-size: 78px;
	                        left: 0;
	                	    position: absolute;
	                	    top: 0;
	                	    width: 100%;
	                	}
					}

                } //.tasks-content
                
                &.up-2 {
                    // make two columns of tasks on desktop
                    @include breakpoint(large) {
                        padding: 0 4% 0 3%;
                        
                        .checklist {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            gap: 5.5%;
                            
                            .group {
                                width: 47%;
                            }
                        }
                    }
                }
                
            } //.tasks-column
            
            @include breakpoint(large) {
                &:nth-child(even) {
        			
        			.phase-row {
                        grid-template-columns: auto 34%;
                    }
        			
        			.progress-column {
        				order: 2;
        			}
        			.tasks-column {
        				order: 1;
        				
        			}
        		}
            }
            
            
            .modal-sub-task {
                
                display: none;
                
            } //.modal-sub-task
            
            .gate {
				display: none;
			}
			
			&.gated {
				position: relative;
				
				//&:hover {
					.gate {
						background-color: rgba(255, 255, 255, 0.8);
						backdrop-filter: blur(2px);
						left: 0;
						position: absolute;
						top: 0;
						display: grid;
					    align-items: center;
					    width: 100%;
						height: 100%;
					    
					    h2 {
					    	font-size: 46px;
                            font-weight: 600;
                            letter-spacing: 1.61px;
					    	margin: 0 auto;
					    	text-align: center;
					    	width: 60%;
					    }
						
					}
				//}
				
			}
            
            
        } //.phase
        
    } //.phases
    
    // helper for non-grid alignment
    .indent-left {
        
        @include breakpoint(large) {
            margin-left: 6%;
        }
        
    }
    .indent-right {
        
        @include breakpoint(large) {
            margin-right: 6%;
        }
        
    }
    
    
    /* support-bar global style overrides. 
       TODO: move into global css after aproval
     */
    .support-bar {
        h3 {
            color: #0E2F38;
            font-family: $headline_font;
            font-size: 36px;
            font-weight: 300;
            letter-spacing: 1.26px;
            line-height: 50px;
            margin-bottom: 13px;
        }
        
        .btn-hollow {
            display: inline-block;
            font-family: $headline_font;
            font-weight: 600;
            margin-top: 8px;
            
            &:hover {
                color: #ffffff;
                text-decoration: none;
            }
        }
    } 
    
    /* header nav global style overrides. 
       TODO: move into global css after aproval
     */
     
    .top-menu .userinfo p {
        line-height: 30px;
    }
     
    header {
        .nav-bar {
            a {
                color: #0E2F38;
                font-weight: 500;
                padding: 10px 0;
                position: relative;
                text-decoration: none;
                
                &:after {
                    background-color: #00B9E7;
                    bottom: 0;
                    content: "";
                    display: block;
                    height: 6px;
                    left: 0;
                    text-decoration: none;
                    transform: scaleX(0);
                    transition: transform 200ms ease-in-out;
                    position: absolute;
                    width: 100%;
                }
                
                &:hover {
                    color: #00B9E7;
                    //font-weight: 600;
                    //padding: 10px 1px;
                    
                    &:after {
                        transform: scaleX(1);
                        transition: transform 200ms ease-in-out;
                    }
                }
            }
            
            // flyout nav
            li {
                ul {
                    li {
                        a {
                            padding: 10px 15px;
                        }
                    }
                }
            }
        }
        
        .agave-logo-wrapper {
            // replace the current Agave logo with this updated version
            // TODO: update agave header template with this new version and remove this css code
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188.56' height='36.76' viewBox='0 0 188.562 36.759'%3E%3Cg data-name='Group 1474' fill='%23002f38'%3E%3Cpath data-name='Path 24561' d='m44.3 17.3-.6 2.13c.93-.73 1.85-1.44 2.75-2.12Z'/%3E%3Cpath data-name='Path 24562' d='m21.53 19.43-.6-2.13h-2.15l2.75 2.13Z'/%3E%3Cpath data-name='Path 24563' d='M4.29 31.76V21.6h9.36a708.76 708.76 0 0 1-3.26-4.29H0v18.75h23.46l-7.6-4.3Z'/%3E%3Cpath data-name='Path 24564' d='m54.84 17.3-3.26 4.3h9.36v10.16H49.38l-7.84 4.29h23.7V17.31Z'/%3E%3C/g%3E%3Cg data-name='Group 1480'%3E%3Cg data-name='Group 1475'%3E%3Cpath data-name='Path 24565' d='m28.12 23.88.54-4.83c-4.9-8.72-9.84-16.18-9.84-16.18s2.07 8.25 4.7 17.57Z' fill='%23002f38'/%3E%3C/g%3E%3Cg data-name='Group 1476'%3E%3Cpath data-name='Path 24566' d='M6.07 23.18a165.84 165.84 0 0 0 17.06 10.63l-6.3-7.62c-9.2-2.75-10.76-3-10.76-3Z' fill='%23002f38'/%3E%3C/g%3E%3Cg data-name='Group 1477'%3E%3Cpath data-name='Path 24567' d='M41.96 20.44c2.63-9.31 4.7-17.57 4.7-17.57s-4.94 7.46-9.83 16.18l.53 4.83Z' fill='%23002f38'/%3E%3C/g%3E%3Cg data-name='Group 1478'%3E%3Cpath data-name='Path 24568' d='M36.15 27.38C35.08 15.45 32.63 0 32.63 0s-2.43 15.68-3.5 27.42C19.93 19.7 7.05 10.36 7.05 10.36s12.48 17.04 20.21 25.7h10.7c7.74-8.66 20.22-25.7 20.22-25.7s-12.83 9.3-22.03 17.02Z' fill='%23002f38'/%3E%3C/g%3E%3Cg data-name='Group 1479'%3E%3Cpath data-name='Path 24569' d='m48.4 26.2-6.3 7.61A165.88 165.88 0 0 0 59.16 23.2s-1.56.25-10.76 3Z' fill='%23002f38'/%3E%3C/g%3E%3C/g%3E%3Cg data-name='Group 1843' fill='%23002f38'%3E%3Cpath data-name='Path 24601' d='m86.9 10.8 9.8 25.54h-5.42l-2.3-6.15h-9.6l-2.25 6.15h-5.35l9.81-25.53Zm-5.85 14.9h6.26l-3.13-8.49Z'/%3E%3Cpath data-name='Path 24602' d='M114.4 30.69v-3.87h-4.34v-4.37h9.18v10.7a12.8 12.8 0 0 1-9.26 3.6c-7.77 0-12.65-5.4-12.65-13.13 0-7.9 5.5-13.23 13.19-13.23a12.59 12.59 0 0 1 7.35 2.12v5.33a11.2 11.2 0 0 0-7.35-2.58c-4.6 0-7.8 3.32-7.8 8.36 0 4.95 2.83 8.4 7.38 8.4a6.7 6.7 0 0 0 4.3-1.33Z'/%3E%3Cpath data-name='Path 24603' d='m136.57 10.8 9.8 25.54h-5.41l-2.3-6.15h-9.6l-2.26 6.15h-5.34l9.8-25.53Zm-5.84 14.9h6.26l-3.13-8.49Z'/%3E%3Cpath data-name='Path 24604' d='m153.29 36.34-9.6-25.53h5.63l6.64 18.46 6.64-18.46h5.51l-9.64 25.53Z'/%3E%3Cpath data-name='Path 24605' d='M188.56 10.8v4.67h-12.14v5.57h11.02v4.53h-11.02v6.07h12.14v4.7h-17.4V10.81Z'/%3E%3C/g%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            
            &:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188.56' height='36.76' viewBox='0 0 188.562 36.759'%3E%3Cg data-name='Group 1474' fill='%2300b9e7'%3E%3Cpath data-name='Path 24561' d='m44.3 17.3-.6 2.13c.93-.73 1.85-1.44 2.75-2.12Z'/%3E%3Cpath data-name='Path 24562' d='m21.53 19.43-.6-2.13h-2.15l2.75 2.13Z'/%3E%3Cpath data-name='Path 24563' d='M4.29 31.76V21.6h9.36a708.76 708.76 0 0 1-3.26-4.29H0v18.75h23.46l-7.6-4.3Z'/%3E%3Cpath data-name='Path 24564' d='m54.84 17.3-3.26 4.3h9.36v10.16H49.38l-7.84 4.29h23.7V17.31Z'/%3E%3C/g%3E%3Cg data-name='Group 1480'%3E%3Cg data-name='Group 1475'%3E%3Cpath data-name='Path 24565' d='m28.12 23.88.54-4.83c-4.9-8.72-9.84-16.18-9.84-16.18s2.07 8.25 4.7 17.57Z' fill='%2300b9e7'/%3E%3C/g%3E%3Cg data-name='Group 1476'%3E%3Cpath data-name='Path 24566' d='M6.07 23.18a165.84 165.84 0 0 0 17.06 10.63l-6.3-7.62c-9.2-2.75-10.76-3-10.76-3Z' fill='%2300b9e7'/%3E%3C/g%3E%3Cg data-name='Group 1477'%3E%3Cpath data-name='Path 24567' d='M41.96 20.44c2.63-9.31 4.7-17.57 4.7-17.57s-4.94 7.46-9.83 16.18l.53 4.83Z' fill='%2300b9e7'/%3E%3C/g%3E%3Cg data-name='Group 1478'%3E%3Cpath data-name='Path 24568' d='M36.15 27.38C35.08 15.45 32.63 0 32.63 0s-2.43 15.68-3.5 27.42C19.93 19.7 7.05 10.36 7.05 10.36s12.48 17.04 20.21 25.7h10.7c7.74-8.66 20.22-25.7 20.22-25.7s-12.83 9.3-22.03 17.02Z' fill='%2300b9e7'/%3E%3C/g%3E%3Cg data-name='Group 1479'%3E%3Cpath data-name='Path 24569' d='m48.4 26.2-6.3 7.61A165.88 165.88 0 0 0 59.16 23.2s-1.56.25-10.76 3Z' fill='%2300b9e7'/%3E%3C/g%3E%3C/g%3E%3Cg data-name='Group 1843' fill='%23002f38'%3E%3Cpath data-name='Path 24601' d='m86.9 10.8 9.8 25.54h-5.42l-2.3-6.15h-9.6l-2.25 6.15h-5.35l9.81-25.53Zm-5.85 14.9h6.26l-3.13-8.49Z'/%3E%3Cpath data-name='Path 24602' d='M114.4 30.69v-3.87h-4.34v-4.37h9.18v10.7a12.8 12.8 0 0 1-9.26 3.6c-7.77 0-12.65-5.4-12.65-13.13 0-7.9 5.5-13.23 13.19-13.23a12.59 12.59 0 0 1 7.35 2.12v5.33a11.2 11.2 0 0 0-7.35-2.58c-4.6 0-7.8 3.32-7.8 8.36 0 4.95 2.83 8.4 7.38 8.4a6.7 6.7 0 0 0 4.3-1.33Z'/%3E%3Cpath data-name='Path 24603' d='m136.57 10.8 9.8 25.54h-5.41l-2.3-6.15h-9.6l-2.26 6.15h-5.34l9.8-25.53Zm-5.84 14.9h6.26l-3.13-8.49Z'/%3E%3Cpath data-name='Path 24604' d='m153.29 36.34-9.6-25.53h5.63l6.64 18.46 6.64-18.46h5.51l-9.64 25.53Z'/%3E%3Cpath data-name='Path 24605' d='M188.56 10.8v4.67h-12.14v5.57h11.02v4.53h-11.02v6.07h12.14v4.7h-17.4V10.81Z'/%3E%3C/g%3E%3C/svg%3E");
                
            }
            
            // hide the current log but keep its dimentions for the background image replacement
            img {
                opacity: 0;
            }
        }
        
    }
    
    /* footer global style overrides. 
       TODO: move into global css after aproval
     */
     
    footer {
        
        p {
            color: #000000;
            font-size: 18px;
            line-height: 21px;
            margin-bottom: 22px;
        }
        
        .terms-social-container {
            .terms,
            .privacy {
                a {
                    @extend .cta-link;
                }
            }
            
            .social {
                a {
                    &:hover {
                        svg {
                            path {
                                fill: #0097BC;
                            }
                        }
                    }
                }
            }
        }
    }
    
    
    
    
} // #agave_phases