@import "style.css";
@import "stylePrint.css";

#box h3{text-align: center;
        color: white;}

#box {float: left;
    width: 180px;
    background-color: black;}


#box a {color: red;
        font-weight: bold;
        text-decoration: none;}


#box ul ul {position:absolute;
		padding: 0;
		display: none;}

#box ul li {
        border: solid 1px red;
        text-align: left;
        padding: 5px 20px 30px 5px;}

#box ul ul li {display: inline;
	        width: 8em;
		text-align: center;
            border: solid 1px blue;
            padding: 0;}

#box li:hover ul{display: block;}

#box li {text-align: center;
        display: block;}



#box {border: solid 1px black;
        padding-right: 10px;
        margin-left: -25px;
        margin-right: 10px;}


main {margin-left: 230px; min-height: 450px;}

main img {width: 250px;
            height: 250px;}

.flex-container {display: flex;
                flex-wrap: wrap;
                }


#demo {display: flex;
        flex-direction: row;
        justify-content: space-evenly;}

body html{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    
    .section_top_women {
        width: 100%;
        height:380px;
        overflow:hidden;
        position: relative;
        background-image: url(../images/background1.png);
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        justify-content: center;
        animation: women 10s infinite ease-in-out;
    }
    .section_top_men {
        width: 100%;
        height:380px;
        overflow:hidden;
        position: relative;
        background-image: url(../images/menbanner1.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        justify-content: center;
        animation: men 10s infinite ease-in-out;
    }
    .section_top_kids {
        width: 100%;
        height:380px;
        overflow:hidden;
        position: relative;
        background-image: url(../images/kidsBanner1.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        justify-content: center;
        animation: kids 10s infinite ease-in-out;
    }
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 50%);  
    }
    .font {
            font-size: 50px;
            font-weight: bold;
    }
    
    
    @keyframes women {
        0%{background-image: url(../images/background1.png)}
        33%{background-image: url(../images/background2.png)}
        66%{background-image: url(../images/backgroun3.png)}
        100%{background-image: url(../images/background4.png)}   
    }
    @keyframes men {
        0%{background-image: url(../images/menbanner1.jpeg)}
        33%{background-image: url(../images/menbanner2.jpg)}
        66%{background-image: url(../images/menbanner3.jpg)}
        100%{background-image: url(../images/menbanner4.png)}   
    }
    @keyframes kids {
        0%{background-image: url(../images/kidsBanner1.jpeg)}
        33%{background-image: url(../images/kidsBanner2.jpeg)}
        66%{background-image: url(../images/kidsBanner3.jpg)}
        100%{background-image: url(../images/kidsBanner.png)}   
    }

    @media screen and (max-width: 820px) {

        #box {width: 100%; margin: 0px; padding: 0;}

        #box ul {padding-right: 42px;}

        #box ul ul {display: block;}

        main {margin-left: 0;}
        
    }

    ul {list-style: none;}
    /*
    @media only screen and (max-device-width: 768px){
        .section_top {
                width: 100%;
                height: 600px;
                overflow:hidden;
                position: relative;
                background-image: url(WomenBanner/background1.png);
                background-repeat: no-repeat;
                background-size: cover;
                text-align: center;
                justify-content: center;
                animation: change 10s infinite ease-in-out;
            }
            
    }
    @media only screen and (max-device-width: 480px){
        .section_top {
                width: 100%;
                height:400px;
                overflow:hidden;
                position: relative;
                background-image: url(WomenBanner/background1.png);
                background-repeat: no-repeat;
                background-size: cover;
                text-align: center;
                justify-content: center;
                animation: change 10s infinite ease-in-out;
            }
    }
    */