@charset "utf-8";
/* CSS Document */

/* Element Style */
        
        body{
        padding:0px; margin:0px; 
        background-color:#151515; 
        font-family:arial;
        color:gray;
        }
        
        h1, h2, h3, h4, h5, h6{margin:0px; padding:0px; color:#78be20;}
        
        h1{
        font-size:14px;
        }
        
        p{
        font-size:12px; 
        line-height:20px;
        }
        
        ul{
        margin:11px 0px; padding:0px;
        }
            li{
            font-size:11px; 
            line-height:18px;
            list-style-type:none;
            }
        
        a{
        color:#78be20;
        text-decoration:none;
        }
            a:hover{color:lightgreen;}
                
        input[type="text"], textarea {
        border-radius:4px;
        padding:10px;
        background-color: rgba(0,0,0,.5);
        color:#fff; 
        border:1px solid #78be20;
        }

        input[type=button] {
        border:none;
        border-radius:4px;
        padding:10px;
        background-color:#78be20;
        color:#fff;
        cursor:pointer;
        }input[type=button]:hover{background-color:#151515;}
        
        input:focus {
        outline:none !important;
        border:1px solid #fff;
        box-shadow:0px 3px 6px 1px #2a2a2a;
        }
        
        /* Layout Style */
        
        .layout{
        display:flex;
        flex-direction:column;
        align-items:center;
        }
        
            /* FMA - Includes Header, Logo, Nav, Mininav + FMA Title and Content Sections */
        
            .fma{
            height:100vh;
            display:flex; 
            flex-direction:column;
            align-items:center;
            align-self:stretch;
            justify-content:space-between;
            background-image:url("images/banner-greenery2.jpg");
            background-position:bottom;
            background-attachment:fixed;
            background-size:cover;
            position:relative; z-index:1;
            }
            
                .fmaoverlay {
                background-color:rgba(20, 20, 20, 0.7);
                position:absolute; z-index:2;
                top:0; left:0;
                width:100%; height:100%;
                }
                
                /* Header */
                
                .header{
                display:flex;
                flex-direction:row;
                align-items:center;
                justify-content:space-between;
                position:relative; z-index:3;
                width:100%;
                max-width:1200px;
                }
                
                    .logo{
                    margin:20px;
                    }

                    nav{
                    margin:20px 0px 20px 0px;
                    display:flex;
                    flex-direction:row;
                    align-items:center;
                    gap:10px;
                    }

                        nav a{
                        display:inline-block;
                        padding:5px 15px;
                        border-bottom:1px;
                        border-bottom:1px solid transparent;
                        }
                        
                            nav a span{
                            display:inline-block;
                            padding-bottom:10px;
                            text-shadow: 0px 0px 5px black;
                            }
                        
                            nav a:hover{
                            color:#78be20;
                            border-bottom:1px solid #78be20;
                            }
                        
                            nav a.active{
                            color:white;
                            border-bottom:1px solid #78be20;
                            }
                        
                    .mininav{
                    margin:20px;
                    padding-bottom:5px;
                    min-width:200px;
                    text-align:right;
                    }
                    
                        .mininav a{
                        display:inline-block;
                        padding:5px 15px;
                        border-radius:5px;
                        background-color: rgba(0,0,0,.3);
                        color:white;
                        }
                        
                        .mininav a:hover{
                        color:#78be20;
                        background-color: rgba(0,0,0,.5);
                        }

                /* FMA Title and Search */
                
                .title-container{
                display:flex;
                flex-direction:column;
                align-content:center;
                align-items:center;
                text-align:center;
                z-index:3;
                margin:20px;
                }
                
                    .title-container div{
                    flex:1 1 auto;
                    max-width:350px;
                    }
                        .title-container h2, p{
                        text-shadow: 0px 0px 5px black;
                        }
                    
                        .title-container p{
                        color:#fff;
                        font-size:14px;
                        line-height:22px;
                        }
                    
                    .search{margin-top:5px;}
                
                /* FMA Content */
                
                .fma-container{
                width:100%;
                max-width:1200px;
                z-index:3;
                }

                    .fma-content{
                    display:flex;
                    flex-direction:row;
                    flex-wrap:wrap;
                    gap:20px;
                    margin:20px;
                    }
                    
                        .fma-item{
                        display:flex;
                        flex-direction:row;
                        justify-content:center;
                        align-items:center;
                        gap:15px;
                        flex:1 1 15%;
                        padding:20px;
                        border:1px solid #525252;
                        border-radius:20px;
                        background-color: rgba(0,0,0,.5);
                        cursor:pointer;
                        
                        -webkit-transition-property:all;
                        -webkit-transition-duration:0.3s;
                        -webkit-transition-timing-function:ease;
                        
                        }
                            .fma-item img{
                            width:80px;
                            height:62px;
                            }
                                                        
                        .fma-item:hover{
                        border:1px solid #78be20;
                        box-shadow:0px 3px 6px 1px #2a2a2a;
                        
                        transform:scale(1.04);
                        
                        }
        
            /* Main Content - Beneath the FMA */
            
            .main-container{
            width:100%;
            max-width:1200px;
            z-index:3;
            }
                
                .main-content{
                display:flex;
                flex-direction:row;
                flex-wrap:wrap;
                gap:20px;
                margin:20px;
                }

                    .content-item{
                    flex:1 30%;
                    border:1px solid transparent;
                    border-radius:20px;
                    padding:20px;
                    
                    color:gray;
                    line-height:24px;
                    }.content-item.content-highlight{background-color:#202020;}
                    
                        a.button{
                        display:inline-block;
                        padding:5px 15px;
                        border-radius:5px;
                        background-color:none;
                        border:1px solid #78be20;
                        color:#fff;
                        cursor:pointer;
                        font-size:12px;
                        }
                        
                        a.button:hover{
                        border:1px solid lightgreen;
                        }
        
            /* Footer */
            
            .footer{
            display:flex; 
            justify-content:center; 
            align-content:center;
            width:100%;
            max-width:1200px;
            }
                .footer div{
                margin:0px 20px;
                padding:20px;
                flex:1 1 33%;
                }
                
                .footer h1{
                color:#f5f5f5;
                }
                
                .footer li.more{
                margin-top:10px;
                }
                
                .footer li.more a{
                color:gray;
                
                }
                .footer li.more a:hover{
                color:#fff;
                }
                    
            /* Media Queries */
            
            @media only screen and (max-width:750px){
            
                .header, .footer{
                flex-direction:column;
                justify-content:center;
                }
                
                .fma{height:auto;}
                
                    .header{
                    text-align:center; 
                    align-items:center;
                    }

                        .logo{
                        margin-bottom:20px;
                        }

                        nav{
                        text-align:center;
                        }
                            #homelink{display:none;}

                        .mininav{
                        text-align:center;
                        display:none;
                        }

                .search{
                margin-top:20px;
                }
                    
                .main-container{
                flex-direction:column-reverse;
                }
                
                    .main-content{
                    flex-direction:column;
                    }
                
                    .item{
                    flex:1 0 50px;
                    border-radius:5px;
                    padding:10px 5px;
                    }
                
                .footer{
                display:block;
                }
                    
                    .footer-about,
                    .footer-contact,
                    .footer-account{
                    displayt:block;
                    text-align:center;
                    }
                    
                    .footer-content-type,
                    .footer-content-category{
                    display:none;
                    }
                
            }