@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');

body {
    margin: 0;
    padding: 0;
}

div {
    overflow: hidden;
}

/* The hero image */
.hero-image {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/lavarella.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: brightness(75%);
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 25px;
  padding: 20px;
  border: 1px solid white;
}

.container {
	max-width: 1400px;
	text-align: center;
    margin: 0 auto;
    padding: 60px 10px;
}

.text-right {
    width:45%;
    display: inline-block;
}

.text-right h1, .text-right p {
    text-align: left;
}

.image-left {
    width:40%;
    padding-right: 40px;
    padding-bottom: 48px;
    display: inline-block;
}
.image-left img {
    width: auto;
    max-width: 425px;
    height: auto;
    max-height: 425px;
    float: right;
    margin-right: auto;
    margin-top: auto;
}

@media screen and (max-width: 700px) {
    .text-right {
      width: 100%;
    }
  }

@media screen and (max-width: 700px) {
.image-left {
    width: 100%;
}
}
/* CSS for Footer */
 .footer-distributed{
    background-color: #f8f9fa;
    color: rgba(0,0,0,.5);
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	font: bold 16px sans-serif;
	padding: 30px 50px 20px 50px;
}

.footer-distributed p {
    text-align: center;
}

.fa {
    cursor: pointer;
    color: rgba(0,0,0,.5);
    margin-right: 15px;
}
.fa:hover {
    opacity: 0.7;
  }

#copyright {
    padding-top: 15px;
}

/* CSS for Photo page*/

.row-padding {
    padding: 0px 8px;
    text-align: center;
}

.row-padding:after , .row-padding:before {
    content: "";
    display: table;
    clear: both;
}

.half {
    width: 48%;
    display: inline-block;
}

.left {
    padding-right: 4px;
    vertical-align: top;
}

.right {
    padding-left: 4px;
    vertical-align: top;
}

.half img{
    padding-bottom: 8px;
    width: 100%;
}

.banner-image {
    position: relative;
    width: 100vw;
    height: 60vh;
}
.banner-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: brightness(60%);
}

.banner-text {
  text-align: center;
  position: absolute;
  font-family: 'Raleway', sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 25px;
  padding: 5px 15px;
  border: 1px solid white;
}

.banner-text h1{
    margin-bottom: 0px;
}

.photography-image::before {
    background-image: url("images/africa-sunset.jpg");
}

.resume-image::before {
    background-image: url("images/seattle.png");
}

.contact-image::before {
    background-image: url("images/boat.jpg");
}

.form-group {
    text-align: left;
}
.form-group input {
    margin-bottom: 10px;
}

/* Resume CSS */

.column{
    float: left;
    padding: 10px;
}

.company {
    width: 18%;
}

.duration {
    width: 18%;
    text-align: right;
}

.experience {
    width: 64%;
}

.resume-row {
    padding-top: 25px;
    text-align: left;
}

.resume-row::after {
    content: "";
    display: table;
    clear: both;
}

.center {
    margin-bottom: 25px;
    text-align: center;
}

.education {
    width: 82%;
}

.stack {
    padding-top:0px;
}

.half img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}