* {
 box-sizing: border-box;
}
body, html{
margin: 0;
padding: 0;
height: 100%;
font-family: 'Alegreya', serif;
}
.navfont{
font-family: 'Roboto', sans-serif;
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 320px;
  height: 240;
}

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

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

div.desc {
  padding: 15px;
  text-align: center;
}
.contento{
	display: flex;
  	flex-flow:row wrap;
 	min-height: 100vh;
	background-color: white;
	padding: 10px;
	line-height: 2;
  	}
.top, .about{
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.top{
background-image: url('../images/main1.jpg');
min-height:100%;
border-top: 20px;
border-bottom: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.about{
background-color: #fffff;
min-height:60%;
}
.projects_current{
background-color: gray;
min-height:250px;
padding: 4% 4%;
}
.projects_past{
background-color: #fffff;
min-height:250px;
padding: 4% 4%;
}
.galboder{
  border: 2px white dashed;
  font-size: 26px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 1%;
}
/*
Below is for projects width
*/
 .proj_with{
    padding: 2% 0%;
    margin: 2% 0%;
    }
.contact{
background-color: #fffff;
min-height:80%;
}

.textCenter {
text-align: center;
}
*section{
  overflow: auto;
}

.top_text{
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-weight: bold;
}
.bgC{
  max-width:1200px;
  margin-right:auto;
  margin-left:auto;
  background-color: gray;
  margin-top: 10px;
  }
.imgheading{
  text-align: center;
}
  /* Full-width input fields */
  input[type=text], input[type=password] {
      width: 100%;
      padding: 10px;
      margin: 0 0 5px 0;
      border: none;
      background: #f1f1f1;
  }

  input[type=text]:focus, input[type=password]:focus {
      background-color: #f1f1f1;
      outline: none;
  }

  /* Set a style for the submit button */
  .btn {
      background-color: #f1f1f1;
      text-align: left;
      color: black;
      text-decoration: none;
      padding: 5px 5px;
      border: none;
      cursor: pointer;
      width: 100%;

  }

.diag{
 opacity: 0.2;
}
.pad{
  max-width:1200px;
  margin-right:auto;
  margin-left:auto;
  padding-top:20px;
  padding-bottom:20px;
  padding-left: 5px;
}
.textW{
  color: white;
}
.textR{
  color: #b33c00;
}
.textB{
  color:blue;
}
.linkDec{
  text-decoration: none;
}
.imgCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.imgCenter2 {
  display: block;
  margin-left: auto;
  margin-right: 0px;
  width: 590px;
  height: 365px;
  /*
  max-width: 600px;
  max-width: 400px;
  */
 }
.bac{
maxi-width:100%;
position: sticky;
background-color: aquamarine;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
  }
  .gridGallery{
    display: flex;
    flex-direction: column;
    max-width:320px;
    margin-right:auto;
    margin-left:auto;
   }
  .contento{
    display: flex;
      flex-flow:row wrap;
    min-height: 100vh;
    background-color: white;
    padding: 10px;
    line-height: 2;
      }
  .gridAbout{
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width:320px;
    padding: 2px;
   }
   .gridProject{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: auto;
    }
   .gridContact{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-width:320px;
    margin-right:auto;
    margin-left:auto;
    padding: 2px;
    }
    .fot{
    background-color:rgb(85, 82, 82);
    color: white;
    height: 180px;
    width: 100%;
    position: absolute;
    }

   @media (min-width: 588px) {
    .gridGallery{
    display: grid;
    max-width:1200px;
    margin-right:auto;
    margin-left:auto;
    grid-template-columns:repeat(3, 1fr);
    }
    .gridAbout{
      display: grid;
      max-width:1200px;
      margin-right:auto;
      margin-left:auto;
      grid-template-columns:repeat(2, 1fr);
      padding-top: 2%;
      padding-bottom: 2%;
      }
    .gridProject{
       max-width:1200px;
        margin-right:auto;
        margin-left:auto;
        display: grid;
        grid-template-columns:repeat(3,1fr);
        padding-top: 2%;
        padding-bottom: 2%;
       }
    .gridContact{
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      max-width:1200px;
      margin-right:auto;
      margin-left:auto;
      grid-template-rows: auto auto;
      padding-top: 2%;
      padding-bottom: 2%;
      }
.footColor{
        background-color:rgb(85, 82, 82);
        color: white;
        height: 180px;
        width: 100%;
        }
    .gridFooter{
        max-width:1200px;
        margin-right:auto;
        margin-left:auto;
        display: grid;
        grid-template-columns:repeat(4,1fr);
        }
 #my-nav-container{
        max-width: 1200px !important;
        margin-left: auto;
        margin-right: auto;
         }
.imgsize{
       width: 385px !important;
       height:288px !important;
     }
.con{
    text-align:center;  
}
.conL{
    text-align: left !important;
}
.conR{
    text-align: right !important;
}
.conO{
    text-align: left !important;
     padding: 50px !important;
}
.alignH{
    padding-top:50px; 
  }

}
 .socColor{
  color: blue;
}
.upTop{
width:100%;
height:20px;
position:fixed;
background-color:black;
top:0px;
}
.tNav{
top:20px !important;
}
.texContact {
  text-align: center;
  }
.con{
    text-align:center;
    padding: 10px;
}
.conL{
    text-align: center;
    padding: 10px;
}
.conR{
    text-align: center;
    padding: 10px;
}
.conO{
    text-align:center;
    padding: 10px;
}
.alignH{
    padding-top:0px; 
  }
 .imgsize{
    width: 320px !important;
    height:240 !important;
     }
.space{
  margin-top: 20px;
}
.footColor{
    background-color:rgb(85, 82, 82);
    color: white;
    width: 100%;
    height: auto;
    }
.returnHome{
  background-color: #777;
  height:20px;
  text-align: left;
}