.hidden{
    display: none;
}

.show{
    display: block;
}

body {
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

*{
    transition: all 0.5s ease;
    list-style-type: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-family: "Arial";
}

#video{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: .5em 0 .5em 0;
    padding-bottom: .25em;
    outline: thin solid white;
    background-color:rgba(0, 0, 0, 0.5);
}

#video iframe{
    margin: 0 auto .1em auto;;
}

.video-title{
    margin: .3em auto;
    width: 100%;
    text-align: center;
    color: white;
}

.bg{
    background-image:url(img/humes.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    height: 100vh;
}

.fine-text{
    color: white;
    width: 95%;
    margin: 0 auto .25em auto;
    font-size: .5em;
    text-align: center;
}

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    left: 0;
    right: 0;
}


.home-title{
    font-family: "Lucida Calligraphy", Arial;
}

@media screen and (max-width:29.9999em) { /* portrait phone (< 480px) */

/* Home Classes */

.home{
    background-image:url(img/humes.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

#home-section{
    width: 100%;
    height: auto;    
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-title{
    flex: 1 1 100%;
    font-size: 3.95em;
    font-family: "Lucida Calligraphy"
}

.home-info{
    flex: 1 1 100%;
    font-size: 1.40em
}

.home-enter{
        margin: 2.5em auto 0em auto;
        width: 9em;
        color: white;
        font-size: 1.5em;
        padding: .15em;
        border: .2em solid rgba(255, 255, 255, 0.8);
        background-color:rgba(125, 125, 125, 0.3);
        padding: .2em;
        transition: 0.2s ease-out, color 0.2s ease-out;
}

    .home-enter:hover, .home-enter:active {
        background-color:rgba(50, 50, 50, 0.5);
        color:rgb(255, 255, 255);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

/* About Styles */

#about-section{
    background-color:rgba(255, 255, 255, 0.4);
    width: 85%;
    margin: 2em auto 0 auto;
    padding: 1em;
}
    .about-title{
        font-size: 2.5em;
    }        
        .about-info{
            font-size: 1.5em;
        }

/* Products Styles */

.product-section{
    
}
    .product-title{
        font-size: 2.5em;
        padding: .25em 0 0 .25em;
        color: black;
        font-weight: 100;
    }
        .product-info{
            font-size: 1.5em;
            padding: .35em;
            color: black;
            flex: 1 1 100%;
        }

#products{
    display: flex;
    flex-direction: column;
}

/*Product - CAVITY Styles*/

.cav-title{
    width: 98%;
    margin: 0 auto;
    font-weight: 100;
}
    .cav-desc{
        width: 98%;
        margin: 0 auto;
    }

.door-section{
    width: 95%;
    margin: .5em auto 0 auto;
    height: 3em;
    border: thin solid rgba(255, 255, 255, 0.8);
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}

.product-button{
    height: 3em;
    width: 3em;
    color: white;
    text-align: center;
    line-height: 3em;
    border-right: thin solid rgba(255, 255, 255, 0.8);
}
    .product-desc{
        line-height: 2em;
        flex: 1 1 100%;
        color: white;
        font-size: 1.5em;
        text-indent: .2em;
    }
        #product-div{
            width: 95%;
            display: flex;
            justify-content: space-around;
        }
            #product-div img{
                height: 100%;
            }

#showroom{
    margin: .2em auto 2em auto;
    display: flex;
    width: 95%;
}

#int-doors, #ext-doors, #cav-doors, #wr-doors, #bf-doors, #special-doors, #product1{
    background-color:rgba(0, 0, 0, 0.4);
    width: 95%;
    margin: 0 auto;
}

#doors{
    height: auto;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
    .door-range{
        color: white;
        font-weight: 100;
        font-size: 1.75em;
        width: 100%;
        text-align: center;
        margin: .1em auto 0 auto;
    }

.cav-title{
    color: white;
    font-weight: 100;
    font-size: 1.75em;
}
    .cav-desc{
        color: white;
    }

.bf-title{
    font-weight: 100;
    color: white;
    font-size: 1.75em;
    text-indent: .25em;
}
    .bf-desc{
        color: white;
        text-indent: .5em;
    }



#wr-sliders{
    margin: 0 auto;
    width: 97%;
    display: flex;    
    justify-content: space-around;
}
    .wr-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .wr-desc{
            flex: 1 1 45%;  
            color: white;
        }
            #wr-img{
                flex: 1 0 45%;
                overflow: hidden;
            }
                #wr-img img{
                    width: 100%;
                }

     .spcl-title{
        display: none;
    }
        .spcl-desc{
            flex: 1 1 100%;
            color: white;
            text-indent: .5em;
            margin: .25em auto;
        }
            .spcl-list{
                color: white;
                text-indent: .5em;
            }

    .prod-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .prod-desc{
            flex: 1 1 45%;  
            color: white;
            text-indent: .25em;
        }


/* CONTACT Styles */

#contact-section{
/*    outline: thin solid red;*/
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;    
    box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
}
    .contact-title{
        font-size: 2.5em;
    }
        .contact-info{
            font-size: 1.5em;
        }

/* Header Styles */

header{
    width: 100%;
    border-bottom: thin solid rgba(0, 0, 0, 0.5);
    height: 4em;
    line-height: 4em;;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}
    #menu-button{
        width: 4em;
        text-align: center;
        color: white;
        background-color:rgba(0, 0, 0, 0.15);
    }

    #header-title{
        flex: 1 1 100%;
        text-indent: .5em;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }

/* Main Styles */

main{
    width: 100%;
}

/*Footer Styles*/

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


#nav{
    background-color:rgba(0, 0, 0, 0.5);
    height: 3em;
    line-height: 3em;
}

.nav{
    display: flex;
    justify-content: space-around;
    color: white;
}

.nav a{
    color: white;
    font-size: 1.25em
}
    
    #gallery-container{
        display: flex;
        justify-content: space-around;
        width: 97%;
        height: auto;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    
    .gallery{
        flex: 1 1 31%;
        max-width: 11em;
        max-height: 8em;
        overflow: hidden;
        margin: .2em;
        background-color:rgba(0, 0, 0, 0.1);
    }
    
    .gallery img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }
    
}

/* Mobile phones */
@media only screen and (min-width:30em) and (max-width:59.9999em) { /* landscape phone and portrait tablet (>= 480px < 960px) S8+ */
    
.fine-text{
    color: white;
    width: 95%;
    margin: 0 auto .25em auto;
    font-size: .5em;
    text-align: center;
}

.bg{
    background-image:url(img/humes.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    height: 100vh;
}

/* Home Classes */

.home{
    background-image:url(img/humes.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

#home-section{
    width: 100%;
    height: auto;    
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-title{
    flex: 1 1 100%;
    font-size: 3.95em;
    font-family: "Lucida Calligraphy"
}

.home-info{
    flex: 1 1 100%;
    font-size: 1.40em
}

.home-enter{
        margin: 2.5em auto 0em auto;
        width: 9em;
        color: white;
        font-size: 1.5em;
        padding: .15em;
        border: .2em solid rgba(255, 255, 255, 0.8);
        background-color:rgba(125, 125, 125, 0.3);
        padding: .2em;
        transition: 0.2s ease-out, color 0.2s ease-out;
}

    .home-enter:hover, .home-enter:active {
        background-color:rgba(50, 50, 50, 0.5);
        color:rgb(255, 255, 255);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

/* About Styles */

#about-section{
    background-color:rgba(255, 255, 255, 0.4);
    width: 85%;
    margin: 2em auto 0 auto;
    padding: 1em;
}
    .about-title{
        font-size: 2.5em;
    }        
        .about-info{
            font-size: 1.5em;
        }

/* Products Styles */

.product-section{
    
}
    .product-title{
        font-size: 2.5em;
        padding: .25em 0 0 .25em;
        color: black;
        font-weight: 100;
    }
        .product-info{
            font-size: 1.5em;
            padding: .35em;
            color: black;
            flex: 1 1 100%;
        }

#products{
    display: flex;
    flex-direction: column;
}
    
  
/*Product - CAVITY Styles*/

.cav-title{
    width: 98%;
    margin: 0 auto;
    font-weight: 100;
}
    .cav-desc{
        width: 98%;
        margin: 0 auto;
    }

.door-section{
    width: 95%;
    margin: .5em auto 0 auto;
    height: 5em;
    border: thin solid rgba(255, 255, 255, 0.8);
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}

.product-button{
    height: 5em;
    width: 5em;
    color: white;
    text-align: center;
    line-height: 5em;
    border-right: thin solid rgba(255, 255, 255, 0.8);
}
    .product-desc{
        line-height: 2.5em;
        flex: 1 1 100%;
        color: white;
        font-size: 2em;
        text-indent: .2em;
    }
        #product-div{
            width: 95%;
            display: flex;
            justify-content: space-around;
        }
            #product-div img{
                height: 100%;
            }

#showroom{
    margin: .2em auto 2em auto;
    display: flex;
    width: 95%;
}

#int-doors, #ext-doors, #cav-doors, #wr-doors, #bf-doors, #special-doors, #product1{
    background-color:rgba(0, 0, 0, 0.4);
    width: 95%;
    margin: 0 auto;
}

#doors{
    height: auto;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
    .door-range{
        color: white;
        font-weight: 100;
        font-size: 1.75em;
        width: 100%;
        text-align: center;
        margin: .1em auto 0 auto;
    }

.cav-title{
    color: white;
    font-weight: 100;
    font-size: 1.75em;
}
    .cav-desc{
        color: white;
    }

.bf-title{
    font-weight: 100;
    color: white;
    font-size: 1.75em;
    text-indent: .25em;
}
    .bf-desc{
        color: white;
        text-indent: .5em;
    }



#wr-sliders{
    margin: 0 auto;
    width: 97%;
    display: flex;    
    justify-content: space-around;
}
    .wr-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .wr-desc{
            flex: 1 1 45%;  
            color: white;
        }
            #wr-img{
                flex: 1 0 45%;
                overflow: hidden;
            }
                #wr-img img{
                    width: 100%;
                }

     .spcl-title{
        display: none;
    }
        .spcl-desc{
            flex: 1 1 100%;
            color: white;
            text-indent: .5em;
            margin: .25em auto;
        }
            .spcl-list{
                color: white;
                text-indent: .5em;
            }

    .prod-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .prod-desc{
            flex: 1 1 45%;  
            color: white;
            text-indent: .25em;
        }


/* CONTACT Styles */

#contact-section{
/*    outline: thin solid red;*/
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;    
    box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
}
    .contact-title{
        font-size: 2.5em;
    }
        .contact-info{
            font-size: 1.5em;
        }

/* Header Styles */

header{
    width: 100%;
    border-bottom: thin solid rgba(0, 0, 0, 0.5);
    height: 4.5em;
    line-height: 4.5em;
    font-size: 1.5em;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}
    #menu-button{
        width: 4.5em;
        text-align: center;
        color: white;
        background-color:rgba(0, 0, 0, 0.15);
    }

    #header-title{
        flex: 1 1 100%;
        text-indent: .5em;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }

/* Main Styles */

main{
    width: 100%;
}

/*Footer Styles*/

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    
    bottom: 0;
    left: 0;
    right: 0;
}

#nav{
    background-color:rgba(0, 0, 0, 0.5);
    height: 4em;
    line-height: 4em;
}

.nav{
    display: flex;
    justify-content: space-around;
    color: white;
}

.nav a{
    color: white;
    font-size: 2em
}
    
 #gallery-container{
        display: flex;
        justify-content: space-around;
        width: 97%;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    
    .gallery{
        flex: 1 1 31%;
        max-width: 12.5em;
        height: 12.5em;
        overflow: hidden;
        margin: .3em;
        background-color:rgba(0, 0, 0, 0.1);
    }
    
    .gallery img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }
    
}

@media only screen and (min-width:60em) and (max-width:89.9999em) { /* landscape tablet and normal monitor (>= 960px < 1440px) My phone ETC*/

.fine-text{
    color: white;
    width: 95%;
    margin: 0 auto .25em auto;
    font-size: 1.25em;
    text-align: center;
}

.bg{
    background-image:url(img/humes.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    height: 100vh;
}

/* Home Classes */

.home{
    background-image:url(img/humes.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

#home-section{
    width: 100%;
    height: auto;    
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-title{
    flex: 1 1 100%;
    font-size: 7.5em;
    font-family: "Lucida Calligraphy"
}

.home-info{
    flex: 1 1 100%;
    font-size: 3.75em
}

.home-enter{
        margin: 2.5em auto 0em auto;
        width: 9em;
        color: white;
        font-size: 2.75em;
        padding: .15em;
        border: .2em solid rgba(255, 255, 255, 0.8);
        background-color:rgba(125, 125, 125, 0.5);
        box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
        padding: .2em;
        transition: 0.2s ease-out, color 0.2s ease-out;
}

    .home-enter:hover, .home-enter:active {
        background-color:rgba(50, 50, 50, 0.5);
        color:rgb(255, 255, 255);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

/* About Styles */

#about-section{
    background-color:rgba(255, 255, 255, 0.4);
    width: 85%;
    margin: 2em auto 0 auto;
    padding: 1em;
}
    .about-title{
        font-size: 4em;
    }        
        .about-info{
            font-size: 3.25em;
        }

/* Products Styles */

.product-section{
    
}
    .product-title{
        font-size: 3em;
        padding: .25em 0 0 .25em;
        color: black;
        font-weight: 105;
        width: 95%;
        margin: 0 auto;
    }
        .product-info{
            font-size: 1.5em;
            padding: .35em;
            color: black;
            flex: 1 1 100%;
        }

#products{
    display: flex;
    flex-direction: column;
}

/*Product - CAVITY Styles*/

.cav-title{
    width: 98%;
    margin: 0 auto;
    font-weight: 100;
}
    .cav-desc{
        width: 98%;
        margin: 0 auto;
    }

.door-section{
    width: 95%;
    margin: .5em auto 0 auto;
    height: 6em;
    border: thin solid rgba(255, 255, 255, 0.8);
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}

.product-button{
    height: 3em;
    width: 3.5em;
    font-size: 2em;
    color: white;
    text-align: center;
    line-height: 3em;
    border-right: thin solid rgba(255, 255, 255, 0.8);
}
    .product-desc{
        line-height: 2.5em;
        flex: 1 1 100%;
        color: white;
        font-size: 2.5em;
        text-indent: .25em;
    }
        #product-div{
            width: 95%;
            display: flex;
            justify-content: space-around;
        }
            #product-div img{
                height: 100%;
            }

#showroom{
    margin: .2em auto 2em auto;
    display: flex;
    width: 95%;
    height: 13.5em;
}

#int-doors, #ext-doors, #cav-doors, #wr-doors, #bf-doors, #special-doors, #product1{
    background-color:rgba(0, 0, 0, 0.4);
    width: 95%;
    margin: 0 auto;
    position: relative;
}

#doors{
    height: auto;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
    .door-range{
        color: white;
        font-weight: 100;
        font-size: 2.75em;
        width: 100%;
        text-align: center;
        margin: .1em auto 0 auto;
    }

.cav-title{
    color: white;
    font-weight: 100;
    font-size: 2.5em;
}
    .cav-desc{
        color: white;
        font-size: 1.75em;
    }

.bf-title{
    font-weight: 100;
    color: white;
    font-size: 1.75em;
    text-indent: .25em;
}
    .bf-desc{
        color: white;
        text-indent: .5em;
    }



#wr-sliders{
    margin: 0 auto;
    width: 97%;
    display: flex;    
    justify-content: space-around;
}
    .wr-title{
        font-weight: 100;
        color: white;
        font-size: 2.5em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .wr-desc{
            flex: 1 1 45%;  
            color: white;
            font-size: 1.75em
        }
            #wr-img{
                flex: 1 0 45%;
                overflow: hidden;
            }
                #wr-img img{
                    width: 100%;
                }

     .spcl-title{
        display: none;
    }
        .spcl-desc{
            flex: 1 1 100%;
            color: white;
            text-indent: .5em;
            margin: .25em auto;
        }
            .spcl-list{
                color: white;
                text-indent: .5em;
            }

    .prod-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .prod-desc{
            flex: 1 1 45%;  
            color: white;
            text-indent: .25em;
        }


/* CONTACT Styles */

#contact-section{
/*    outline: thin solid red;*/
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;    
    box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
}
    .contact-title{
        font-size: 4em;
    }
        .contact-info{
            font-size: 3.25em;
        }
            .contact-info-list{
                font-size: 2.25em;
            }


/* Header Styles */

header{
    width: 100%;
    border-bottom: thin solid rgba(0, 0, 0, 0.5);
    height: 4.75em;
    line-height: 4.75em;
    font-size: 2em;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
}
    #menu-button{
        width: 4.75em;
        text-align: center;
        color: white;
        background-color:rgba(0, 0, 0, 0.15);
    }

    #header-title{
        flex: 1 1 100%;
        text-indent: .5em;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }

/* Main Styles */

main{
    width: 100%;
}

/*Footer Styles*/

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    left: 0;
    right: 0;
}


#nav{
    background-color:rgba(0, 0, 0, 0.5);
    height: 4em;
    line-height: 4em;
}

.nav{
    display: flex;
    justify-content: space-around;
    color: white;
}

.nav a{
    color: white;
    font-size: 2em
}
    
#video{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: .5em 0 .5em 0;
    padding-bottom: .25em;
    outline: thin solid white;
    background-color:rgba(0, 0, 0, 0.5);
    height: auto;
}

#video iframe{
    margin: 0 auto .1em auto;
    height: 25em;
    width: 85%;
}

.video-title{
    margin: .3em auto;
    width: 100%;
    text-align: center;
    color: white;
}
    
    #gallery-container{
        display: flex;
        justify-content: space-around;
        width: 97%;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    
    .gallery{
        flex: 1 1 31%;
        max-width: 20em;
        height: 20em;
        overflow: hidden;
        margin: .4em;
        background-color:rgba(0, 0, 0, 0.25);
    }
    
    .gallery img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

}

@media only screen and (min-width: 90em) { /* bigger monitor (>= 1440px) */
    
    
.fine-text{
        font-size: 1.5em;
}
    
/* Home Classes */

.home{
    background-image:url(img/humes.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

#home-section{
    width: 100%;
    height: auto;    
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-title{
    flex: 1 1 100%;
    font-size: 7.5em;
    font-family: "Lucida Calligraphy"
}

.home-info{
    flex: 1 1 100%;
    font-size: 3.75em
}

.home-enter{
        margin: 4em auto 0em auto;
        width: 9em;
        color: white;
        font-size: 2em;
        padding: .15em;
        border: .2em solid rgba(255, 255, 255, 0.8);
        background-color:rgba(125, 125, 125, 0.3);
        padding: .2em;
        transition: 0.2s ease-out, color 0.2s ease-out;
}

    .home-enter:hover, .home-enter:active {
        background-color:rgba(50, 50, 50, 0.5);
        color:rgb(255, 255, 255);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

/* About Styles */

#about-section{
    background-color:rgba(255, 255, 255, 0.4);
    width: 85%;
    margin: 2em auto 0 auto;
    padding: 1em;
    position: relative;
    top: 3.5em;
}
    .about-title{
        font-size: 3.5em;
    }        
        .about-info{
            font-size: 2.5em;
        }

/* Products Styles */

.product-section{
   display: flex;
    
}
    .product-title{
        font-size: 3em;
        padding: .25em 0 0 0;
        color: black;
        width: 95%;
        margin: 0 auto;
        text-shadow: .5px .5px rgba(255, 255, 255, 0.5);
    }
        .product-info{
            font-size: 1.5em;
            padding: .35em;
            color: black;
            flex: 1 1 100%;
        }

#products{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 97%;
    margin: 0 auto;
}
    
    #int-doors, #ext-doors, #cav-doors, #wr-doors, #bf-doors, #special-doors{
        width: 97%;
        position: relative;
        top: 0em;
        background-color:rgba(0, 0, 0, 0.4);
    }
    
/*Product - CAVITY Styles*/

.cav-title{
    width: 98%;
    margin: 0 auto;
    font-weight: 100;
}
    .cav-desc{
        width: 98%;
        margin: 0 auto;
    }

.door-section{
    flex:0 0 30%;
    margin: .5em auto 1em auto;
    height: 5em;
    border: thin solid rgba(255, 255, 255, 0.8);
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
    text-align: center;
}    
    .door-section:hover{
        background-color:rgba(255, 255, 255, 0.3);
        border: thin solid rgba(100, 100, 100, 0.3);
    }
    
.product-button{
    display: none;
}
    .product-desc{
        line-height: 2.5em;
        flex: 1 1 100%;
        color: white;
        font-size: 2em;
        text-indent: .2em;
    }
    
    .product-desc:hover{
        color: black;
        transition: 0.1s ease;
    }
        #product-div{
            flex: 1 1 95%;
            display: flex;
            justify-content: space-around;
        }
            #product-div img{
                max-height: 95%;
                margin: auto 0 auto 0;
            }

#showroom{
    margin: .2em auto 2em auto;
    display: flex;
    width: 95%;
    height: 16em;
}

#doors{
    height: auto;
    width: 95%;
    margin: 0 auto 0 auto;
    display: flex;
    flex-direction: column;
}
    .door-range{
        color: white;
        font-weight: 100;
        font-size: 2.25em;
        width: 100%;
        text-align: center;
        margin: .1em auto 0 auto;
    }

.cav-title{
    color: white;
    font-weight: 100;
    font-size: 1.75em;
}
    .cav-desc{
        color: white;
    }

#wr-sliders{
    margin: 0 auto;
    width: 97%;
    display: flex;    
    justify-content: space-around;
}
    .wr-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .wr-desc{
            flex: 1 1 45%;  
            color: white;
        }
            #wr-img{
                flex: 1 0 45%;
                overflow: hidden;
            }
                #wr-img img{
                    width: 100%;
                }

     .spcl-title{
        display: none;
    }
        .spcl-desc{
            flex: 1 1 100%;
            color: white;
            text-indent: .5em;
            margin: .25em auto;
            font-size: 1.5em;
        }
            .spcl-list{
                color: white;
                text-indent: .5em;
                font-size: 1.25em;
                margin: 0 auto .25em auto;
            }

/* CONTACT Styles */

#contact-section{
/*    outline: thin solid red;*/
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;
    position: relative;
    top: 3.5em;
}
    .contact-title{
        font-size: 3.5em;
    }
        .contact-info{
            font-size: 2.5em;
        }
            .contact-info-list{
                font-size: 2em;
            }

/* Header Styles */

header{
    border-bottom: none;
    height: 3em;
    line-height: 3em;;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
    text-align: center;
    font-size: 2.5em
}
    #menu-button{
        display: none;
        width: 3em;
        text-align: center;
        color: white;
        background-color:rgba(0, 0, 0, 0.15);
    }

    #header-title{
        flex: 1 1 100%;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }

/* Main Styles */

main{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/*Footer Styles*/

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    left: 0;
    right: 0;
}

#nav{
    background-color:rgba(0, 0, 0, 0.8);
    width: 100%;
    line-height: 3.25em;
    display: flex;
    height: auto;
    position: absolute;
}

.nav{
    display: flex;
    flex-direction: row;
    color: white;
    width: 100%;
    justify-content: space-around;
}

.nav a{
    color: white;
    margin: 0 0 1em 0;
    font-size: 2.5em;
    flex: 1 1 20%;
}
    .nav a:hover{
        color:rgba(255, 255, 255, 0.8);
    }

    
    #gallery-container{
        display: flex;
        justify-content: space-around;
        width: 97%;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    
    .gallery{
        flex: 1 1 30%;
        max-width: 25em;
        height: 22em;
        overflow: hidden;
        margin: .5em;
        background-color:rgba(0, 0, 0, 0.25);
    }
    
    .gallery img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }
    
    #product-container{
        position: relative;
        top: 3.75em;
    }
}

@media only screen and (min-width: 120em) { /* big monitor (>= 1920px) */
    
    header{
    height: 2.5em;
    line-height: 2.5em;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
    text-align: center;
    font-size: 2.75em
}
    
    .home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

    #header-title{
        flex: 1 1 100%;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }
    
    #nav{
    line-height: 3.25em;
    height: 3.25em;
    font-size: 1.25em;
    } 
    
    .nav a{
        font-size: 2.25em;
    }
    
    #contact-section{
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;
}
    .contact-title{
        font-size: 4em;
    }
        .contact-info{
            font-size: 2em;
        }
    
    
/* Home Classes */

.home{
    background-image:url(img/humes.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.home-bg{
    background-color:rgba(255, 255, 255, 0.35);
    width: 100%;
    height: 100%;
}

#home-section{
    width: 100%;
    height: auto;    
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-title{
    flex: 1 1 100%;
    font-size: 7.5em;
    font-family: "Lucida Calligraphy"
}

.home-info{
    flex: 1 1 100%;
    font-size: 3.75em
}

.home-enter{
        margin: 4em auto 0em auto;
        width: 9em;
        color: white;
        font-size: 2em;
        padding: .15em;
        border: .2em solid rgba(255, 255, 255, 0.8);
        background-color:rgba(125, 125, 125, 0.3);
        padding: .2em;
        transition: 0.2s ease-out, color 0.2s ease-out;
}

    .home-enter:hover, .home-enter:active {
        background-color:rgba(50, 50, 50, 0.5);
        color:rgb(255, 255, 255);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

/* About Styles */

#about-section{
    background-color:rgba(255, 255, 255, 0.4);
    width: 85%;
    margin: 2em auto 0 auto;
    padding: 1em;
}
    .about-title{
        font-size: 3.5em;
    }        
        .about-info{
            font-size: 2.5em;
        }

/* Products Styles */

.product-section{
   display: flex;
    
}
    .product-title{
        font-size: 3em;
        padding: .25em 0 0 0;
        color: black;
        width: 95%;
        margin: 0 auto;
        text-shadow: .5px .5px rgba(255, 255, 255, 0.5);
    }
        .product-info{
            font-size: 1.5em;
            padding: .35em;
            color: black;
            flex: 1 1 100%;
        }

#products{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 97%;
    margin: 0 auto;
}

#products2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
}

/*Product - CAVITY Styles*/

.cav-title{
    width: 98%;
    margin: 0 auto;
    font-weight: 100;
}
    .cav-desc{
        width: 98%;
        margin: 0 auto;
    }

.door-section{
    flex:0 0 30%;
    margin: .5em auto 1em auto;
    height: 5em;
    border: thin solid rgba(255, 255, 255, 0.8);
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
    text-align: center;
}    
    .door-section:hover{
        background-color:rgba(255, 255, 255, 0.3);
        border: thin solid rgba(100, 100, 100, 0.3);
    }
    
.product-button{
    display: none;
}
    .product-desc{
        line-height: 2.5em;
        flex: 1 1 100%;
        color: white;
        font-size: 2em;
        text-indent: .2em;
    }
    
    .product-desc:hover{
        color: black;
        transition: 0.1s ease;
    }
        #product-div{
            flex: 1 1 95%;
            display: flex;
            justify-content: space-around;
        }
            #product-div img{
                max-height: 95%;
                margin: auto 0 auto 0;
            }

#showroom{
    margin: .2em auto 2em auto;
    display: flex;
    width: 95%;
    height: 16em;
}

#int-doors, #ext-doors, #cav-doors, #wr-doors, #bf-doors, #special-doors{
        width: 97%;
        position: relative;
        top: 0em;
        background-color:rgba(0, 0, 0, 0.4);
}

#doors{
    height: auto;
    width: 95%;
    margin: 0 auto 0 auto;
    display: flex;
    flex-direction: column;
}
    .door-range{
        color: white;
        font-weight: 100;
        font-size: 2.25em;
        width: 100%;
        text-align: center;
        margin: .1em auto 0 auto;
    }

.cav-title{
    color: white;
    font-weight: 100;
    font-size: 1.75em;
}
    .cav-desc{
        color: white;
    }

#wr-sliders{
    margin: 0 auto;
    width: 97%;
    display: flex;    
    justify-content: space-around;
}
    .wr-title{
        font-weight: 100;
        color: white;
        font-size: 1.75em;
        text-indent: .25em;
        margin: 0 auto .1em auto;
    }
        .wr-desc{
            flex: 1 1 45%;  
            color: white;
        }
            #wr-img{
                flex: 1 0 45%;
                overflow: hidden;
            }
                #wr-img img{
                    width: 100%;
                }

     .spcl-title{
        display: none;
    }
        .spcl-desc{
            flex: 1 1 100%;
            color: white;
            text-indent: .5em;
            margin: .25em auto;
            font-size: 1.5em;
        }
            .spcl-list{
                color: white;
                text-indent: .5em;
                font-size: 1.25em;
                margin: 0 auto .25em auto;
            }

/* CONTACT Styles */

#contact-section{
/*    outline: thin solid red;*/
    height: auto;
    margin: 2em auto 0 auto;
    width: 85%;
    background-color:rgba(255, 255, 255, 0.4);
    padding: 1em;
}
    .contact-title{
        font-size: 3.5em;
    }
        .contact-info{
            font-size: 2.5em;
        }
            .contact-info-list{
                font-size: 2em;
            }

/* Header Styles */

header{
    border-bottom: none;
    height: 3em;
    line-height: 3em;;
    display: flex;
    background-color:rgba(0, 0, 0, 0.8);
    text-align: center;
    font-size: 2.5em
}
    #menu-button{
        display: none;
        width: 3em;
        text-align: center;
        color: white;
        background-color:rgba(0, 0, 0, 0.15);
    }

    #header-title{
        flex: 1 1 100%;
        color: white;
    }

    .header-title{
/*        font-family: "Lucida Calligraphy";*/
    }
    
    #product-container{
        position: relative;
        top: 3.75em;
    }

/* Main Styles */

main{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/*Footer Styles*/

.footer{
    width: 100%;
    height: 2em;
    line-height: 2em;
    color:rgb(255,255,255);
    background-color:rgba(0,0,0,0.8);
    line-height: 2em;
    text-align: center;
    font-size: .75em;
    position: absolute;
    left: 0;
    right: 0;
}


#nav{
    background-color:rgba(0, 0, 0, 0.8);
    width: 100%;
    line-height: 3.25em;
    display: flex;
    height: 3.25em;
}

.nav{
    display: flex;
    flex-direction: row;
    color: white;
    width: 100%;
    justify-content: space-around;
}

.nav a{
    color: white;
    margin: 0 0 1em 0;
    font-size: 2.5em;
    flex: 1 1 20%;
}
    .nav a:hover{
        color:rgba(255, 255, 255, 0.8);
    }
    
     #gallery-container{
        display: flex;
        justify-content: space-around;
        width: 97%;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    
    .gallery{
        flex: 1 1 25%;
        max-width: 22em;
        height: 22em;
        overflow: hidden;
        margin: .5em;
        background-color:rgba(0, 0, 0, 0.25);
    }
    
    .gallery img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

}