/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   */

   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure, 
   footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

/*=========================================
    Main Styles
    =========================================*/
    body {
      font-family: arial;
         
      
    }



    .container {
      border-radius: 50px;
      background-color: #f2f2f2;
      padding: 75px;
      background-image: url("http://www.geocities.ws/n_alvarez/image/stack.jpg");
      background-repeat: no-repeat;
      background-size: 100%;
    }

    input[type=text] {
    width: 75%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

    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: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}


    div.a {
      text-align: center;
    }

    div.b {
      text-align: left;
    }

    div.c {
      text-align: right;
    }

    div.c {
     text-align: justify;
    } 

    h2 { 
    display: block;
    font-size: 42px;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
  }


    .header {
      width: 100%;
      height: 38px;
      overflow: hidden;
      background-color: #FFD700;
      padding: 35px 2px;
      font-family:  Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
      font-size: 22px; 
          
    }


    .header a {
      float: left;
      color: black;
      text-align: right;
      padding: 42px;
      text-decoration: none;
      line-height: 1px;
      border-radius: 2px;
}

    .gallery {

      margin: 0 auto;
     border: 1px solid #ccc;
      float: right;
      width: 180px;
}

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

    .gallery img {
      width: 100%;
      height: auto;
}

    .desc {
      padding: 15px;
      text-decoration-color: inherit;
      text-align: center;
}

.column {
  float: left;
  width: 23.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}



/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}
.logo {
  font-family: 'Hind', sans-serif;
  font-size: 30px;
  font-weight: bold;
  font-size: 40px;
  letter-spacing: -2px;
  text-shadow: 4px 4px 2px #c4c4c4;

}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-center {
  display:inline;
  float: left;
  margin: 2px auto;
}

.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
}
.column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
}

.main-content img {
float: left;
padding: 0 20px 20px 0;
}


/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: white;
      color: black;
      text-align: center;
    }