/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
    display: block;
   }
   nav a { 
       background-color: #373434; 
       color: white; 
       text-decoration: none; 
       font-family: 'Open Sans', sans-serif;
       outline: none; 
       padding:10px 0; 
       display: block; 
       float: left; 
       border-right: solid 1px silver; 
       border-top-left-radius: 5px; 
       border-top-right-radius: 5px; 
       width: 25%; 
       text-align: center; 
       box-sizing: border-box; 
       /* Box sizing for older browsers */ 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box; 
     }
     /* Unvisited and visited link styling */ 
    nav a:link, nav a:visited { 
       background-color:#373434; 
       color: white; 
       } 
    /* Styling for hover and tap */ 
    nav a:hover, nav a:active { 
       background-color: #fab11b; 
       color: black; 
       } 
   /* Get rid of white border around browser window */
   body {
    margin: 0;
    padding: 0;
   }
   /* Get rid of large margins on headings */
   h1, h2, h3, h4, h5, h6 {
     text-align: center;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    
   }
   #wrapper {
    /* Set your own widths, % for fluid, px for fixed */
    width: 100%;
    min-width: 780px;
    max-width: 1260px; /* Vertical margins, and auto to center */
    margin: 0 auto;
   }
   footer {
       background: #373434;
       color: #ccc;
       font-family: 'Verdana', sans-serif;
       width: 100%;
       height: 150px;
       margin: 0 auto;
     }
     * {
        box-sizing: border-box;
      }
.responsive {
  width: 100%;
  max-width: 625px;
  height: auto;
  opacity: 0.9;
}
img:hover {
  opacity: 1.0;
}
.responsive1 {
  width: 100%;
  max-width: 1260px;
  height: auto;
  opacity: 1.0;
}
.responsive2 {
  width: 100%;
  max-width: 1260px;
  height: auto;
  opacity: 0.8;
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}
article {
  padding: 10px;
  display: table-cell;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */ 
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #373434;
color: white;
padding: 12px 20px;
border: 4px double #cccccc;
border-radius: 10px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #fab11b;
color:black
border-radius: 10px;
border: 4px double #cccccc;
}

/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

button {
  display: inline-block;
  background-color: #343434;
  border-radius: 10px;
  border: 4px double #cccccc;
  color: #fab11b;
  text-align: center;
  font-size: 16px;
  padding: 15px;
  width: 275px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #fab11b;
  color: #343434;
}