@font-face{
	font-family: gothambold;
	src: url(Gotham-Bold.ttf);	
}
@font-face{
	font-family: gothambook;
	src: url(Gotham-Book.ttf);	
} 
@font-face{ 
	font-family: gothamlight;
	src: url(Gotham-Light.ttf);	
}
@font-face{
	font-family: gothammedium;
	src: url(Gotham-Medium.ttf);	
}

.flex-row{
    display:flex;
    display:-webkit-flex;
    -webkit-flex-direction:row;
    flex-direction:row;
	justify-content: center; 

}

body{
    display:block;
    margin:0px;

}

.signature{
    
/*    border: solid red;*/
    height: auto;
    width:100%;
    font-family: gothamlight;
    text-align: center;
    padding-top:20px;
/*    width:100%;*/
/*    height: 100%;*/
}

#signaturestuff{
    
    margin:auto;
    display: block;
}


.menucontainer{
    
    width:100%;
    height:auto;
    font-family: gothamlight;
    line-height: 100%;
/*    border: solid yellow;*/
}

ul {
    list-style-type: none;
    width: 100%;
/*    position: fixed;*/
    margin: 0;
    padding: 0px;
    overflow: hidden;
/*    position: fixed;*/
    background-color: lightgray;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: white;
}

.active {
    background-color: grey;
}

.nicetomeetyou{
    width:100%;
    height: auto;
/*    border: solid black;*/
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: gothamlight;
    margin-top:50px;
    margin-bottom: 50px;
}

.introcontainer{
    
    width:100%;
    height:auto;
/*    border: solid pink;*/
    margin: 0 auto;
    margin-bottom: 50px;
    
    
}

.mainpic{
    
    width:50%;
    height:auto;
/*    border:solid blue;*/
    margin:auto;
    
    
 

}
#keirthpic {
    max-width: 60%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 10px;
    
}

.introcontent{
    font-family: gothamlight;
    width:50%;
    height:auto;
/*    border:solid red;*/
    display:block;
    line-height: 200%;
    padding:100px;
    
}

.footer{
    width:100%;
    height:auto;
    background-color: lightgray;
    
/*    This is just place holder stuff*/
    
    text-align: center;
    padding-top: 40px;
    padding-bottom:40px;
    font-family: gothamlight;
    font-size: 13px;
    
}

/*Stuff for the about.html file*/

.mission{
    
    height:auto;
    width:50%;
/*    border:solid red;*/
    margin: 0 auto;
    font-family: gothamlight;
    line-height: 200%;
    margin-bottom: 50px;
    
}

.passion{
    
    height:auto;
    width:50%;
/*    border:solid red;*/
    margin: 0 auto;
    font-family: gothamlight;
    line-height: 200%;
    margin-bottom: 50px;
}

/*Stuff for the project.html file*/

.slidebig{
    width:100%;
    height: auto;
    background-color: black;
}
.slidecontainer{
    
    width:100%;
    height: 500px;
    border:solid black;
    overflow: hidden;
    max-height: 510px;
    max-width: 728px;
    margin: 0 auto;
    margin-bottom: 100px;
    margin-top: 20px;
/*
    background-image: url(DSTRpic.jpg);
    max-width: 100%;
    max-height: 100%;
    margin: 0px;
    margin-top: 30px;
    margin-bottom:30px;
    position: relative;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
*/
    

    
}

/*Slideshow*/


/*
#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}
*/

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background-image: url(DSTRpic.jpg);
    max-width: 100%;
    max-height: 100%;
    margin: 0px;
    margin-top: 30px;
    margin-bottom:30px;
    position: relative;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

.slide:nth-child(2) {
  background-image: url(keirthpicture.JPG);
    max-width: 100%;
    max-height: 100%;
    margin: 0px;
    margin-top: 30px;
    margin-bottom:30px;
    position: relative;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}



/*Slideshow end*/











.projectcontainer{
    
    width:100%;
    height: auto;
/*    border: solid red;*/
    font-family: gothamlight;
    line-height: 200%;
    margin-top:20px;
    margin-bottom: 50px;
    
}

.projectone{
    width:30%;
    height:auto;
/*    border: solid blue;*/
    margin-right: 10px;
    
}

.projectbutton {
    background-color: lightblue; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
/*    font-family: gothamlight;*/
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid gray;
}

.button1:hover {
    background-color: lightgray;
    color: white;
}



.projecttwo{
    width:30%;
    height:auto;
/*    border: solid yellow;*/
    margin-left:10px;
    margin-right:10px;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid gray;
}

.button2:hover {
    background-color: lightgray;
    color: white;
}


.projectthree{
    width:30%;
    height:auto;
/*    border: solid black;*/
}
.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid gray;
}

.button3:hover {
    background-color: lightgray;
    color: white;
}



/*Resume file*/

.resumecontainer{
    
    height: 700px;
    width:80%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
/*    border:solid black;*/
    
}

#resume{
    width:100%;
    height: 100%;
    border: solid black;
}


/*FRD File*/
.frdcontainer{
    
    width:100%;
    height: 500px;
    border: solid red;
}

.frdinfo{
    width:70%;
    height: auto;
    border: solid black;
    font-family: gothamlight;
    line-height: 150%;
    
    
}

.frdpic{
    width:30%;
    height: auto;
    border: solid pink;
    background-image: url(firstresponder.jpeg);
    max-width: 100%;
    max-height: 100%;
    margin: 0px;
/*
    margin-top: 30px;
    margin-bottom:30px;
*/
    position: relative;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    
}