/* Experimental Start */

/* https://codepen.io/oliviale/pen/vPvvyr */
.button-jittery a {
  animation: jittery 4s infinite;
}
.button-jittery a:hover {
  animation: heartbeat 1.25s infinite;
}

@keyframes jittery {
  5%,
	50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}


/* https://codepen.io/nhembram/pen/PzyYLL */
/*
.modal.fade{
  opacity:1;
}
.modal.fade .modal-dialog {
   -webkit-transform: translate(0);
   -moz-transform: translate(0);
   transform: translate(0);
}
*/



/* https://www.geeksforgeeks.org/how-to-create-skeleton-screen-loading-effect-using-css/ */
/* Card styles */
.skeleton-card {
	/*background-color: #fff;*/
	background-color: inherit;
	height: auto;
	width: auto;
	overflow: hidden;
	border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	font-size: 1.25em;
	/*border-radius: 5px;*/
	/*box-shadow: 9px 17px 45px -29px rgba(0, 0, 0, 0.44);*/
}

/* Card image loading */
.skeleton-card__image img {
	width: 100%;
	height: 100%;
	border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

.skeleton-card__image.loading {
	height: 300px;
	width: 100%;
	border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}


.skeleton-card__words img {
	height: 100%;
	width: 50%;
	border-radius: 5px;
}

.skeleton-card__words.loading {
	height: 28px;
	width: 100%;
	/* border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}


/* Card title */
.skeleton-card__title {
	padding: 8px;
	font-size: 22px;
	font-weight: 700;
}

.skeleton-card__title.loading {
	height: 1rem;
	width: 50%;
	margin: 1rem;
}

/* Card description */
.skeleton-card__description {
	padding: 8px;
	font-size: 16px;
}

.skeleton-card__description.loading {
	height: 3rem;
	margin: 1rem;
}

/* The loading Class */
.loading {
	position: relative;
	/*background-color: #e2e2e2;*/
	/*background-color: rgba(255, 255, 255, 0.75);*/
	background-color: inherit;
}

/* The moving element */
.loading::after {
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	background: -webkit-gradient(linear, left top,
				right top, from(transparent),
				color-stop(rgba(0, 0, 0, 0.1)),
				to(transparent));

	background: linear-gradient(90deg, transparent,
			rgba(0, 0, 0, 0.1), transparent);

	/* Adding animation */
	/* animation: loading 0.8s infinite; */
	animation: loading 1.25s infinite;
}

/* Loading Animation */
@keyframes loading {
	100% {
		transform: translateX(100%);
	}
}


/* https://codepen.io/cbrst/pen/ebxwLJ */
/* still working on getting this to work */
@import url("https://fonts.googleapis.com/css?family=Righteous");
.arrow-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}


/***************
 * Arrow 2
 ***************/
#arrow_2 .arrow {
  color: #000;
  cursor: pointer;
  display: block;
  -webkit-box-align: start;
          align-items: flex-start;
  text-transform: uppercase;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  font-family: Righteous;
}
#arrow_2 .arrow span {
  display: block;
  width: 3em;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0s;
  transition: opacity 0.3s 0s;
  padding: 0 0.5em;
}
#arrow_2 .arrow:hover span {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.1s;
  transition: opacity 0.3s 0.1s;
}
#arrow_2 .arrow:before {
  content: '';
  display: block;
  border: solid #000;
  border-width: 2px 2px 0 0;
  position: absolute;
  top: 4px;
  width: 10px;
  height: 10px;
}
#arrow_2 .arrow.arrow--left:before {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  right: 0;
  -webkit-transition: right 0.3s 0.2s;
  transition: right 0.3s 0.2s;
}
#arrow_2 .arrow.arrow--left:hover:before {
  right: 100%;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
}
#arrow_2 .arrow.arrow--right {
  text-align: right;
}
#arrow_2 .arrow.arrow--right:before {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: left 0.3s 0.2s;
  transition: left 0.3s 0.2s;
}
#arrow_2 .arrow.arrow--right:hover:before {
  left: 100%;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
}
#arrow_2 .arrow:hover {
  -webkit-transform: none;
          transform: none;
}

/* Experimental End */



/* https://stackoverflow.com/questions/48571687/bootstrap-4-caret-direction-change-after-opening-menu */
.dropdown-toggle[aria-expanded="true"]:after {
	transform: rotate(180deg);
}
.dropdown-toggle:after {
	transition: transform 0.25s linear;
}


.arrow-container-disabled {
	background-color: transparent;
	cursor: not-allowed;
}
.arrow-container-disabled:hover {
	-webkit-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	-ms-transition: background-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	background-color: rgba(178, 34, 34, 1);
}
.arrow-disabled {
	opacity: 0;
}
.arrow-disabled:hover {
	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	-ms-transition: opacity 0.25s ease-out;
	-o-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
	opacity: 1;
}


.arrow-container-enabled {
	background-color: transparent;
	cursor: pointer;
}
.arrow-container-enabled:hover {
	-webkit-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	-ms-transition: background-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	/* background-color: rgba(186, 218, 85, 1); */
	/* background-color: rgba(144, 238, 144, 1); */
	background-color: rgba(0, 128, 0, 1);
}
.arrow-enabled {
	opacity: 1;
}

/* Additional changes in the media queries. */
.previous-arrow-container {
	left: 0px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}
.next-arrow-container {
	right: 0px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}
.previous-arrow-container svg {
	height: 32px;
}
.next-arrow-container svg {
	height: 32px;
}



/* https://mdbootstrap.com/snippets/jquery/mustafaozkaya/789907#css-tab-view */
.modal-dialog-full-width {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width:none !important;
}

.modal-content-full-width  {
	height: auto !important;
	min-height: 100% !important;
	border-radius: 0 !important;
}

.modal-header-full-width  {
	background-color: rgba(0, 0, 0, 0.03) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.modal-footer-full-width  {
	background-color: rgba(0, 0, 0, 0.03) !important;
	border-top: 1px solid rgba(0, 0, 0, 0.125);
}


.card-body {
	font-size: 1.25em;
}

.navbar-custom .navbar-nav .nav-link {
	color: #123656;
	opacity: 1;
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75); /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
}
.navbar-custom .nav-item.active .nav-link svg,
.navbar-custom .nav-item:hover .nav-link svg {
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	/* Similar syntax to box-shadow */
	-webkit-filter: drop-shadow(2px 2px 3px rgba(150, 150, 150, 0.75));
			filter: drop-shadow(2px 2px 3px rgba(150, 150, 150, 0.75));
}
.navbar-custom .nav-item .nav-link svg path {
	fill: #123656;
}
.navbar-custom {
	background-color: #c9e9fd;
}

.card-corners {
	border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}
.card-corners-header {
	border-radius: 1.25rem 1.25rem 0 0 !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}
.card-corners-footer {
	border-radius: 0 0 1.25rem 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

.course-container-wrapper {
	margin: 0 0;
	max-width: 100%;
}

.lh-0 {
	line-height: 0px;
}

/* Extra small devices (portrait phones, less than 576px)*/
/* No media query since this is the default in Bootstrap*/
.previous-arrow-container {
	top: -50px;
}
.next-arrow-container {
	top: -50px;
}


.bg-course {
	background-color: #C9E9FD;
	/* https://css-tricks.com/perfect-full-page-background-image/ */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.invisible-card {
	background-color: transparent;
	border-color: #FF3950;
}

.progress-line-page {
	width: 100%;
	height: 10px;
}

.course-card-corners, .course-card-header-corners, .course-card-footer-corners, .youtube-course-card-header-corners {
	border-radius: 0px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}
.bg-visible-breakpoints {
	/* https://www.schemecolor.com/red-leather-bag-color-palette.php */
	background-color: rgba(217, 33, 33, 1); /* red */
}
.bg-visible-breakpoints::after {
	content: "Extra Small (xs / default; \2265 0px)";
}
.bg-visible-breakpoints::after {
	color: white;
	text-shadow: 2px 2px 5px black; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
	font-size: 1.5em;
	margin-left: 25px;
}

.fill-in-the-blank-inline-input {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	height: auto;
	/* width defined on element directly */
	padding: 0px;
	margin: 10px 0px .75rem 0px;
	display: inline-block; 
	color: black;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 3px solid black;
	border-radius: 10px;
	vertical-align: middle;
	text-align: center;
}
.fill-in-the-blank-inline-input:focus {
	color: black;
}


/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.bg-course {
		/* background-color: pink; */
		background: url("../media/Star_Rain_in_the_Desert_low.jpg") no-repeat center center fixed;
		/* https://css-tricks.com/perfect-full-page-background-image/ */
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.progress-line-page {
		width: 100%;
		height: 13px;
	}

	.course-card-corners, .course-card-header-corners, .course-card-footer-corners, .youtube-course-card-header-corners {
		border-radius: 0px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}

	.bg-visible-breakpoints {
		/* http://colrd.com/palette/22655/ */
		background-color: rgba(253, 214, 42, 1); /* yellow */
	}
	.bg-visible-breakpoints::after {
		content: "Small (sm; \2265 576px)";
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.previous-arrow-container {
		top: -60px;
	}
	.next-arrow-container {
		top: -60px;
	}
	
	.progress-line-page {
		width: 100%;
		height: 15px;
	}

	.course-card {
		min-height: 500px;
	}
	.course-card-corners, .course-card-header-corners, .course-card-footer-corners, .youtube-course-card-header-corners {
		border-radius: 0px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}

	.bg-visible-breakpoints {
		/* http://colrd.com/palette/22655/ */
		background-color: rgba(134, 216, 104, 1); /* green */
	}
	.bg-visible-breakpoints::after {
		content: "Medium (md; \2265 768px)";
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.previous-arrow-container {
		left: -64px;
		top: 20px;
		min-height: calc(100% - 40px);
		width: 64px;
		border-radius: 30px 0px 0px 30px;
	}
	.previous-arrow-container svg {
		height: 64px;
	}

	.next-arrow-container {
		right: -64px;
		top: 20px;
		min-height: calc(100% - 40px);
		width: 64px;
		border-radius: 0px 30px 30px 0px;
	}
	.next-arrow-container svg {
		height: 64px;
	}
	
	.progress-line-page {
		width: 100%;
		height: 18px;
	}

	.course-container-wrapper {
		margin: 0 auto;
		max-width: 960px;
	}
	.course-card {
		min-height: 500px;
	}
	.course-card-corners {
		border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}
	.course-card-header-corners, .youtube-course-card-header-corners {
		border-radius: 1.25rem 1.25rem 0 0 !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}
	.course-card-footer-corners {
		border-radius: 0 0 1.25rem 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}

	.bg-visible-breakpoints {
		/* http://colrd.com/palette/22655/ */
		background-color: rgba(59, 135, 189, 1); /* blue */
	}
	.bg-visible-breakpoints::after {
		content: "Large (lg; \2265 960px)";
	}
	
	.fill-in-the-blank-inline-input {
		margin: 5px 0px .75rem 0px;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.course-container-wrapper {
		margin: 0 auto;
		max-width: 1140px;
	}
	.course-card {
		min-height: 500px;
	}
	.course-card-corners {
		border-radius: 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}
	.course-card-header-corners, .youtube-course-card-header-corners {
		border-radius: 1.25rem 1.25rem 0 0 !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}
	.course-card-footer-corners {
		border-radius: 0 0 1.25rem 1.25rem !important; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
	}

	.bg-visible-breakpoints {
		/* http://colrd.com/palette/22655/ */
		background-color: rgba(251, 133, 54, 1); /* orange */
	}
	.bg-visible-breakpoints::after {
		content: "Extra Large (xl; \2265 1200px)";
	}
}