* {
    box-sizing: border-box;
    }
.container {
    position: absolute;
    width: 100%;
    left: 0%; 
    right: 0%;
    bottom: 0px;
    top: 0px;
    padding: 16px;
}
/* Add a black background color to the top navigation */
#topnav {
  width: 100%;
  background-color: #000;
  overflow: hidden;
  
}

#topnav a, .dropdown-content a {
  float: left;
  display:block;
  padding: 0px 25px;
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 12px;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #4682B4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: left;
  display:block;
  padding: 14px 16px;
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.dropdown-content a:hover {
  background-color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}


#topnav a:hover {
  background-color: green;
  color: black;
}

.active {
  background-color: green;
  padding: 0px 0px;
    margin: 0px 0px;
}

@media screen and (max-width: 500px) {
  /* .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }*/
}
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
 /* .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }*/
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  /* .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }*/
}
#topnav .search-container {
  float: right;
}

#topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 10px;
  margin-right: 16px;
  background: #ddd;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

#topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px)  {
  /*.topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }*/
}

.menu ul {
    list-style-type: none;
    margin: 5;
    padding: 5;
}
.menu li {
    padding: 8px;
    margin-bottom: 2px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #4682B4;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 5px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.banner{
 background-color: #4682B4;
    padding: 3px;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);     
}
.header {
    background-color: #ffffff;
    color: #ffffff;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
}
.heading{
 background-color: #4682B4;
    padding: 3px;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);   
}
.slider{
  max-width: 100%;
  height: auto;
}


.body  {
  background-image:  url("background-image.jpg"); 
  background-color: #cccccc;
}




.main
{
    background-color: #ffffff;
    padding: 5px;
    text-align: left;
    font-size: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
    .aside {
    background-color: #ffffff;
    padding: 15px;
    color: #000000;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #ffffff;
    text-align: center;
    font-size: 18px;
    padding: 5px 30px;
}
.footer a{
color: #ffffff;
text-decoration: none;
}
.footer a.active {
color: #ffffff;
}
.footer a.visited{
color: #ffffff;
}
  .footer.fa {
  padding: 20px;
  font-size: 40px;
  width: 50px;
  text-align: center;
  text-decoration: none; 

 }

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */
/* verified */
.icon-background1 {
     color: #ADD8E6;
}
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
  padding: 20px;
  margin: 5px 2px;
  border-radius: 50%;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
  padding: 20px;
 margin: 5px 2px;
 border-radius: 50%;
}

.fa-youtube {
  background: #bb0000;
  color: white;
  padding: 20px;
  margin: 5px 2px;
  border-radius: 50%;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
/*@media only screen and (min-width: 600px) {
    /* For tablets: 
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}*/
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
img {
  max-width: 100%;
  height: auto;
}
video {
  width: 100%;
  height: auto;
}

.sm {
   font-size:14px;
  color:black; 
}
div.polaroid {
  width: 200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.title {
  padding: 10px 10px;
}
.accordion {
  background-color: #4682B4;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #4682B4;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}



.pane {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
 overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.btn{
background-color: #4682B4; 
color: white; 
font-size:16px; 
border-radius: 12px; 
padding: 5px 5px;
}