/* CSS Document */



* {
  box-sizing: border-box;
}


.bar {
  background-color: blue; rgb(245, 193, 97);
  width: 100%;
  height: 40px;
  display: flex;
  list-style: none;
  padding: 0;
}

.bar li {
  height: 100%;
  width: 310px; 
  border-right: 1px solid rgb(235, 177, 69);
}

.bar li a {
  color: yellow; black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.bar .has-dropdown ul li a{
padding: 12px 0;
}

.bar li a:hover {
  background-color: #4771B8; 
}

.bar li a.active {
  background-color: blue; rgb(165, 113, 16);
  color: yellow; white;
}

.dropdown {
  background-color: rgb(245, 193, 97);
  padding: 0;
  list-style: none;
  display: none;
}

.bar li.has-dropdown:hover .dropdown {
  display: block;
}





body
{
  background-color:#CCFFFF;
}

#wrapper
{
  width: 1000px;
  margin: 0 auto;
  /*background-color:#FFFF99;*/
}

#top
{
  position: relative;
  width: 1000px;
  height: 250px;
  margin: 0 auto;
  margin-top: 50px;
  /*background-color: #99FFFF;*/
}

#logo
{
  position: absolute;
  width: 120px;
  height: 120px;
  left: 880px;
  top: 0px; 
  /*background-color: #FFFF00;*/
}



#intro
{
  width: 1000px;
  padding: 20px;
  text-align: left;
  margin: 10px 0px 0px 0px;
  background-color:#FFFFFF;
}

#pics
{
  width: 960px;
  padding: 20px;
  text-align: left;
  margin: 20px 0px 0px 0px;
  background-color:#CCFFFF;
}

#row1, #row2, #row3
{
  position: relative;
  width: 960px;
  height: 500px;
  text-align: center;
  /*background-color: #FFFF99;*/
}

#row2 { margin-top: 20px; }
#row3 { margin-top: 20px; }

#pic1, #pic2, #pic3, #pic4, #pic5, #pic6
{
  position: absolute;
  top: 0px;
  width: 300px;
  height: 267px;
  text-align: center;
  border: 1px solid #000000;
  overflow: hidden;
  /*background-color: #99FFCC;*/
}

#cap1, #cap2, #cap3, #cap4, #cap5, #cap6
{
  position: absolute;
  top: 300px;
  width: 300px;
  height: 35px;
  text-align: center;
  font-family: Arial;
  font-size: 12px;
  /*background-color: #FF00FF;*/
}

#pic1, #cap1 { left: 100px; } 
#pic2, #cap2 { left: 600px; }

#pic3, #cap3 { left: 100px; }
#pic4, #cap4 { left: 600px; }

#pic5, #cap5 { left: 100px; }
#pic6, #cap6 { left: 600px; }

h1
{
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #336699;
}

h2
{
  font-family: Arial;
  font-size: 17px;
  font-weight: normal;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
  color: #336699;
}

p
{
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  text-align: justify;
  margin-top: 10px;
  margin-bottom: 5px;
  line-height: 1.2;
}

#footer
{
  width: 980px;
  padding: 10px;
  text-align: center;
  font-family: Arial;
  font-size: 12px;
  margin: 10px 0px 20px 0px;
  background-color:#CCFFFF;
}