/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  background-color: #fff;
  color: black;
  font-family: EB Garamond;
}

.logo {
  background:#FFF;
}

.logo img {
  height: 75px;
  margin: 10px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 1rem 2rem;
  background:transparent;

}

.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}
.nav-link {
  margin-right: 1em !important;
}
.nav-link:hover {
  color: #502649;
}
.navbar-collapse {
  justify-content: flex-end;
}


/*--- header ---*/
.header {
  background-image: url('JennyLaineSerenityEPCover.png');
  background-size: cover;
  position: relative;
    background-position: left 35% top 45%;;

}

.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
}


/* Graphic behind text */
.graphic {
background-position: center;  
width: 500px;
  height: 500px;
  background: radial-gradient(square, #e0cfc2, transparent 70%);
  opacity: 0;
  transform: scale(0.9);
  animation: graphicFade 1.2s ease-out forwards;
}

/* Text */
.title {
  position: absolute;
  font-size: 4rem;
  letter-spacing: 2px;
  opacity: 0;
  animation: textFade 1s ease-out forwards;
  animation-delay: 0.6s;
}

/* Animations */
@keyframes graphicFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes textFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  
.description {
  left: 67%;
  position: absolute;
  top: 50%;
  transform: translate(-25%, -50%);
  text-align: center;
}
.description h1 {
  color: #dba9b2;
  font-weight:bold;
  
}
.description p {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
}

.description button {
  border:1px solid #80456D;
  background: #80456D;
  border-radius: 0;
  color: #fff;
}
.description button:hover {
  border: 1px solid #502649;
  background: #502649;
  color: #fff;
}

hr.divider {
  height: 0.2rem;
  max-width: 3.25rem;
  margin: 1.5rem auto;
  background-color: #80456D;
  opacity: 1;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}

hr.divider-light {
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}

/*--- feature section ---*/
.features {
  margin: 4em auto;
  padding: 1em;
  position: relative;
}
.feature-title {
  color: #333;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.features img {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}
.features .form-control,
.features input {
    border-radius: 0;
}
.features .btn {
  background-color: #80456D;
  border: 1px solid #80456D;
  color: #fff;
  margin-top: 20px;
}
.features .btn:hover {
  background-color: #502649;
  color:#fff;
  border: 1px solid #333;
}
/*---program section---*/
.program {
  padding: 4em 1.5em;
  background:#80456D;
}

.program p {
  color: #fff;
}

.program-title {
  color: #FFF;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.program img {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 90%; }

.video-container iframe {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 16px;
}

.program .form-control,
.features input {
    border-radius: 0;
}
.program .btn {
  background-color: #80456D;
  border: 1px solid #80456D;
  color: #fff;
  margin-top: 20px;
}
.program .btn:hover {
  background-color: #502649;
  color:#fff;
  border: 1px solid #333;
}

/*--- team section ---*/
.background {
	background: #e8c3e2;
	padding: 4em 0;
}

.team {
	color: #5e5e55;
	padding: 0 20px;
}

.team img {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}

.team .card-columns {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}

.team .card {
	background:none;
	border: none;
}

.team .card-title {
	font-size: 1.3rem;
	margin-bottom: 0;

}

.btn-outline-secondary {
  background-color: #80456D;
  border: 1px solid #80456D;
  color: #fff;
  margin-top: 20px;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}
.btn-outline-secondary:hover {
  background-color: #502649;
  border: 1px solid #502649;
  color: #fff;
  margin-top: 20px;
}
/*--- footer ---*/

.page-footer {
  background-color: #222;
  color: #ccc;
  padding: 60px 0 30px;
}

.footer-copyright {
  color: #666;
  padding: 40px 0;
}

.footer-link {
  color: #fff;
  cursor: pointer;
}
.footer-link:hover {
  color: #e8c3e2;
  cursor: pointer;
}
  
/*--- modal ---*/

#demo-modal .modal-content {
	border-radius: 0;
	padding: 2rem;
}

#demo-modal .modal-header {
	border-bottom: none;
}

#demo-modal h4 {
    color: #000;
    font-size: 30px;
    margin: 0 0 25px;
    font-weight: bold;
    text-transform: capitalize;
}

#demo-modal .close {
	background: #c0c3c8;
    border-radius: 50%;
	color: #fff;
    font-size: 19px;
	font-weight: normal;
    height: 30px;
    opacity: 0.5;
    padding: 0;
    position: absolute;
    right: 26px;
    text-align: center;
    top: 26px;
    width: 30px;
}

#demo-modal .close span {
	position: relative;
	top: -3px;
}

#demo-modal .modal-body p {
	color: #999;
}

#demo-modal .form-control,
#demo-modal .btn {
	min-height: 46px;
}

#demo-modal .btn {
	background-color: #1da098;
	border: none;
	color: #fff;
	min-width: 150px;
	transition: all 0.4s;
}

#demo-modal .btn:hover,
#demo-modal .btn:focus {
	background-color: #12968d;
}

/*--- media queries ---*/

@media (max-width: 991.98px) {

	.team {
		padding: 0 15px;
	}
	
}

@media (max-width: 575.98px) {

	.description {
		left: 45%;
		padding: 0 15px;
		position: absolute;
		top: 20%;
		transform: none;
		text-align: center;
	}
	
	.description h1 {
		font-size: 2em;
	}
	
	.description p {
		font-size: .9em;
	}

	.features {
		margin: 0;
	}
	
	.team {
		max-width: 80%;
	}
	
	#demo-modal .btn {
		min-width: auto;
	}

}