html {
  overflow: auto;
  background: white;
}

/* --- ======= CONTAINER DIV's -- | CONTENT | MAINCONTENT  | RESUME | PROTFOLIO  | PORTFOLIO MAINCONTENT | ======= --- */

.content {
  margin: auto;
  max-width: 1300px;
  min-height: 100vh;
  width: 90%;
}

.maincontent {
  margin: 20px 0px;
  padding: 0px 30px;
}

.resume {
  padding: 20px 70px 0px 70px;
}

.p-content {
  background: white;
}

.p-maincontent {
  margin: 20px 0px 0px 0px;
  padding: 0px 50px 20px 50px;
  border-right: none;
}

/* --- ======= SMALL SCREEN CONTAINER DIV's -- | CONTENT | MAINCONTENT  | RESUME  | ======= --- */

@media (max-width: 60em) {
  .content {
    margin: auto;
    width: 100%;
    background: white;
  }
  .maincontent {
    margin: 5px;
    padding: 0px 10px;
  }
  .resume {
    padding: 20px 25px 0px 20px;
  }
}

/* --- ======= SMALL SCREEN CONTAINER DIV's -- | PROTFOLIO | ======= -- */

@media (min-width: 960px) {
  .p-content {
    margin: auto;
    max-width: 1000px;
    min-height: 700px;
    width: 90%;
    background: white;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  }

}

/* --- ======= SMALL SCREEN CONTAINER DIV's -- | PORTFOLIO MAINCONTENT | ======= -- */

@media (min-width: 38em) {
  .p-maincontent {
    margin: 20px 0px 0px 0px;
    padding: 0px 65px 20px 65px;
  }
}
@media (max-width: 450px) {
  .p-maincontent {
    margin: 20px 0px 0px 0px;
    padding: 0px 10px 20px 10px;
    border-right: none;
  }

}

/* --- ======= LEFT MENU STYLES ======= -- */

.leftmenu {
  padding: 20px 20px;
  height: 100%;
}

/* --- ======= NAVIGATION STYLES ======= -- */

header {
  z-index: 99;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  background-color: white;
  margin: 0;
  padding: 0;
}

nav {
  padding: 20px 50px !important;
  max-width: 1355px;
  z-index: 99;
  color: rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav li {
  display: inline;
}

nav a,
nav a:link,
nav a:visited {
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1.3px;
  font-size: 1.1em;

  display: block;
  margin: 0%;
  padding: 1% 2%;
  color: rgba(0, 0, 0, 0.8) !important;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  border-radius: 3px;
  color: rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
}

/* --- ======= NAVIGATION SMALL SCREENS ======= -- */

@media only screen and (min-width: 38em) {
  nav ul {
    text-align: right;
    list-style-type: none;
  }

  nav a,
  nav a:link,
  nav a:visited {
    display: inline-block;
  }
}

/* --- ======= NAVIGATION FLOAT CONTENT STYLES ======= -- */
.left {
  float: left;
  width: 40%;
  height: 35px;
  vertical-align: bottom;
}

.right {
  float: right;
  width: 60%;
  height: 35px;
  vertical-align: bottom;
}

/* --- ======= LINKS STYLES ======= -- */

a {
  text-decoration: none;
  cursor: pointer;
  color: #336799;
}

a:hover {
  text-decoration: none;
  color: #84b5e3;
}

/* --- ======= HEADERS STYLES ======= -- */

h1 {
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 2em;
  line-height: 1.2em;
  font-style: normal;
  color: #333333;
  text-align: center;
}

h2 {
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1.3px;
  font-size: 1.1em;
  text-transform: uppercase;
}

h3 {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #336799;
  font-weight: 500;
  font-size: 1.3em;
  padding: 0em;
  margin: 0.5em 0em 1em 0em;
  display: inline-block;
}

h4 {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  font-weight: light;
  font-size: 1.5em;
  padding: 0em;
  margin: 1em 0em;
  display: inline-block;
}

h5 {
  font-family: verdana, helvetica, arial, sans-serif;
  color: #336799;
  font-weight: 300;
  line-height: 1.3em;
  font-size: 1em;
  padding: 0em;
  margin: 0.5em 0em 0em 0em;
  display: inline-block;
}

h6 {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  font-weight: 200;
  font-size: 1.5em;
  padding: 0em;
  padding-top: 10px !important;
  margin: 1em 0em 0.3em 0em;
  letter-spacing: 0.04em;
}

@media only screen and (max-width: 960px) {
  h1 {
    font-size: 1.5em;
  }
  }


/* --- ======= BODY COPY STYLES ======= -- */

p {
  padding: 0px;
  margin: 0px;
  font-size: 0.8em;
  line-height: 1.5em;
  font-family: verdana, "helvetica neue", arial, sans-serif;
  letter-spacing: normal;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.5);
}

p2 {
  display: inline-block;
  padding: 0em;
  margin: 0em 0em 0.6em 0em;
  font-size: 1em;
  line-height: 1.3em;
  font-family: verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  color: #424242;
}

p3 {
  padding: 0px;
  margin: 0px;
  font-size: 1em;
  line-height: 1.4em;
  font-family: verdana, helvetica, arial, sans-serif;
  letter-spacing: normal;
  font-weight: 100;
  color: #424242;
}

p4 {
  font-size: 1.2em;
  font-family: verdana, helvetica, arial, sans-serif;
  letter-spacing: normal;
  text-align: center;
  font-weight: 100;
  color: #424242;
  line-height: 1.6em;
}

p5 {
  padding: 0px;
  margin: 0px;
  font-size: 0.8em;
  line-height: 1.5em;
  font-family: verdana, helvetica, arial, sans-serif;
  letter-spacing: normal;
  font-weight: 100;
  color: white;
}

.backToPort {
    font-family: franklin-gothic-urw, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    color: #333333;
    letter-spacing: 1.3px !important;
    font-size: 1.1em;
  }

.centerText{
text-align: center;
}

/* --- ======= INDIVIDUAL PORTFOLIO PAGE PULL TEXT STYLES ======= -- */

.pullInfo ul li {
  padding: 0px;
  margin: 0px;
  font-size: 1.1em;
  line-height: 2em;
  font-family: verdana, "helvetica neue", arial, sans-serif;
  letter-spacing: normal;
  Color: rgba(0, 0, 0, 0.8);
}

.pullInfo p {
  padding: 0px;
  margin: 0px;
  font-size: 1em;
  line-height: 1.5em;
  font-family: verdana, "helvetica neue", arial, sans-serif;
  letter-spacing: normal;
  Color: rgba(0, 0, 0,0.7);
}

.pullInfo {
  padding: 30px 50px;
  
  /*background-color: rgb(247, 247, 247); */
}

.pullInfoContainer{
  background-color: rgb(247, 247, 247);
}



/* --- ======= INDIVIDUAL PORTFOLIO PAGE Content STYLES ======= -- */

.portfolioPageContent {

  width: 45%;



}
@media only screen and (max-width: 960px) {
  .portfolioPageContent {
    width: 90%;
  }
  .pullInfo {
    padding: 15px 15px;

  }

}






/* --- ======= EASY CALL PADDING AND MARGIN STYLES ======= -- */

.extraPadding{
  padding: 25px 50px;
}

.autoMargin{
margin: 0px auto;

}

.pt-20 {
  padding-top: 20px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-150 {
  padding-top: 150px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-150 {
  margin-top: 150px;
}

.pb-20{
  padding-bottom: 20px;
}

.pb-50{
  padding-bottom: 50px;
}

.pb-100{
  padding-bottom: 100px;
}

.pb-150{
 padding-bottom: 150px;
}


.mb-20{
  margin-bottom: 20px;
}

.mb-50{
  margin-bottom: 50px;
}

.mb-100{
  margin-bottom: 100px;
}

.mb-150{
  margin-bottom: 150px;
}

@media only screen and (max-width: 607px) {
  .mt-150 {
    margin-top: 50px;
  }
}



/* --- ======= EASY CALL UNDERLINE ELEMENT ======= -- */

.underline {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 5px !important;
  padding-bottom: 15px !important;
  margin-top: 2px !important;
}

/* --- ======= EASY CALL HIDDEN ELEMENT ======= -- */

.hidden {
  display: none;
}

/* --- =======  HOMEPAGE PORTFOLIO TEXT OVERLAY ======= -- */

.homepageImageContainer {
  position: relative;
  cursor: pointer !important;
}

.portfolioImage {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
  cursor: pointer !important;
}

.homepageTextOverlay {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  bottom: 25%;
  width: 100%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer !important;
}

.homepageImageContainer:hover .portfolioImage {
  opacity: 0.2;
  cursor: pointer !important;
}

.homepageImageContainer:hover .homepageTextOverlay {
  opacity: 1;
  cursor: pointer !important;
}

.overlayText {
  font-size: 1.5em;
  letter-spacing: 0.8px;
  line-height: 1.3em;
  font-family:  franklin-gothic-urw, sans-serif;
  font-weight: 400;


 
  color: #333333;
    padding: 16px 32px;
  cursor: pointer !important;
}




/* --- ======= PHOTOTOGRAPHY PORTFOLIO PAGE TEXT OVERLAY ======= -- */

.photographyImageContainer {
  position: relative;
}
.photographyImage {
  display: block;
  width: 100%;
  height: auto;
}
.photographyOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #111;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
}

.photographyImageContainer:hover .photographyOverlay {
  height: 35px;
}

.photographyText {
  font-size: 0.8em;
  font-family: verdana, helvetica, arial, sans-serif;
  letter-spacing: normal;
  font-weight: 100;
  line-height: 1.5em;
  white-space: nowrap;
  color: white;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* --- ======= PORTFOLIO HEADER IMAGE STYLES ======= -- */

.topHeaderImage {
  margin-top: -30px;
  max-height: 500px;
  width: 100%;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

/* --- ======= PORTFOLIO IMAGE CAPTIONS ======= -- */

.figcaption {
  padding: 10px 0px;
  margin: 3px 0px 10px 0px !important;
  font-size: 0.8em;
  font-family: verdana, "helvetica", arial, sans-serif;
  letter-spacing: normal;
  font-weight: lighter;
  text-align: center;
  color: #959595;
  line-height: 1.5em;
}

/* --- ======= PORTFOLIO VIDEO STYLES ======= -- */

video {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 700px;
  border: 3px solid black;
}

/* --- ======= HOMEPAGE STICKY MOTTO STYLES ======= -- */

#stickyMotto {
  position: fixed;
  bottom: 35px;
  margin-left: -155px;
}

@media only screen and (max-width: 1255px) {
  #stickyMotto {
    display: none;
  }
}

/* --- ======= CONTACT INFORMATION STYLES ======= -- */

.media-icons {
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: top;
}
.contact-media {
  max-width: 30px;
  max-height: 30px;
  display: inline-block;
  vertical-align: top;
}
.contact {
  max-width: 50px;
  display: inline-block;
  vertical-align: top;
}

.messageMeButton {
  background-color: white;
  border-bottom: 3px solid LightGrey;
  border-right: 2px solid LightGrey;
  border-radius: 5px;
  padding: 10px 10px;
  max-width: 280px;
}
.messageMeButton:hover {
  background-color: #e7e7e7;
  border-bottom: 3px solid #e7e7e7;
  border-right: 2px solid #e7e7e7;
  cursor: pointer;
}

#MessageMe,
#MessageMe2 {
  color: #336799;
  padding-bottom: 2px;
}



/* --- ======= art Gallary ======= -- */

.artImageContainer {
  position: relative;
  padding:5px;
}

/* --- ======= CUNKNOWN OR DELETABLE ======= -- */

.pageFooter {
  background-color: #696969;
  color: white;
  display: block;
  margin: 0px 0px 28px 0px;
  padding: 20px 30px 45px 30px;
  box-shadow: 0px 1px 1px #737373;
}


.title-fname {
  font-weight: light;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  color: #336799;
  padding: 0px;
  margin: 0px;
}

.title-lname {
  font-weight: bold;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 4.5em;
  letter-spacing: 0.1px;
  color: #336799;
  padding: 0px;
  margin: -35px 0px 0px 0px;
}

.sidemenu-seperators {
  border-top: 1px solid rgba(11, 11, 11, 0.3);
  border-bottom: 1px solid rgba(11, 11, 11, 0.3);
  margin: 15px 0px;
  padding: 15px 0px;
}


/* --- ======= art Gallary small screen ======= -- */

.smallScreenBlock {
  display: inline;
}

@media only screen and (max-width: 400px) {
  .smallScreenBlock {
    display:block;
    padding-bottom: 20px;
  }
}