#welcome-banner{
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-image: url("./img/welcome-background2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

#welcome-image {
	width: 50%;
	float: left;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#welcome-image > img {
	position: relative;
	height: 70%;
}

#welcome-text {
	width: 50%;
	float : right;
	height: 100%;
	padding: 50px 50px 50px 0px;
	display: flex;
	flex-direction: column;
}

#welcome-text > .flex-item{
	flex: auto;
}

#welcome-text > img{
	height: 20%;
}

#welcome-text > button{
	padding-left: 50px;
	padding-right: 50px;
}

@media only screen and (max-width: 768px) {
  #welcome-text {
    width: 100%;
	height:50%;
	text-align: center;

  }
  #welcome-image {
    width: 100%;
	height:50%;
  }

  #welcome-banner {
	display: flex;
	flex-direction: column;
	height: 200vh;

  }

}

#professor{
	height: 80vh;
	margin-top: 50px;
}

#professor-img {
	width: 50%;
	float: left;
}

#professor-img > img {
	float: right;
	height: 70vh;
	margin-right: 40px;
}

#course-description{
	width: 50%;
	float: right;
	margin-top: 100px;
}

#course-description > div {
	width: 100%;
	
}

p {
	width: 25vw;
}

.class {
	width:100%;
  height:100%;
  object-fit:cover;
}

#rowid > div{
	width: 33%;
}

/*Custom CSS starts here*/
.flip-card {
  background-color: transparent;
  width: 350px;
  height: 350px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: white;
}


.flip-card-back {
  background-color: #5902E6;
  color: white;
  display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
  transform: rotateY(180deg);

}


#LinkedinBtn {
	background-color: #0077B5;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

#WebsiteBtn {
	background-color: olivedrab;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}