@charset "utf-8";
/* CSS Document */

/* NEW CREDS TEMPLATE 2022 */

/*------------------------ IMPORT THE FONTS FOR THE MODULE BOXES ETC FROM GOOGLE FONTS ------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Jaldi:wght@400;7000&family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');
/*
font-family: 'Alegreya Sans', sans-serif; 100 300:500 700:900 weights
font-family: 'Bellota Text', cursive; 300 400 700 weights
font-family: 'Jaldi', sans-serif; 400 700 weights
font-family: 'Maven Pro', sans-serif; 400 500 600 700 800 900 weights



/*------------------------ LIST OF CLASSES USED IN OVERARCHING CANVAS .CSS ------------------------*/
/*
.litec-content*/

/* this is a canvas class and overwrites the 100% width to constain and center at 1000px */
.user_content {
    position: relative;
    min-height: 5px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    overflow-x: auto;
}

/* discussion board content - may be defunct now!! */
.discussion-section {
    padding: 4px 10px 3px;
	max-width: 1000px;
   margin-left: auto;
    margin-right: auto;
    margin: auto;
}
/* discussion board content system update changed class. New set width */
.css-16umzoa-view--block {
    box-sizing: border-box;
    font-family: LatoWeb, "Lato Extended", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-width: 1000px !important;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    display: block;
    overscroll-behavior: auto;
}



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

 /* discussion and quiz page headings */
.topic h1.discussion-title {
    font-size: 2.5em;
    font-weight: 200;
    margin: 15px 0;
	line-height: initial;
    color: #666;
}

/*------------------VARIOUS FONT AND LINK STYLES-------------------------------*/


/*content headings */
.user_content h3 {
	font-family: 'Alegreya Sans', sans-serif;
    color: #333;
    text-align: left;
    font-size: 1.8em;
    font-weight: 500;
	margin: 0.5em 0;
}
.user_content h4 {
    font-family: 'Alegreya Sans', sans-serif;
    color: #34495e;
    font-weight: 500;
    font-size: 1.3em;
}
.user_content h5 {
	font-weight: 700;
    margin-bottom: 5px;
    font-style: italic;
    font-size: 1.1em;
    color: #484848;
	font-family: 'Bellota Text', cursive;
}

/*links for all content*/
.user_content a {
	color: #0073c5;
	text-decoration: none !important;
	cursor: pointer;
}

.user_content a:focus, .user_content a:hover { /*UPDATED!!!!!!!!!!!! */
	color: #9f6600;
	text-decoration: none !important;
	cursor: pointer;
}

.user_content a:visited {
	color: #457385;
	text-decoration: none !important;
	cursor: pointer;
}

/*------------------------IMAGES AND CAPTIONS_________________________________*/





.describe1#desc1, .describe2, .describe3, .describe4, .escribe5, .describe6, .describe7, .describe8, .describe9, .describe10 { /*hide the description paragrahs */
    display: none;
}

/*show the descriptions with a link */ 
#descshow1:target .imgDesc1, #descshow2:target .imgDesc2, #descshow3:target .imgDesc3, #descshow4:target .imgDesc4, #descshow5:target .imgDesc5, #descshow6:target .imgDesc6, #descshow7:target .imgDesc7, #descshow8:target .imgDesc8, #descshow9:target .imgDesc9, #descshow10:target .imgDesc10 {
    display: inline-block;
	width: -webkit-fill-available;
    border: 1px solid #666666;
    padding: 0 20px 20px;
    border-radius: 10px;
}

/*hide them again */
#descshow1:target #open1, #descshow2:target #open2, #descshow3:target #open3, #descshow4:target #open4, #descshow5:target #open5, #descshow6:target #open6, #descshow7:target #open7, #descshow8:target #open8, #descshow9:target #open9, #descshow10:target #open10 {
    display: none;
}
	



/*full width image*/
.litec-fullImg img {
	max-width: 100% !important;
    width: 100% !important;
	margin: 0 auto;
	display: block;
}

.litec-imgSource {
    color: #333;
    font-size: 1em;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 500;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.4;
}

/*------------Boxes with image on left or right -------------------*/
/* parent flexbox and children */

.litec-thinBorder {
	border: 1px solid #B7B7B7;
  padding: 20px;
	display: inline-block;
}

.litec-boxImgLR {
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 20px 0px;
	gap: 20px;
}
.litec-boxImgLR div {
  /*flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; /*was 50%*/
	flex: 50%;
	hyphens: auto;
  text-align: left;
}
.litec-boxImgLR img {
    display: block;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    vertical-align: top;
}
/*
.litec-boxImgLR img {
      max-width: 100% !important;
	  object-fit: cover;
	vertical-align: top;
}*/
@media all and (max-width: 500px) {
  .litec-boxImgLR {
    flex-direction: column;
  }
}

/*** IMAGE FLOATS ***/

.litecImageBorder {
	border: 1px solid #B7B7B7;
  padding: 15px;
	margin: 0 auto 10px;
}

.litecImagePlain {
	margin: 0 0 10px;
}

div.litecFloatLeft {
	float: left;
    max-width: 50%;
    margin-right: 20px;
    display: block;
}

div.litecFloatRight {
	float: right;
    max-width: 50%;
    margin-left: 20px;
    display: block;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)  {
	.litecFloatRight {
	max-width: 100% !important; /* Maximum width */
  margin: 20px auto !important; /* Center it */

	}
	.litecFloatLeft {
	max-width: 100% !important; /* Maximum width */
  margin: 20px auto !important; /* Center it */

	}
}


/*-------------------------------IFRAMES AND VIDEO-------------------------------*/
		
.litec-vid-iframe {
  position: relative;
  display: block;
  width: 100%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) inline different % for different aspect ratios */
  overflow: hidden;
}
.litec-vid-iframe iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

	
.litec-vidContainer {
	background-color: #232323; /*#474747;*/
	padding:5% 0px;
	margin-bottom: 40px;	
}
.litec-vidContainer p {
    margin: 0px 5% 3% 5%;
    font-size: 1em;
    color: #ffffff;
    font-weight: normal;
}

.litec-vidContainer h4 {
    margin: 0px 5% 3% 5%;
    font-family: 'Alegreya Sans', sans-serif;
    color: #ffffff;
    font-weight: 500;
    font-size: 1.3em;
	display:block;
}

/*links for all content*/
.litec-vidContainer a {
	color: #dde550;
	text-decoration: none !important;
	cursor: pointer;
}

.litec-vidContainer a:focus, .litec-vidContainer a:hover {  
	color: #5EDEFF;
	text-decoration: none !important;
	cursor: pointer;
}

.litec-vidContainer a:visited {
	color: #dde550;
	text-decoration: none !important;
	cursor: pointer;
}

/* website iframe */
.litec-website {
    position: relative;
    display: block;
    padding: 0% 0% 56.25%;
	border: 1px solid #e4e4e4;
}
.litec-webiFrame {
    width: 100%;
}

.litec-webiFrame iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}


/*------------------------------TABLES---------------------------------*/
.litec-table {
  border-collapse: collapse;
	table-layout: fixed;
  width: 100%;
}

.litec-table td, .litec-table th {
  border: 1px solid #e5d4a3;
  padding: 12px !important;
	vertical-align: top;
	hyphens: auto;
	text-align: center;
}

.litec-table tr:nth-child(even){background-color: #EFEDEA;}

.litec-table tr:hover {background-color: #ddd;}

.litec-table caption {
	color: #333;
    font-size: 1.2em;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 500;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.4;
	margin:10px auto 15px auto;
}

.litec-table th {
    padding: 12px;
    background-color: #a17c1a;
    color: white;
    font-size: 1.2em !important;
    font-weight: 500;
    font-family: 'Alegreya Sans', sans-serif;
	vertical-align: middle;
	line-height: normal;
}

.litec-table p {
	font-size: 1em;
	margin: 5px 0px;
	hyphens: auto;
}
.litec-table ul, .litec-table ol {
    padding: 0;
    margin: 0 0 6px 15px;
	hyphens: auto;
	text-align: left;
}

@media screen and (max-width: 600px) {
.litec-table thead {
	font-size: 1em !important;
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }
	
	.litec-table p {
	font-size: 1em;
	margin: 0px;
}
  
.litec-table tr {
    display: block;
  }
  /*
.litec-table td {
    display: block;
    text-align: right;
  }

.litec-table td::before {
    content: attr(data-label);
    float: left;
  }
	
	td.litec-table::before {*/
	
	
	
	 
.litec-table td {
    display: block;
	text-align: left;
  }

.litec-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: bolder;
    text-align: left;
    font-size: larger;
}

}
 
/*

/*------------------------ ALL OF THE CLASSES USED ON THE HOME PAGE ------------------------*/
/********************************************************************************************/


/*------------------------ FULL WIDTH BANNER. Banners should be 1000px wide ------------------------*/

.litec-banner {
	display: block;
	width: 100% !important;
}
.litec-banner img {
	max-width: 100% !important;
    width: 100% !important;
}


/*------------------------ WELCOME TEXT ------------------------*/
/*the .litecUsername div diplays the welcome text and controls the font size depending on the screen size*/

/* username container */

.litecUsername {
	background-color: #f4f4f4;
	padding: 0px 20px;
	font-family: 'Jaldi', sans-serif;
}

/* username container media query */

/* Extra extra small devices (phones, 320px and down) */
@media only screen and (max-width: 320px) {
  .litecUsername p {
    margin: 0px;
    line-height: 1.3;
    font-size: 1.3em;
    padding: 5px;
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .litecUsername p {
    margin: 0px;
     line-height: 1.2em;
    font-size: 2em;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .litecUsername p {
    margin: 0px;
    line-height: 1.2em;
    font-size: 2.5em;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .litecUsername p {
    margin: 0px;
    line-height: 1.2em;
    font-size: 2.5em;
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .litecUsername p {
    margin: 0px;
     line-height: 1.2em;
    font-size: 2.5em;
  }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .litecUsername p {
    margin: 0px;
    line-height: 1.2em;
    font-size: 3em;
  }
}

/* Here are the styles for the welcome text itself. IF YOU WANT TO CHANGE THE CLASSNAMES PLEASE NOTE: #learner2 is the style for the word WELCOME, and .user-name2 is the style for the persons name. Both are called by javascript so if you change the class name, you must also change the names in the javascript file.*/
/* #learner2 is the style for the word Hello */
/* we are putting a "2" after the class names to make it different from the ATN courses which are also using this class name */

#learner2 {
    color: #474747 !important;
    text-align: center;
	font-family: 'Jaldi', sans-serif;
}

/* .learner__intro is the style for the welcome message. */

.learner__intro2 {
    color: #474747 !important;
    text-align: center;
	font-weight: bold;
	font-family: 'Jaldi', sans-serif;
}

/* .user-name is the style for the persons name */

.user-name2 {
    color: #474747 !important;
	font-family: 'Jaldi', sans-serif;
}



/*------------------------ HOME PAGE INTRODUCTION TEXT BOX  ------------------------*/

.litec-introText {
	background-color: #f6f5f3;
	color: #323232;
	display: block;
	padding: 30px 30px;
	margin-top:-40px;
}


.litec-introText p {
	margin-bottom:5px;
    font-size: 1em;
	color: #484848;
	font-weight: 700;
	font-family: 'Bellota Text', cursive;
}

.litec-introText ul, .litec-introText ol {
	color: #484848;
	font-weight: 700;
	font-family: 'Bellota Text', cursive;
}




/*************** MODULE BOXES  **************/
/* Set up the flexbox*/

/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 500px) {
  .litec_mod_parent {
    flex-direction: column;
  }
}
/* Medium devices (landscape tablets, 501px and up) */
@media only screen and (min-width: 501px) {
  .litec_mod_child {
    flex: 50%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
  .litec_mod_child {
    flex: 33%;
  }
}
/* Large devices (laptops/desktops, 993px and up) */
@media only screen and (min-width: 993px) {
  .litec_mod_child {
    flex: 33%;
  }
}

/* parent flexbox module container and children */
.litec_mod_parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  color: white;
  margin: 40px 0px;
}

.litec_mod_child {
  min-height: 50px;
  flex: 1;
  min-width: 30%;
  border: 1px solid #E3D5CA;
  background-color: #edede9;
}


/* MODULE IMAGES AND ROLLOVER */

/* Create the image container*/
.litec-ModuleImg {
  position: relative;
  background-color: #fff;
  width: 100% !important;
  min-height: 200px;
  overflow: hidden;
  margin: 0;
  z-index: 0;
}

/* add the image rules and sizing */
.litec-ModuleImg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100% !important;
}


/* OVERLAY FOR ROLLOVER */
/* Create the colour overlay on image with 50% showing */
.litec-ModuleOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 15%;
  background-color: rgba(42, 54, 59, 0.50);
  transition: all 0.5s ease-in-out 0s;
}

/*make the overlay 100% on hover over the image container */
.litec-ModuleImg:hover .litec-ModuleOverlay {
  height: 100%;
  background-image: radial-gradient(ellipse, rgba(6, 94, 151, 1.0) 10%, rgba(6, 94, 151, 0.0)); /*background-image: radial-gradient(ellipse, rgba(6,94,151, 1.0) 10%, rgba(6,94,151, 0.0) );*/
  background-color: transparent;
}

/* START TEXT ON ROLLOVER */


/* text on the hidden overlay */
.litec-moduleBtn {
  font-family: 'Jaldi', sans-serif;
  font-weight: bolder;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* link */
.litec-moduleBtn a {
  font-family: 'Jaldi', sans-serif;
  color: white;
  text-align: center;
  text-decoration: none !important;
}

/* visited link */
.litec-moduleBtn a:visited {
  font-family: 'Jaldi', sans-serif;
  color: white;
  text-align: center;
  text-decoration: none !important;
}

/* mouse over (hover) link */
.litec-moduleBtn a:hover {
  font-family: 'Jaldi', sans-serif;
  font-weight: bolder;
  color: azure;
  font-size: 24pt;
  text-shadow: 0 0 10px azure, 0 0 20px aqua, 0 0 40px dodgerblue, 0 0 80px blue;
  text-align: center;
  text-decoration: none !important;
}

/* active link */
.litec-moduleBtn a:active {
  font-family: 'Jaldi', sans-serif;
  font-weight: bolder;
  color: azure;
  font-size: 24pt;
  text-shadow: 0 0 10px azure, 0 0 20px aqua, 0 0 40px dodgerblue, 0 0 80px blue;
  text-align: center;
  text-decoration: none !important;
}


/************ Module Duration bar *****************/
.litec-Duration {
  display: block;
  background-color: #333333;
  padding: 10px 5px 10px 5px;
  margin-top: 0px;
  height: 25px;
}
.litec-Duration p {
  text-align: center;
  font-size: 10pt;
  color: #ffffff;
  font-family: 'Bellota Text', cursive;
  font-weight: 400;
  padding: 0px !important;
  margin: 0px;
}
.litec-Duration p:before {
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/durationWhite-Icon.png) !important;
  position: relative;
  display: inline;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 0;
  top: 5px;
}


/*************** Text for module title and number **************/


a.modtitle:link {color:rgba(6,94,151,1.00);text-decoration: none;}
a.modtitle:visited {color:rgba(6,94,151,1.00);text-decoration: none;}
a.modtitle:hover {color:#9f6600;text-decoration: none;}

a.modtopic:link {color:#3B3B3B;text-decoration: none;}
a.modtopic:visited {color:#3B3B3B;text-decoration: none;}
a.modtopic:hover {color:#9f6600;text-decoration: none;}

.litec-moduleTxt {
    hyphens: auto;
    margin: 30px;
}
.litec-moduleTxt H3 {
    font-size: 1.3em;
	font-weight: 400;
	color: #3B3B3B;
	font-family: 'Jaldi', sans-serif;
	line-height:1.2;
}

.litec-moduleTxt H5 {
	font-style: normal !important;
    font-size: 1.2em;
    font-weight: 600;
    font-family: 'Alegreya Sans', sans-serif;
    color:rgba(6,94,151,1.00); /*#4b787a;*/
	margin-bottom: 10px;
}
/*
.litec-moduleTxt H5 {
    font-size: 1.1em;
    font-weight: 700;
    font-family: 'Bellota Text', cursive;
    color:rgba(6,94,151,1.00); /*#4b787a;
	margin-bottom: 10px;
}
*/
/*************** HOME PAGE FOOTER AND DISCLAIMER **************/
.litec-footer {
	background-color: #333333;
	padding: 30px;
	color: #ffffff;
	font-size: 9pt;
	font-weight: 400;
	font-family: 'Bellota Text', cursive;
}
.litec-footer img {
	display: block;
	float: left;
	padding: 0px 10px 5px 0px;
	width: 50px;
	height: auto;
}


/*------------------------ ALL OF THE CLASSES USED IN MODULE PAGES ------------------------*/
/********************************************************************************************/



/************************** MODULE HEADER **************************/

.litec-subHeader {
	box-sizing: border-box;
	display: flex;
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	gap:0px;
	background-color: #333;
	margin-bottom: 40px;
	position: relative;
	
}
.litec-subHeader p {
	color: #fff;
	font-family: 'Jaldi', sans-serif;
	font-weight: 700;
	font-size: 1.8em !important;
	line-height: 1em;
	text-align: left;
	margin: 30px;
}
.litec-subHeader p:first-child {
	font-weight: 400;
	font-size: 1.5em !important;
	margin-bottom: -20px;
}
.litec-SubH-box1 {
	min-height: 50px;
	flex: 0;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	min-width: 50% !important;
	flex-grow: 2;
	margin: auto;
}
.litec-SubH-box2 {
	position: relative;
	overflow: hidden;
	max-height: 200px;
}
.litec-SubH-box2::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-image: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/Creds2022-moduleGREY.png);
	background-repeat: no-repeat;
	z-index: 1;
	display: block;
	background-size: contain;
}
.litec-SubH-box2 img {
	min-height: 100%;/*new*/
	vertical-align: middle; /*new*/
	object-fit: cover;
	min-width: 100%;
	max-height: 100%;
	object-position: left;
	z-index: 0;
}


@media (max-width: 768px) {
	.litec-subHeader p:first-child {
	font-size: 1.7em !important;
		text-align: left;
}
	.litec-subHeader p {
	font-size: 1.4em !important;
	text-align: center;
		text-align: left;
}
}

@media (max-width: 500px) {
	.litec-subHeader p:first-child {
	font-size: 1.2em !important;
		text-align: left;
}
	.litec-subHeader p {
	font-size: 1.4em !important;
	text-align: center;
		text-align: left;
}
}


@media (max-width: 400px) {
.litec-subHeader {
	flex-direction: column;
}
.litec-SubH-box2:after {
	background-image: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/Creds2022-moduleDWN.png);
}
.litec-subHeader p {
	font-size: 1.5em !important;
	text-align: center;
}
	.litec-subHeader p:first-child {
	font-size: 1.2em !important;
		text-align: center;
}
.litec-SubH-box2 img {
	width: 100%;
	object-fit: fill;
	z-index: 0;
}
}



/************************** TOPICS OVERVIEW BOXES FOR MODULES **************************/

/*Flex items*/
.litec-Topics {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  column-gap: 3%;
  margin: 30px 0px;
  padding: 0;
  list-style: none;
  justify-content: center;
}


.litec-TopicsItem {
  box-sizing: border-box;
  display: flex;
  padding: 0px;
  width: 100%;
  border: 1px solid #E3D5CA;
}

@media all and (max-width: 499px) {
  .litec-Topics {
    flex-flow: column;
  }
}
/* Medium devices (landscape tablets, 501px and up) */
@media only screen and (min-width: 500px) {
  .litec-TopicsItem {
    flex: 48%;
  }
}

@media all and (min-width: 700px) {
  .litec-TopicsItem {
    flex: 30%;
  }
}
/* Canvas side menu is present, taking up real estate */
@media only screen and (min-width: 770px) {
  .litec-TopicsItem {
    flex: 30%;
  }
}

/* Large devices (laptops/desktops, 993px and up) */
@media only screen and (min-width: 1200px) {
  .litec-TopicsItem {
    flex: 20%;
  }
}


.litec-TopicsItem:hover {
  border: 1px solid cornflowerblue;
	box-shadow: 0 0 10px azure, 0 0 3px cyan, 0 0 7px dodgerblue;
  transition: all 0.5s ease-in-out 0s;
}

/************ Topics Duration bar *****************/
.litec-TopicsDuration {
	display: block;
  background-color: #ececec;
  padding: 10px 5px 10px 5px;
	margin-top: 0px;
	height: 25px;
	}

.litec-TopicsDuration p {
    text-align: center;
    padding: 0px !important;
    font-size: 1em !important;
    color: #707070;
    font-family: 'Jaldi', sans-serif !important;
    font-weight: 400 !important;
    margin: 0px;
	}

.litec-TopicsDuration p:before {
  content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/duration-Icon.png) !important;
  position: relative;
    display: inline;
    width: 20px;
    height: 20px;
    margin: 0 6px 0 0;
	top:5px;

}

/************ Topics heading *****************/	
.litec-TopicsItem h2 {
  margin: 0px;
  hyphens: auto;
background-color: #3B3B3B;
	padding: 5px;
	text-align: center;
	color:#ffffff;
	font-family: 'Alegreya Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 50px
}

.litec-TopicsContent {
	box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0px;
  width: 100%;
}
.litec-TopicsContent p {
  flex: 1 0 auto;
	padding:5px 15px;
	font-family: 'Bellota Text', cursive;
  font-weight: 400;
	font-size: 1em;
} 

.litec-TopicsContent a {
	padding: 5px 15px;
	font-family: 'Bellota Text', cursive;
    font-weight: 400;
	font-size: 1em;
	text-decoration: none !important;
	color: rgba(6,94,151, 1.0);
	}

	.litec-TopicsContent a:link {
	color: rgba(6,94,151, 1.0);
	}


.litec-TopicsContent a:visited {
	text-decoration: none !important;
	color:rgba(64,66,67,1.00);
}


.litec-TopicsContent a:hover {
	color: cornflowerblue !important;
	text-decoration: none !important;
	cursor: pointer;
}

.litec-TopicsContent a:active {
	color: #E4B62E;
	text-decoration: none !important;
}
.litec-TopicsItem img {
    width: 40px;
    height: auto;
    vertical-align: middle;
    border: 0;
}


/*---------------------------------ASSORTED BOXES -----------------------------------*/

/* Reference with an indent */
div.litecRef {
	text-indent: -40px;
	margin-left: 90px;
	word-break: break-word !important;
 }

.litecRef svg {
    display: block;
    margin-bottom: -2px;
}

/*image styles*/

.litec-box img, .litec-tipbox img, .litec-activityBlue img, .litec-activityYellow img, .litec-reflectionGreen img, .litec-reflectionYellow img,  .litec-groupActivityBlue img, .litec-postActivityBlue img, .litec-preActivityBlue img, .litec-groupActivityYellow img, .litec-preActivityYellow img, .litec-postActivityYellow img, .litec-reading img { 
	object-position: center;
	max-width: 100% !important;
	margin: 0 auto;
	display: block;
}

/* Canvas download document icon for links needs to be realigned */
.litec-box .file_download_btn img, .litec-tipbox .file_download_btn img, .litec-activityBlue .file_download_btn img, .litec-activityYellow .file_download_btn img, .litec-reflectionGreen .file_download_btn img, .litec-reflectionYellow .file_download_btn img,  .litec-groupActivityBlue .file_download_btn img, .litec-postActivityBlue .file_download_btn img, .litec-preActivityBlue .file_download_btn img, .litec-groupActivityYellow .file_download_btn img, .litec-preActivityYellow .file_download_btn img, .litec-postActivityYellow .file_download_btn img, .litec-reading .file_download_btn img { 
    display: inherit;
    margin: 0;
	width: auto !important;
}

.litecRef .file_download_btn {
    display: inline-block;
}

/*************4 x 4 flexboxes with yellow headings*************/

.litec-threeBox {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
}
/*************4 x 4 flexboxes with yellow headings*************/

.litec-hilights {
        box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0px;
    padding: 0;
    list-style: none;
    justify-content: flex-start;
    gap: 15px;
}
.litec-hilight {
    box-sizing: border-box;
    display: flex;
    padding: 0px;
    width: 100%;
    border: 1px solid #E3D5CA;
}

.litec-hilightContent {
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0px;
    width: 100%;
}
.litec-hilight h2 {
    margin: 0px;
    hyphens: auto;
    background-color: #cc9900;
    padding: 5px;
    text-align: center;
    color: #ffffff;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 25px;
}
.litec-hilight p, .litec-hilight h4, .litec-hilight h3 {
    flex: 1 0 auto;
    padding: 0 15px;
    text-align: center;
	margin: 5px 0 8px 0;
}



.litec-hilight:hover {
    border: 1px solid #ff8100;
    box-shadow: 0 0 10px azure, 0 0 3px #fbe59c, 0 0 7px #cc9900;
    transition: all 0.5s ease-in-out 0s;
}
.litec-hilightContent ul, .litec-hilightContent ol {
	display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    text-align: left;
}
.litec-hilightContent li > p, .litec-hilightContent li {
	padding: 0;
	text-align: left;
}


@media all and (max-width: 499px) {
  .litec-hilights {
    flex-flow: column;
  }
}
/* Medium devices (landscape tablets, 501px and up) */
@media only screen and (min-width: 500px) {
  .litec-hilight {
    flex: 20%;
  }
}

/*parent wrappers for boxes with icons*/


/*parent wrappers for boxes with icons !!!!!!!!USING GRID!!!!!!*/


.litec-miniboxes {
	display: grid;
	list-style: none;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

		
.litec-minibox {
	padding: 15px;
	border-radius: 5px;
	background-color: #ffffff;
	margin-top: 30px;
	text-align: center !important;
	border: 2px solid #E3D5CA;
}

.litec-miniboxnumber {
	z-index: 1;
	margin: -30px auto 0px auto;
	border: 1px solid #CA9302;
	box-shadow: 1px 1px 5px 1px #b7b7b7;
	border-radius: 50%;
	display: block;
	width: 20px;
	height: 20px;
	padding: 10px;
	color: #fff;
	text-align: center;
	font: 20px Arial, sans-serif;
	background-color: #CA9302;
}


/************ General frameing box *****************/	

/* parent flexbox and children */
.litec-boxWrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	column-gap: 20px;
	row-gap: 20px;
	margin: 20px 0px;
}
.litec-box {
	flex: 1;
	padding: 15px;
	border-radius: 5px;
	border: 1px solid #B7B7B7;
	background-color: #ffffff;
	text-align: left;
	position: relative;
}

/*------------Attention box-------------------*/
/* parent flexbox and children */

.litec-attention {
	border: 2px solid #cc6c34;
	border-radius: 5px;
	display: flex;
	flex-flow: row nowrap;
	align-items:flex-start;
	margin: 20px 0px;
	padding: 20px;
	gap: 20px;
}

.litec-attention h3 {
	color: #cc6c34 !important;
}

.litec-attention div:last-child {
	flex: 2;
}
.litec-attentionSign {
	max-width: 80px !important;
	padding: 20px;
}

@media all and (max-width: 500px) {
  .litec-attention {
    flex-flow: column wrap;
    text-align: center !important;
	  align-items: center;
  }
  .litec-attention h3 {
    text-align: center !important;
  }
}


/************ facilitators and badges boxes*****************/	

.litec-Linkedin { 
	/*position: absolute;*/
	bottom: 0px;
  }
.litec-Linkedin:before { 
	content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/linkedin_logo.jpg);
    display: inline-block;
    margin: 1px 6px 0px 0px;
    transform: translate(0px,5px);
  }

/* parent flexbox and children */
.litec-boxSyllabus {
  border-radius: 5px;
  border: 1px solid #B7B7B7;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 20px 0px;
  padding: 20px;
}
.litec-boxSyllabus div {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 25%;
	hyphens: auto;
  text-align: left;
}
.litec-boxSyllabus div:nth-of-type(2) {
  flex-basis: 75%;
	padding: 0 20px;
	position: relative;
}

.litec-boxSyllabus img {
  width: 100% !important;
	max-width: 200px !important;
	vertical-align: top;
}
@media all and (max-width: 500px) {
  .litec-boxSyllabus {
    flex-direction: column;
	  align-items:center;
  }
  .litec-boxSyllabus img {
    vertical-align: middle;
	  padding: 0 0 20px;
  }
}
/*--------------------------Activity box----------------------------*/
/* parent flexbox and children */

/*parent wrappers for boxes with icons*/

.litec-read {
    /* display: flex; */
    
    margin: 30px 0px;
	
}
.litec-activities, .litec-tips, .litec-reflect { 
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	column-gap: 20px;
	row-gap: 30px;
	margin: 30px 0px;
	position: relative;
}
/*general children attributes for all activity boxes*/
.litec-activityBlue, .litec-groupActivityBlue, .litec-postActivityBlue, .litec-preActivityBlue, .litec-activityYellow, .litec-groupActivityYellow, .litec-preActivityYellow, .litec-postActivityYellow {
	flex: 1;
	padding: 20px;
	border-radius: 5px;
	background-color: #ffffff;
	text-align: left;
	position: relative;
	margin-top: 20px;
}

/* border colours for child activity boxes*/
.litec-activityBlue, .litec-groupActivityBlue, .litec-postActivityBlue, .litec-preActivityBlue {
	border: 2px solid #0b84b1;
}


.litec-activityYellow, .litec-groupActivityYellow, .litec-preActivityYellow, .litec-postActivityYellow {
	border: 2px solid #CA9302;
	background-color: #ffffff;
}
/*icons for child activity boxes */

.litec-activityBlue:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/activityIconBlue.png);
  top: -38px;
  right: 30px;
}

.litec-activityYellow:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/activityIcon.png);
  top: -38px;
  right: 30px;
}

.litec-groupActivityYellow:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/GroupActivityIcon.png);
  top: -33px;
  right: 30px;
}

.litec-groupActivityBlue:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/groupIconBlue.png);
  top: -32px;
  right: 30px;
}

.litec-preActivityBlue:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/preSessIconBlue.png);
  top: -20px;
  right: 30px;
}

.litec-preActivityYellow:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/preSessIcon.png);
  top: -20px;
  right: 30px;
}

.litec-postActivityYellow:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/postSessIcon.png);
  top: -20px;
  right: 30px;
}

.litec-postActivityBlue:after {
  position: absolute;
  content: url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/postSessIconBlue.png);
  top: -20px;
  right: 30px;
}



/*----------------------Tip boxes---------------------------*/

/* parent flexbox and children */

.litec-tipbox {
	flex: 1;
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #CA9302;
	background-color: #ffffff;
	text-align: left;
	position: relative;
	margin-top: 20px;
}

	.litec-tipbox:after {
    position: absolute;
content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/lightbulbTIP.png);
    top: -20px;
    right: 30px;
}

/*---------------------Required Reading boxes---------------------------*/

/* parent flexbox and children */

.litec-reading {
	flex: 1;
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #CA9302;
	background-color: #ffffff;
	text-align: left;
	position: relative;
	margin-top: 20px;
}

	.litec-reading:after {
    position: absolute;
content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/reading.png);
    top: -20px;
    right: 30px;
}

/*--------------------------Reflection box----------------------------*/
/* parent flexbox and children */

.litec-reflectionGreen {
	flex: 1;
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #00a79d;
	background-color: #ffffff;
	text-align: left;
	position: relative;
	margin-top: 20px;
}
.litec-reflectionYellow {
	flex: 1;
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #CA9302;
	background-color: #ffffff;
	text-align: left;
	position: relative;
	margin-top: 20px;
}

	.litec-reflectionGreen:after {
    position: absolute;
content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/reflect-Icon.png);
    top: -20px;
    right: 30px;
}

.litec-reflectionYellow:after {
    position: absolute;
content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/reflectYellow-icon.png);
    top: -20px;
    right: 30px;
}

/*media query for boxes */

@media all and (max-width: 540px) {
.litec-boxWrapper, .litec-tips, .litec-activities,  .litec-reflect, .litec-read {
	flex-flow: column;
}
}
@media all and (min-width: 500px) {
.litec-box, .litec-tipbox, .litec-reflectionGreen, .litec-reflectionYellow, .litec-activityYellow, .litec-groupActivityYellow, .litec-preActivityYellow, .litec-postActivityYellow, .litec-activityBlue, .litec-groupActivityBlue, .litec-postActivityBlue, .litec-preActivityBlue, .litec-reading  {
	flex-basis: 40%; 
}
}

/* ----------------------------Staggered (Masonry) Example boxes-----------------------*/
.litec-examples {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  position: relative;
}
.litec-examples * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.litec-exampleBox {
  margin: 0;
  padding: 8px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
	
}

.litec-example {
  border-radius: 5px;
  overflow: hidden;
  padding: 10px;
  width: 100%;
	border: 1px solid #B7B7B7;
	background-color: #ffffff;
	
}
.litec-example img {
  width:100%;
	height:auto;
}

/* COLUMN CHANGES */
		.litec-examples {
  column-count: 1;
  column-gap: 0;
}


@media (min-width: 1000px) {
  .litec-examples {
    column-count: 2;
  }
}
@media (max-width:999px) {
  .litec-examples {
    column-count: 1;
  }
}

/*-----------------------Quotes------------------------------*/

/* Blockquote main style */
.litec-quote {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #CA9302;
    padding: 30px 0;
    width: 100%;
    max-width: 1000px;
    z-index: 1;
    margin: 40px auto;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-left: 0px;
}

/* Blockquote header */
.litec-quote h1 {
	font-family: 'Jaldi', sans-serif;
    position: relative;
    color: #CA9302;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0px 20px 0 20px;
}
		
/* Blockquote subheader */
.litec-quote h4 {
    color: #292a2b;
    font-size: 1.1em;
    font-weight: 100;
    line-height: normal;
    display: block;
    margin: 20px 20px 0 20px !important;
    z-index: 1;
    font-family: 'Jaldi', sans-serif;
}

/* Blockquote right double quotes */
.litec-quote:after {
    position: absolute;
    content: "”";
    color: #CA9302;
    font-size: 5rem;
    top: 15px;
    right: 30px;
	line-height: 0px;
}

.litec-quote p {
	font-size: 1em;
    font-weight: 400;
    line-height: 1.6;
	 margin: 20px 20px 0 20px !important;
	color: #000000;
	font-family:"Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
    .litec-quote h1 {
        font-size: 1.5em;
		line-height: 1.3em;
   }
	.litec-quote h4 {
        font-size: 1.2em;
   }
}

/* quotes with an image on the left use this css */

		.litec-quoteboxes {
		  display: flex;
		  flex-direction: row;
		  justify-content: flex-start;
		  margin: 0px;
		  padding: 0px;
		}
		.litec-quoteboxes img {
		  max-height: 400px;
		  max-width: 200px !important;
		  vertical-align: top;
		  margin: 0 auto;
		}
		.litec-quoteboxes div {
		  hyphens: auto;
		  text-align: center;
		}
		.litec-quoteboxes div:nth-of-type(2) {
		  flex-basis: 80%;
		  padding: 0 20px 0 0;
		  position: relative;
		  text-align: left;
		}

.litec-quoteboxes ol, ul {
	margin-left: 50px;
	font-weight: normal !important;
		}

		.litec-quoteboxes p {
		  font-size: 1em;
		  font-weight: 400;
		  line-height: 1.6;
		  margin: 20px 20px 0 20px !important;
		  font-family: "Lato Extended", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
		  color: #cb9203;
		}


		.litec-quoteboxes p:nth-of-type(1) {
		  font-size: 18pt;
		  font-weight: normal;
			margin-top: 0 !important;
		}

		@media (max-width: 500px) {
		  .litec-quoteboxes {
		    flex-direction: column;
		    align-items: center;
		  }
		  .litec-quoteboxes img {
		    vertical-align: middle;
		    padding: 0 0 20px;
		    max-height: 300px;
		  }
		  .litec-quoteboxes div:nth-of-type(1) {
		    flex-basis: 20%;
		    flex-shrink: 2;
		    padding: 0 20px;
		    position: relative;
		  }
		}

/*--------------------------Background image with text overlay----------------------------*/
.litec-textBgnd {
    width: 100%;
	max-height:50% !important;
    position: relative;
    border: 0px;
    padding-left: 0px;
    padding-right: 0px;
	margin: 20px 0px 30px 0px
}
.litec-textBgnd img {
	top:0;
    width: 100% !important;
	max-width: 100% !important; /*forces the image full width */
	max-height: 500px !important; /*stops the height of the background at 500px high */
    object-fit: cover; /* make it fit to different screen size */
	overflow: hidden;
}

.litec-textOverlay {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgba(0, 0, 0, 0.6); /* Black background with 0.6 opacity */
  color: #ffffff; /* white text */
  width: 90% !important; /* width */
  padding: 20px; /* Some padding */
  font-size: 1em; 
  text-align: left;
  max-height: 70%;
  overflow-y: auto;
	font-weight: 600;
}
.litec-textOverlay h3, .litec-textOverlay h4 {
	color: #ffffff; /* white text */
}

.litec-textOverlay a:link {
	color: #ffffff;
}

.litec-textOverlay a:visited {
	color: #ffffff;
}

.litec-textOverlay a:hover {
	color: #cc9900;
}

.litecOverImage a:active {
	color: #cc9900;
}

/*---------------------ACCORDION AND enhanceable_content STYLES---------------------------*/

/*******  Accordion styles  ********/

.litec-summary {
	background-color: #ffffff;
	cursor: pointer;
	border-radius: 5px;
	padding: 5px;
	font-size: 1.3em;
	color: darkslategrey;
	margin: 10px 0px 0px;
	border: thin solid lightgray;
}

.litec-details, .litec-details-vid {
	padding: 20px;
	font-size: 1 em;
    color: #404042;
    margin: -6px 0px 20px;
	background-color: #ffffff;
    border-left: thin solid lightgray;
    border-bottom: thin solid lightgray;
    border-right: thin solid lightgray;
}

/* Canvas download document icon for links needs to be realigned */
.litec-details .file_download_btn img {
    display: inherit;
    margin: 0;
	width: auto !important;
}

.litec-details img {
	display: block;
	margin: 0 auto;
}

/* Use instead of .litec-details in accordions for youtube video links with a thumbnail, makes them align left in an accordion */

.litec-details-vid .file_download_btn img {
    display: inherit;
    margin: 0;
	width: auto !important;
}

.litec-details-vid img {
	display: block;
	margin: 0;
}

/*---------------------LIST STYLES-------------------------*/

/*--------------ticked unordered list---------------------*/
 ul.litec-listTicks {
	list-style-type: none;
}

 ul.litec-listTicks li::before { 
	content: '\2713';
	color: #c9992b;
	margin-left: -20px;
	margin-right: 10px;
} 


/*--------------crosses unordered list---------------------*/
 ul.litec-listCrosses {
	list-style-type: none;
}

 ul.litec-listCrosses li::before { 
	content: '\2718';
	color: #AD5100;
	margin-left: -20px;
	margin-right: 10px;
} 


/* different list bullets */

 ul.litec-clearMarkers {
	list-style-type: none; /*get rid of the bullets in the list*/
}

li.litec-listTick::before {
	list-style-type: none;
	content: '\2713';
	color: #c9992b;
	margin-left: -20px;
	margin-right: 10px;
} 
li.litec-listCross::before {
	list-style-type: none;
	content: '\2718';
	color:#AD5100;
	margin-left: -20px;
	margin-right: 10px;
}


/*---------------------AUDIO----------------------*/
.litec-audio {
	position:relative;
	box-sizing: border-box;
	border: 2px solid;
	border-color: #5200BD;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	margin: 40px 0px;
	padding: 30px;
	justify-content: flex-start;
	gap:20px;
}
		.litec-audio div {
			flex:auto;
			flex-direction: row;
			box-sizing:content-box;
		}
.litec-audio audio {
	width: 1000px;
    max-width: 100% !important;
}

.litec-audio img {
	display: block;
    width: 140px;
	height: auto;
	margin: 0 auto;
}

	.litec-audio:after {
    position: absolute;
content:url(https://resources.curtin.edu.au/assets/litec/CurtinCanvas/templates/creds/graphics/audioPurple.png);
    top: -20px;
    right: 30px;
}


/*------------------------ Zoom and Pan Img  ------------------------*/
#ZoomContainer {
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.ZoomPan img {
  transform-origin: center center;
  object-fit: cover;
  height: 100%;
  width: 100%;
	transition: all 0.3s ease-out;
	position: relative;
}

/* zppm magnify glass */

.img-magnifier-container {
  position:relative;
	box-sizing: border-box;
	margin: 30px 0;
}

.img-magnifier-glass {
  position: absolute;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 150px;
  height: 150px;
	box-sizing: border-box;
	visibility: hidden;
}
.img-magnifier-container:hover .img-magnifier-glass {
  visibility:visible;
}



/*zoom */
.litec-zoom {
	top: 0;
    left: 0;
	/*width: 100%;*/
	max-width: 1000px;
	height: auto;
	margin: 0 auto;
	border: 1px solid #8C8C8C;
	} 

  .litec-zoomContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .litec-zoomPhoto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-out;
  }

/************* flip cards  ****************/

.credsFlip-Container {
    /* We first create a flex layout context */
    display: flex;
    /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}
.credsFlip-item {
    background: #ffffff;
    padding: 10px;
    width: 300px;
    height: 300px;
    /*margin-top: 60px;*/
    text-align: center;
}
/* Make th eflip cards */    
.credsflip-card {
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}
.credsflip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.credsflip-card h1 {
	font-size: 1.4em;
	margin-block-start: 0px;
}
.credsflip-card p {
	font-size: 1.1em;
}
.credsflip-card:hover .credsflip-card-inner {
    transform: rotateY(180deg);
}
.credsflip-card-front, .credsflip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.credsflip-card-front {
        background-color: #233a4b;
    color: #ffffff;
}

.creds-Flipcardbutton {
   background-color: white;
  border: 2px solid #cc9900;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2em;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
	border-radius: 5px;
}

.creds-Flipcardbutton:hover {
  background-color: #fff4d3;
  border: 2px solid #AE8300;
}

.creds-Flipcardbutton a:hover {
	color: #323f5f !important;
}

.creds-Flipcardbutton a:visited {
	color: #705400;
}


.creds-Flipcardbutton a:active {
	color: #705400;
}


.creds-Flipcardbutton a:focus {
	color: #705400;
}

.creds-Flipcardbutton a {
	color: #705400;
}

.credsflip-card-back {
    background-color: #233a4b;
    color: white;
    transform: rotateY(180deg);
}
.credsflip-card img {
	object-fit: cover;
    height: 300px;
    width: 300px;
}

.credsflip-card-back div {
	padding: 15px;
	overflow: auto;
	max-height: 270px;
}

.credsflip-card-text {
	padding: 15px;
	overflow: auto;
	max-height: 100px;
	
}

/* *****Show hide div for long image description ******** */
.credsImgDes:target {
display:block !important;
}

/*Acknowledgements text */

.cast-list {
			font-size: 1em;
			width: 100%;
			max-width:1000px;
		}

.cast-head {
  text-align: center !important;
    font-size: 1.2em;
    color: #000000;
    margin-top: 20px;
    line-height: normal;
    font-weight: 400;
}

.cast-list div {
  /* Setup the task and person items as a flexible layout. */
  display: flex;
  margin: 5px 0px 5px 0px;
}

.cast-list .task {
  /*
				Setup the task element as a NESTED flexible layout. This will control the IMPLICIT TEXT element (task) and the :after pseudo-element (dots)
				layouts.
			*/
  display: flex;
  /* Setup the task element to grow and take-up space. */
  flex: 1 1 auto;
  margin: 0px 0px 0px 0px;
}

.cast-list .task:after {
  border-bottom: 2px dotted #787878;
  content: "";
  /*
				Setup the pseudo-element (dots) to grow and take-up space. This will fill the white-space with "dots" because it growing inside of another layout
				which is also growing.
			*/
  flex: 1 1 auto;
  margin: 0px 12px 5px 12px;
}

.cast-list .person {
  /* Setup the person element to shrink, allow for dots to fill space. */
  flex: 0 1 auto;
  margin: 0px 0px 0px 0px;
}


/* Extra extra small devices (phones, 320px and down) 
@media only screen and (max-width: 320px) {
  .cast-list {
    font-size: 1em;
  }
	.cast-head {
		font-size:18px;
	}
}
/* Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {
  .cast-list {
    font-size: 1.1em;
  }
	.cast-head {
		font-size:18px;
	}
}
/* Small devices (portrait tablets and large phones, 600px and up) 
  .cast-list {
    font-size: 1.2em;
  }
	.cast-head {
		font-size:22px;
	}
}