body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/portfolio/images/banner.a299656c9baa.jpg");
  /* Set a specific height */
  /* height: 50%; */

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-small {
  height: 30%;
}

.hero-big {
  height: 50%;
}

/* 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;
}

.contact-section {
  text-align: center;
  margin: 3%;
}

.contact-icon {
  margin: 3%;
}

.thumbnail {
  object-fit: cover;
  width: 375px;
  height: 250px;
}

.img-blog{
  object-fit: cover;
  width: 250px;
  height: 250px;
}



.textWithBlurredBg{
  width:375px;
  height:250px;
  display:inline-block;
  position:relative;
  transition:.3s;
  margin:4px;
  /* vertical-align: middle; */
}

.textWithBlurredBg img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition:.3s;
  border-radius:4px;
}

.textWithBlurredBg:hover img{
  filter:blur(2px) brightness(60%);
  box-shadow:0 0 16px cyan;
}
 
/* .textWithBlurredBg div{
  position:absolute;
  z-index:1;
  top: 50%;
  transform: translate(0%, -50%);
  width:100%;
  text-align:center;
  color:#fff;
  opacity:0;
  transition:.3s;
} */

.thumbnail-text{
  position:absolute;
  z-index:1;
  top: 50%;
  transform: translate(0%, -50%);
  width:100%;
  text-align:center;
  color:#fff;
  opacity:0;
  transition:.3s;
  padding: 25px;
}


.textWithBlurredBg:hover :not(img){
  opacity:1;
}

/* body{
  background-color: rgb(189, 189, 189);
} */

.articleText{
  text-align: justify;
  padding: 18px;
}

.contentBox{
  margin-top: 4em;
  margin-bottom: 4em;
  /* border-style: solid;
  border-color: red;
  border-radius: 2px; */
  background-color: rgb(201, 201, 201);
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.customContainer{
  padding-left: 10%;
  padding-right: 10%;
}

/* .imgFit{
  object-fit: cover;
} */

.highlight{
  border-style: solid;
  border-color: blue;
  border-radius: 5px;
}

.profile_pic{
  vertical-align: middle;
  object-fit: cover;
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.profile_avatar{
  text-align: center;
}

.border_custom{
  margin: 20px 50px 20px 50px;
}

.colorbox{
  position: absolute;
  width: 375px;
  height: 50px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background: rgb(11, 119, 182);
  text-align:center;
  font-weight:bold;
  opacity:0.7;
}

.colorbox h3{
margin-top: 7px;
}

.colorbox-out{
  width: 375px;
  height: 50px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background: rgb(11, 119, 182);
  text-align:center;
  font-weight:bold;
  margin-bottom: 20px;
}

.space{
  margin-bottom: 20px;
}