@import url('https://fonts.googleapis.com/css?family=Chewy|News+Cycle|Poiret+One|Indie+Flower|Spectral:500');

/*full page style*/
html body {
  background-color: #000000;
  max-width: 100%;
  overflow-x: hidden;
}

/*sets width on main content*/
@media only screen and (min-width: 1024px) {
html body div.container-fluid {
max-width:900px;
}}

/*controls hyperlink colors*/
p a {
    color: greenyellow;
}

p a:hover {
    color: seagreen;
}

p a:visited {
    color: darkgreen;
}


/*controls individual slides in background slideshow for index2 html*/
/*
 div#backdrop .col-sm-12#image1 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop.jpeg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image2 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop1.jpeg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image3 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop2.jpg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image4 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop3.jpg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image5 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(/assets/backdrop4.jpeg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image6 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop5.jpeg);
  max-width: 100%;
}

div#backdrop .col-sm-12#image7 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  background-image: url(/assets/backdrop6.jpeg);
  max-width: 100%;
}
*/

/*controls row that background image lives in*/
div#backdrop.row {
  max-width: 100%;
  min-width: 100%;
  height: 100vh;
  position: fixed;
  overflow: visible;
  margin: 0,0,0,0;
}

/*healine and main body styles for hello row*/
div#info .hello{
  font-family:'Indie Flower', cursive;
  position: relative;
  margin-top: 4%;
  margin-bottom: 2%;
  color:#ffffff;
  text-align: center;
}

div#info .hello#contact {
    margin-top: -5px;
}

div#info .hello p {
  text-align: left;
  font-weight: 600;
  margin-left: 2.1em;
  margin-right: 2.1em;
}

.col-sm-6 div.hello p {
  font-family:'News Cycle', sans-serif;
  color: #ffffff;
}

div#info .hello p a {
  color:#ffffff;
}
 
div.hello h3 {
  text-align: left;
}

/*controls headshot image*/
div.headshot {
  text-align: center;
  padding-top:12%;
}

div.headshot img {
    border-radius: 50%;
}

/*healine and main body styles for about me row*/
div#info .about{
  font-family:'Indie Flower', cursive;
  position: relative;
  margin-top: 10%;
  margin-bottom: 2%;
  color:#ffffff;
  text-align: center;
}

div#info .about p {
  font-family:'News Cycle', sans-serif;
  text-align: left;
  font-weight: 600;
  padding-left: 12%;
  padding-right: 10%;
  color: #cccccc;
}

.col-sm-6 div.about p {
  font-family:'News Cycle', sans-serif;
  color: #ffffff;
}

div#info .about p a {
  color:#ffffff;
}
 
div.about h3 {
  text-align: left;
}

/*nav buttons stlyes*/
@media (min-width:1024px) and (max-width:3024px){
div.button {
  background-color: #323232;
  border: 10px;
  border-color: #000000;
  border-radius: 5px;
  color: #ffffff;
  height: 50px;
  width: 50%;
  margin-left: 25%;
  margin-bottom:10px;
  padding-bottom: 60px;
  text-align: center;
}}
 
@media (min-width:100px) and (max-width:1023px){
div.button {
  background-color: #323232;
  border: 10px;
  border-color: #000000;
  border-radius: 5px;
  color: #ffffff;
  height: 50px;
  width: 80%;
  margin-left: 10%;
  margin-bottom:10px;
  padding-bottom: 60px;
  text-align: center;
 }}

 div.button a {
  color: #ffffff;
  text-decoration: none;
  height: auto;
  width: 100%;
  margin: auto;
  padding: 20px;
  display: inline-block;
  cursor: pointer;
 }

div.button p {
  font-family: 'News Cycle', sans-serif;
  text-align: center;
  margin-top: -20px;
}

h1 {
  font-size: 4em;
 }

/*project page styles*/
div#projects h2 {
  color: #ffffff;
  font-family: 'News Cycle', sans-serif;  
  margin-left: .5em;
  margin-right: .5em;
}

div#projects p {
  color: #cccccc;
  font-family: 'News Cycle', sans-serif;
  margin-left: 1.2em;
  margin-right: 1em;
}

/*refrences page styles*/
div#recommendation h5 {
  color: #cccccc;
  font-family: 'News Cycle', sans-serif;
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  font-size: 1.2em;
}

div#recommendation h6 {
  color: #cccccc;
  font-family: 'News Cycle', sans-serif;
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  font-size: 1em;
  padding-bottom: 2%;
}

div#recommendation p {
  color: #cccccc;
  font-family: 'News Cycle', sans-serif;
  margin-left: 1em;
  margin-right: 1em;
  font-style: italic;
}

div#recommendation {
    padding:25px;
}

div#recommendation div.quote {
    margin-top: 4%;
}

/*controls headshot image of recommended on refrences page*/
div#recommendation div.headshot {
  text-align: center;
  padding-top:1%;
}

@media (min-width:10px) and (max-width:650px){
div#recommendation div.headshot img {
  padding-left: 1%;
  margin-bottom: 5%;
}}

/*style for projects slideshow row*/
div#projects .slick-list {
    overflow: none;
    width: 95%;
    height: auto;
    margin-left: 15px;
}

/*style for setting project slides div height*/
div#projects .col-sm-12#project1, .col-sm-12#project2, .col-sm-12#project3, .col-sm-12#project4, .col-sm-12#project5, .col-sm-12#project6, .col-sm-12#project7, .col-sm-12#client-logos {
    height: auto;
}

/*styles for projects images*/

/*stlyes for PGM images*/
div img.thr {
  max-width: 50%;
  padding: 1em;
  float:right;
}

div img.bbl {
  max-width: 50%;
  padding: 1em;
}

@media (min-width:1000px) and (max-width:3024px){
div img.bbl, div img.thr {
  padding-left: 8%;
  padding-right: 8%; 
}}

/*stlyes for TMBI images*/
div img.rd-us {
  width: 95%;
  height: auto;
    margin-left: 2%;
}

@media (min-width:768px) and (max-width:3024px){
div img.rd-us {
  padding-left: 15%;
  padding-right: 15%; 
}}

/*stlyes for HRC images*/
div img.hrc {
  width: 80%;
  height: auto;
  margin-left: 5%;
}

@media (min-width:768px) and (max-width:3024px){
div img.hrc {
  padding-left: 15%;
  padding-right: 15%; 
}}

/*stlyes for Smithsonian images*/
@media (min-width:700px) and (max-width:3024px){
div img.air-space {
  padding-left: 5%;
  padding-right: 5%; 
}}

div img.air-space {
  width: 65%;
  height: auto;
  margin-left: 15%;
}

/*stlyes for CCL images*/
div img.ccl {
  max-width: 50%;
  padding: 1em;
  float:right;
}

div img.cch {
  max-width: 50%;
  padding: 1em;
}

@media (min-width:1000px) and (max-width:3024px){
div img.ccl, div img.cch {
  padding-left: 10%;
  padding-right: 10%; 
}}

/*styles for client logos*/
div img.logos {
  max-width: 100%;
  height: auto;
  padding: 5px;
}

@media (min-width:1000px) and (max-width:3024px){
div img.logos {
  padding-left: 5%;
  padding-right: 2%; 
}}

@media (min-width:1000px) and (max-width:3024px){
div img.logos-small {
  display: none;
}}

@media (min-width:10px) and (max-width:999px){
div img.logos {
  display: none;
}}

@media (min-width:10px) and (max-width:999px){
div img.logos-small {
  display: block;
  width: 100%;
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
}}

/*stlye for individual slides image div container*/
div.pro-img {
  text-align: center;
}

/*footer and copyrights stlye*/
div.copyright p {
  color: #ffffff;
  font-family: 'Poiret One', cursive;
}
 
/*styles for hire me column*/
div.resume{
  color:#ffffff;
  font-family:'Indie Flower', cursive;
  text-align: center;
}

div.resume img {
  width:100px;
}

/*styles for Linked in column*/
div.linkedin {
  color:#ffffff;
  font-family:'Indie Flower', cursive;
  text-align: center;
}

div.linkedin img {
  width:100px;
}