*{
    margin: 0;
    padding: 0%;
}

html{
MIN-height: 100%;
}

body{
position: absolute;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}



#logo{
top: 5px;
height: 70px;
width: 160px;

margin-top: 10px;
flex: auto;
flex-grow: 0;

}


.logo{
width: 150px;
align-items: center;
margin-left: 5px;
margin-top: 5px;
}

#navbar{
background-color: #3676B2;
width: 70%;
height: 200px;
top: 100px;

left: 15%;
border-radius: 3px;
}




/*menu bar*/

#menubtn{
    display: none;
}


.menu-bar{
    /* mix-blend-mode: lighten; */
    text-align: center;


  /*  top: 120px;*/
margin-top: 20px;
height: 40px;
width: 50%;
    left: 25%;
    z-index: 3;
background-color: #566573;
    border-radius: 7px;


}

.menu-bar ul{
    display: inline-flex;
    list-style-type: none;
    color: #fff;
}

.menu-bar ul li{
    width: 60px;   
    margin-top: auto;
margin-left: 10px;
    padding: 10px;
    font-size: 18px;

}

.menu-bar ul li a{
    text-decoration: none;
    color: white;

}
.active, .menu-bar ul li:hover{
    background-color: rgb(32,178,170);


}

.active{
    background-color: rgb(32,178,170);


}






.submenu1{
    display: none;
    white-space: nowrap;
   
        
}

.menu-bar ul li:hover .submenu1{

    display: block;
    position: absolute;
    background: #566573;
    text-align: center;
    top: 140px;
    left: 50%;
    border-radius: 3px;
    
    
}

.menu-bar ul li:hover .submenu1 ul{

display: block;
list-style-type: none;



}

.menu-bar ul li:hover .submenu1 ul li{
    width: 200px;
    padding: 5px;
    height: 20px;
    font-size: 18px;
    margin-left: -5px;
    margin: 10px;
    text-align: left;

    
    
      
    }

    .menu-bar ul li:hover .submenu1 ul li a:hover{
        color: blue;

        
    }

    .menu-bar ul li a:hover{
        color: blue;

        
    }





	












#banner{

/*background-color: #efefef;*/
width: 60%;
height: auto;

left: 15%;
/*top: 110px;*/
margin-top: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;


}


.pic{
flex: auto;
flex-grow: 0;
margin: 10px;
vertical-align: middle;
margin-left: auto;
margin-right: auto;

}






#main{
padding: 10px 10px;

background-color: white;
width: 80%;
height: auto;

top: 438px;	
margin-top: 30px;
padding-bottom: 40px;

left: 10%;
    border-radius: 7px;
flex-grow: 1;
}



#main h1{
margin: 20px;
font-size: 30px;
}

#main h2{

font-size: 20px;
margin-left: 50px;
margin-right: 30px;
margin-bottom: 5px;
}

#main p{
margin-left: 50px;
margin-right: 30px;
font-size: 20px;

}

.list{
margin-left: 100px;
margin-right: 30px;
font-size: 20px;
}






#footer{
	padding: 10px 10px 10px ;
	background: white;
	text-align: center;
	width: 80%;
	left:10%;
	height: 20px;
	
	bottom: 0px;
	font-size: 18px;
	color: black;

}





        @media  screen and (max-width: 800px){
            .menu-bar{
                width: 80%;
		left: 10%;
            }
            #menubtn{
                display: block;
            }


	#banner{
	background-size: 90vw;
	margin-top: 10px;

	}

	#main{
	height: auto;
	/*top: 200px;*/
	margin-top: 10px;
	}




        }