@charset "UTF-8";
/*https://fonts.google.com/specimen/Titan+One?categoryFilters=Feeling:%2FExpressive%2FLoud*/
/*https://fonts.google.com/specimen/Delius+Swash+Caps?categoryFilters=Feeling:%2FExpressive%2FCute*/
h1{
	text-align: center;
}
h2{
	text-align: center;
	font-size:1.7em;
}
p{
	font-size: 1.3em;
}
.border{
	border-style: solid;
	border-width: 1px;
	border-color: rgb(249,251,253);
	border-radius: 10px;
}
.border2{
	border-style: solid;
	border-width: 1px;
	border-color: rgb(249,251,253);
	border-radius: 10px 10px 0 0;
}
.borderbottom{
	border-style: solid;
	border-width: 1px;
	border-color: rgb(249,251,253);
	border-radius: 0 0 10px 10px;
}
.notroundborder{
	border-style: solid;
	border-width: 1px;
	border-color: rgb(249,251,253);
}
.websiteTitle{
	font-size: 7em;
	margin-top: 8%;
	margin-left: 10%;
	margin-right: 10%;
}
.widthSm{
	vertical-align: middle;
	text-align: center; 
	width: 100%;
	box-sizing: border-box;
}
/*from https://www.w3schools.com/cssref/css3_pr_order.php*/
.order2{
	order: 2;
}
/*background made with https://www.w3schools.com/howto/howto_css_full_page.asp*/
.bg{
	background-image: url('Images/bg.jpg');
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
}
.homebg{
	background-image: url('Images/home1.jpg');
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
}
.bgAcademic{
	background-color: rgb(201, 224, 241);
}
.titles{
	background-image: url('Images/titles1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	margin: 50px 80px;
	padding:75px;
	border-radius: 150px;
	
	
}
.clearfix{
	overflow: auto;
}
.center {
  margin-left: auto;
  margin-right:auto;
  margin-top:50px;
  margin-bottom: 70px;
  width: 80%;
  padding: 20px;
  background-color: rgb(249,251,253);
} 
.centernotop{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 70px;
	width: 80%;
	padding: 20px;
	background-color: rgb(249,251,253);
}
body{
	margin: 0;
}
.links{
	color: rgb(24,60,70);
}
/*made with https://www.w3schools.com/css/css_grid.asp*/
.left-divContainer {
    display: grid;
    grid-template-columns: 45% 25%;
    justify-content: center;
    align-items: center;
    column-gap: 10%;
	padding-bottom: 3%;
	padding-top: 3%;
}
.right-divContainer{
	display: grid;
    grid-template-columns: 25% 45%;
    justify-content: center;
    align-items: center;
    column-gap: 10%;
	padding-bottom: 3%;
	padding-top: 3%;
}
.centernobottom{
	margin-left: auto;
	margin-right: auto;
 	width: 80%;
 	padding: 20px;
 	background-color: rgb(249,251,253);
}
.titan-one-regular {
	color: rgb(24,60,70);
 	font-family: "Titan One", sans-serif;
 	font-weight: 400;
 	font-style: normal;
}
.delius{
 	font-family: "Delius Swash Caps", cursive;
 	font-weight: 400;
 	font-style: normal;
}
ul{
	list-style-type: none; /*removes the default bullet*/
	margin:0px; /*removes default margin*/
	padding:0px; /*removes default padding*/
	background-color: rgb(150,198,237);
	overflow: hidden; /*keeps items inside the undordered list*/
}
ul li{
	float:left;
}
ul li a{
	color: rgb(24,60,70);
	text-decoration: none; /*removes underline*/
	padding: 14px 16px;
	display: block; /*makes the list item block instead of inline*/
	font-size: 1.1em;
}
ul li a:hover{
	background-color: rgb(249,251,253);
}
/*Carousel Wrapper*/
.carousel{
	width: 100%; /*full width of parent/container*/
	max-width: 800px; /*optional max width*/
	overflow: hidden; /*hide overflowing slide*/
	margin: auto; /*carousel is center*/
}
/*Slides container-row of images*/
.slides{
	display: flex;
	transition: transform 0.5s ease; /*smooth sliding animation over 0.5 second*/
}
.slides img{
	width: 100%;
	margin: auto; /*maintain aspect ratio*/
	flex-shrink: 0; /*keeps image from shrinking*/
}

/*all CSS below relating to slideshow made with https://www.w3schools.com/howto/howto_js_slideshow.asp*/

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.align{
	text-align:center;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin-top: 5px;
  margin-right: 3px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}