/* Create two equal columns that floats next to each other */
.column {
  float: left;
}

.column.left {
  margin-left: 5%;
  width: 35%;
}

.column.right {
  margin: 2% 5% 0% 5%;
  width: 50%;
  border: 6px solid #333333;
  background-color: #F2F2F2;
}

.column.right p {
  font-family: RalewayRegular;
  text-align: justify;
  font-size-adjust: auto;
  font-size: 18px;
  margin-left: 5%;
  margin-right: 5%;
}

.column.full {
  width = 80%;
  margin: 2% 5% 0% 5%;
  border: 2px solid #333333;
  background-color: #F2F2F2;
}

.column.full p {
  margin-left: 2%;
  margin-right: 2%;
  text-align: justify;
  font-size-adjust: auto;

}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* For the image */
.selfImage{
  margin-top: 5%;
  opacity: 1;
  display: block;
  max-width:100%;
  width: 50%;
  margin-left: 23%;
  height:auto;
  transition: 1.0s ease;
  backface-visibility: hidden;
  /*border-radius: 50%;*/
  padding-top: 20px;
  padding-bottom: 10px;
}

.middle {
  transition: 1.0s ease;
  opacity: 0;
  position: relative;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 50%;
  margin-left: 50%;
}

.container:hover .selfImage {
  opacity: 1.0;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
  align: center;
}

a.text {
  text-decoration: none;
}
a.mediaLink{
  text-decoration:none;
}

.mediaLinksContainer{
  width: 60%;
  margin-left: 20%;
  padding-top: 5px;
}

.mediaImage{
  padding-top: 5px;
  padding-bottom: 2px;
  float: left;
  width: 12%;
  margin-right: 4%;
  margin-left: 3%;
  transition: 1.0s ease;
}

.CVButton {
  align: center;
  font-size: 20;
  width: 20%;
  margin-left: 40%;
  margin-top: 3%;
  border-radius: 12px;
  border: 2px solid #000;
  transition: 0.3s;
}
.CVButton:hover {
  border: 2px solid green;
  color: green;
}

.personalInfo {
  text-align: center;
  text-decoration: none;
}
.name {
  font-family: Times;
  padding:0;
  margin: 0 auto 0 auto;
  font-size: 40;
}

.currentPlacement {
  font-family: RalewayRegular;
  font-size: 20;
  margin: 0 auto 0 auto;
  color: #424040;
}

.aboutMeLinks {
  text-decoration: none;
  color: #BC0000;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 768px) {
  .column.left {
    width: 100%;
    margin: 0;
  }
  .column.right {
    width: 90%;
    margin-left: 5%;
  }

  .selfImage{
    width: 40%;
    margin-left: 30%;
  }
  .mediaLinksContainer{
    width: 50%;
    margin-left: 25%;
    padding-top: 5px;
  }

  .middle {
    width: 50%;
  }
}