/* Cascading Style Sheet - Default Styles */

/*  GLOBAL SETTINGS  */
html, body {
	height: 100%;
	margin: 0px;
	color: #444;
	background-color: #fff;
}
/* to disable scrolling/elements */
.disableScrolling {
	height: 100%;
	overflow: hidden;
}
.disabled, .button:disabled {
	cursor: not-allowed; 
	opacity: 0.3;
}
.disabled *, :disabled * {pointer-events: none;}

* {
	box-sizing: border-box; 
	font-family: "Montserrat", sans-serif; 
	line-height: 1.7;
	font-size: 16px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.course::after, main::after, section::after, .relative-container::after, ul::after, .row::after {
	content: "";
	clear: both;
	display: table;
}

.relative-container {position: relative;}
.fixed {position: fixed; z-index: 1;}
.cell {display: table-cell;}
.middle {display: table-cell; vertical-align: middle;}
.w100 {width:100%;} 
.h100 {height:100%;} 
.wh100 {width: 100%; height: 100%;}

.thumbnail {
	width: 100%;
	cursor: pointer;
}
.thumbnail:hover {
	opacity: 0.60;
}
/* used with social icons */
.hover:hover {
	cursor: pointer;
	opacity: 0.60;
}
.pointer {
	cursor: pointer;
}

/* absolute positions */
.absolute-middle {
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.absolute-bottom {
	position: absolute;
	text-align: center;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
.absolute-left {position: absolute; left: 0; top: 50%;}

.absolute-topleft {position: absolute; left: 0; top: 0;}
.absolute-topright {position: absolute; right: 0; top: 0;}
.absolute-bottomleft {position: absolute; left: 0; bottom: 0;}
.absolute-bottomright {position: absolute; right: 0; bottom: 0;}

/* text properties */
em {font-family: inherit!important; font-size: 1em!important; font-style: italic!important;}
h1 {font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4 {font-size: 20px}
h5 {font-size: 18px}
h6 {font-size: 16px}
.font-rem {font-size: 1rem;}
.font-10 {font-size: 10px!important;}
.font-12 {font-size: 12px!important;}
.font-16 {font-size: 16px!important;}
.font-18 {font-size: 18px!important;}
.font-20 {font-size: 20px!important;}
.font-24 {font-size: 24px!important;}
.font-36 {font-size: 36px!important;}
.font-48 {font-size: 48px!important;}
.font-64 {font-size: 64px!important;}
.larger {font-size: larger;}
.wide {letter-spacing: 10px;}
.nowrap {white-space: nowrap;}

/* margins */
.margin-auto {margin: auto;}
.margin-top, .margin-top-16 {margin-top: 16px!important;}
.margin-top-32 {margin-top: 32px!important;}
.margin-top-64 {margin-top: 64px!important;}
.margin-bottom, .margin-bottom-16 {margin-bottom: 16px!important;}
.margin-bottom-32 {margin-bottom: 32px!important;}
.margin-bottom-64 {margin-bottom: 64px!important;}
.margin-bottom-96 {margin-bottom: 96px!important;}
.margin-left, .margin-left-16 {margin-left: 16px!important;}
.margin-right, .margin-right-16 {margin-right: 16px!important;}
.v-margins, .v-margins-16 {margin-top: 16px!important; margin-bottom: 16px!important;}
.margins, .margins-16 {margin: 16px!important;}

/* padding */
.padding-4x8 {padding: 4px 8px!important;}
.padding-8x16 {padding: 8px 16px!important;}
.padding-12x24 {padding: 12px 24px!important;}
.padding-16x32 {padding: 16px 32px!important;}
.v-padding-16 {padding-top: 16px!important; padding-bottom: 16px!important;}
.v-padding-24 {padding-top: 24px!important; padding-bottom: 24px!important;}
.v-padding-32 {padding-top: 32px!important; padding-bottom:32px!important;}
.v-padding-48 {padding-top: 48px!important; padding-bottom: 48px!important;}
.v-padding-64 {padding-top: 64px!important; padding-bottom: 64px!important;}
.v-padding-64-128 {padding-top: 64px!important; padding-bottom: 128px!important;}
.h-padding-8 {padding-left: 8px!important; padding-right: 8px!important;}
.h-padding-16 {padding-left: 16px!important; padding-right: 16px!important;}
.h-padding-32 {padding-left: 32px!important; padding-right: 32px!important;}

.padding-top-5 {padding-top: 5%;}
.padding-top-8 {padding-top: 8.33%;}
.padding-top-10 {padding-top: 10%;}
.padding-top-15 {padding-top: 15%;}
.padding-top-20 {padding-top: 20%;}
.padding-top-22 {padding-top: 22.5%;}
.padding-top-25 {padding-top: 25%;}
.padding-top-66 {padding-top: 66%;}
.padding-top-1rem {padding-top: 1rem;}
.padding-top-2rem {padding-top: 2rem;}
.padding-top-3rem {padding-top: 3rem;}
.padding-top-4rem {padding-top: 4rem;}
.padding-bottom-1rem {padding-bottom: 1rem;}
.padding-bottom-2rem {padding-bottom: 2rem;}
.padding-bottom-3rem {padding-bottom: 3rem;}
.padding-left-1rem {padding-left: 1rem;}
.padding-left-2rem {padding-left: 2rem;}

/* reduces the space between sections on small screens */
@media screen and (max-width: 600px) {
	.padding-top-3rem {padding-top: 0;}
	.padding-bottom-3rem {padding-bottom: 0;}
	.padding-top-15 {padding-top: 0;}
}

/* arrangement */
.left-align, .align-left {text-align: left!important;}
.right-align, .align-right {text-align: right!important;}
.justify {text-align: justify!important;}
.center {text-align: center!important;}
.float-left {float: left!important;}
.float-right {float: right!important;}

/* animations */
.animate-top {
	position: relative;
	animation: animatetop 0.4s;
}
@keyframes animatetop {
	from {top: -300px; opacity: 0;} 
	to {top: 0; opacity: 1;}
}
.animate-zoom {
	animation: animatezoom 0.6s;
}
@keyframes animatezoom {
	from{transform:scale(0)} 
	to{transform:scale(1)}
}

.animate-opacity {
	animation: animateopacity 0.6s;
}
@keyframes animateopacity {
	from{opacity: 0} 
	to{opacity: 1}
}

/* modal */
.modal {
	z-index: 3; 
	display: none;
	position: fixed; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	overflow: auto;
	/* background-color: #fff; */
}
.modal-content {
	margin: auto; 
	/* background-color: #fff;  */
	position: relative; 
	padding: 0; 
	outline: 0;
	max-width: 640px;
	height: 100%;
}

/* forms */
button, input, select, textarea {font: inherit; margin: 0px;}
optgroup {font-weight: bold;}
button, input {overflow: visible;}
button, select {text-transform: none;}
input {padding: 8px;}

/* CHROME (for CTAs such as phone, email or website across top */
.chrome {height:34px;}
.chrome div {display:inline-block; width:50%; padding:6px 16px; white-space:nowrap;}
.chrome div:last-child {text-align:right;}
.chrome div span {cursor:pointer;}
@media screen and (max-width: 600px) {
	.chrome div:first-child {display:none;}
	.chrome div:last-child {width:100%;}
}

/* SHADOWS */
.text-shadow {text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
.dark-text-shadow {text-shadow: 2px 2px 4px rgba(0,0,0,6);}
.sharp-text-shadow {text-shadow: 2px 2px 0px rgba(0,0,0,1);}
.drop-shadow {filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.4));}
.flat-shadow {filter: drop-shadow(3px 4px 8px rgba(0,0,0,0.25));}
.box-shadow {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}
.box-shadow-alt {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.box-shadow-large {box-shadow: 5px 9px 13px rgba(0,0,0,0.25);}
/* used by menubar: */
.bar-shadow {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

/* BRIGHTNESS */ 
.brighter {filter: brightness(125%);}
.darker {filter: brightness(80%);}

/* TEXT PROPERTIES */
.white-text {color: #fff!important;}
.whitesmoke-text {color: whitesmoke!important;}
.lightgray-text {color: gainsboro!important;}
.gray-text {color: #9e9e9e!important;}
.darkgray-text, .dimgray-text {color: #616161!important;}
.charcoal-text {color: #444!important;}
.black-text {color: #000!important;}

/* IMAGE PROPERTIES */
.image {
	max-width: 100%;
	height: auto;
}
img {vertical-align: middle;}

/*  BACKGROUNDS  */
.transparent-bg {
	background-color: transparent!important;
}
.black-on-white {
	color: #000!important;
	background-color:#fff!important;
}
.white-on-black {
	color: #fff!important; 
	background-color: #000!important;
}
.black-on-gray{
	color: #000!important; 
	background-color: #9e9e9e!important;
}
.black-on-lightgray {
	color: #000!important; 
	background-color: #f1f1f1!important;
}
.white-on-darkgray {
	color: #fff!important; 
	background-color: #616161!important;
}
.khaki-on-charcoal {
	color: khaki!important; 
	background-color: #333!important;
}
.black-on-khaki {
	color: #000!important; 
	background-color: khaki!important;
}
.image-bg {
	background-position: center; 
	/* background-position: center top; */
	background-size: cover; 
	/* background-size: 100% auto; */
	background-repeat: no-repeat;
}

/* BORDERS */
.border-none {border: 0!important;}
.border {border: 1px solid #ccc!important;}


/*  ABSOLUTE POSITIONING  (use to put elements in front of other elements) */
.over-center-left {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translate(-0px, -50%);
}
.over-center-right {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translate(-0px, -50%);
}
.over-center {
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.over-center-top {
	position: absolute;
	text-align: center;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
}
.over-center-bottom {
	position: absolute;
	text-align: center;
	bottom: 5%;
	left: 0%;
	width: 100%;
	transform: translate(0%, -50%);
}