/*//////////////////////
////
//// ACCOUNT Variables
////
///////////////////////*/

:root{
  --primary-brand-colour: #e66d69;
  --table-accent-colour: #f864641a;
  --table-accent-colour-light:#f8646408;

  /*--secondary-brand-colour: ;*/
}

/*//////////////////////
////
//// ACCOUNT THEME
////
///////////////////////*/
	/* breadcrumb trail*/
  .ic-app-nav-toggle-and-crumbs, .ic-app-nav-toggle-and-crumbs li, .ic-app-nav-toggle-and-crumbs {
    font-size:14px!important;
    color:#000010!important;
    font-family: 'National2';
  }
  .ic-app-nav-toggle-and-crumbs a{
    font-family: 'National2-Bold';
  }
  /*global navitation*/
  .navigation-tray-container { /*pop-out menu*/
    background: var(--primary-brand-colour);
  }
  .navigation-tray-container hr {
    border-top: 1px solid #000;
  }
  .navigation-tray-container a, .navigation-tray-container, .navigation-tray-container li {
    color:#000;
    font-family:'National2';
  }
  .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link { /*selected icon*/
    background: var(--primary-brand-colour);
    color:#000;
  }
/*buttons*/
  .btn, button {
    border-radius: 0px!important;
}
/*page fonts*/
  .user_content h1 {
    color: #000010!important;
    font-family: 'National2-Light';
    font-size:54px!important;
  }
  .user_content h1:after {
    content: '';
    display: block;
    position: relative;
    width: 50px;
    border: 1px solid #000010;
    margin-top: 8px; 
    margin-bottom:24px;
    margin-left:0px;
  }
  h2.course-title  {
    font-family: 'National2-Bold';
    font-size:26px!important;
    color:var(--primary-brand-colour)!important;    
  }
  .user_content h2 {
    font-family: 'National2-Light';
    font-size:34px;
    color:#000010!important;
  }
  .user_content h3 {
    font-family: 'National2-Light';
    font-size:28px;
    color:#000010!important;
  }
  .user_content p {
    font-family: 'National2';
    font-size:18px;
    line-height:1.8rem;
    margin-bottom:1rem;
    color:#000010!important;
  }
  .user_content li{
    font-family: 'National2';
    font-size:18px;
    line-height:1.rem!important;
    color:#000010!important;
    margin-left:8px;
  }
  .user_content a, .user_content li a {
    font-family: 'National2-Bold';
    color:#348da1;
  }
  #left-side a:hover {
    color:#348da1;
  }
  /* tables */
  #wiki_page_show tr:nth-child(even) {background:var(--table-accent-colour-light)}
  #wiki_page_show tr:nth-child(odd) {background: var(--table-accent-colour)}
  #wiki_page_show tr.brandtableheader {background: var(--primary-brand-colour)}
  #wiki_page_show tr th {background: var(--primary-brand-colour)}
  #wiki_page_show tr, #wiki_page_show table {border:none;}
  #wiki_page_show td {border: solid 1px rgba(0, 0, 0, 0.2)}
  #wiki_page_show table {margin:1em;}
/* left-hand module navigation menu */
  #left-side {
    font-family: 'National2-Light';
    color:#000010!important;
  }
  #left-side .active{
    color:var(--primary-brand-colour)!important;
    border-color:var(--primary-brand-colour)!important;
  }
/* mark as done buttons */
  #mark-as-done-checkbox.btn{
    background:#D65108;
    color:#fff;
    border-color:#000;
  }
  #mark-as-done-checkbox.btn-success{
    background:#00ac18;
    color:#fff;
    border-color:#000;
  }
/*fonts*/
  @font-face {
    font-family: National2;
    src: url('https://www.bimm.ac.uk/wp-content/themes/bimm/assets/fonts/National2Web-Regular.woff2');
  }
  @font-face {
    font-family: National2-Bold;
    src: url('https://www.bimm.ac.uk/wp-content/themes/bimm/assets/fonts/National2Web-Bold.woff2');
  }
  @font-face {
    font-family: National2-Light;
    src: url('https://www.bimm.ac.uk/wp-content/themes/bimm/assets/fonts/National2Web-Light.woff2');
  }



/*//////////////////////
////
//// CUSTOM UI ELEMENTS
////
///////////////////////*/
/* [TIP] & [ACTIVITY] BOXES */
	
.callout {
  padding-left:1em;
  padding-right:1em;
  margin-bottom:2em;
  border:1px solid rgba(226, 232, 240); box-shadow:0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%)
}
.callout p, .callout li {
  font-size:16px;
  font-family:'National2-Light';
  line-height: 24px;
}
.callout h2 {
  font-size: 22px;
  font-family:'National2';    
  margin-left:-.75em;
  margin-right:-.75em;
  margin-top:-.1em;
  margin-bottom:.75em;
  padding-top:.3em;
  padding-bottom:.3em;
  padding-left:.5em;
  padding-right:.5em;
}
#activity h2 {
  background:#00687f;
  color:#fff!important;
}
#tip h2 {
  background:#591c97;
  color:#fff!important;
}
#activity h3, #tip h4 {
  color:#00687f!important;
}
#tip h3, #tip h4 {
  color:#591c97!important;
}
.callout h3{
  font-size:1.2em;
  font-family: 'National2';
}
.callout h4{
  font-size:1em;
  font-family: 'National2-Bold';
}
.callout h5{
  font-size:1em;
  font-family: 'National2';
}
/* [QUOTE] */
#quote p, #quote li {
   font-size:20px;
}




/* [BANNER] */
	/* adjust to fit different screen sizes*/
	@media screen and (max-width: 768px) {
		.img1 h2 {
			display:none;
		}
	}
	@media screen and (min-width: 1601px) {
        #banner {                 /* ← NEW */
            height:13em;          /*      */
        }                         /* ← NEW */
        #banner h2 {
            font-size:4em;
        }
    }

	@media screen and (max-width: 1600px) {
		#banner {
			height: 13em;
		}
        #banner h2 {
    		font-size:2.8em;
		}
    }
	@media screen and (max-width: 1400px) {
		#banner {
			height: 12em;
		}
        #banner h2 {
    		font-size:2.4em;
		}
    }
	@media screen and (max-width: 1000px) {
		#banner {
			height: 10.5em;
		}
        #banner h2 {
    		font-size:1.6em;
		}
    }
	@media screen and (max-width: 768px) {
		#banner {
			height: 7.6em;
		}
        #banner h2 {
    		font-size:3em;
		}
    }

/* banner formatting */
#banner {
		width: 100%;
		overflow: hidden;
		position: relative;
		top: -14px;
		left: 0;
	}
	.img1 img {
    width:100%;
		top: 0;
		left: 0;
		position:absolute;
		filter: brightness(40%);
	}
	#banner h2, #banner h3 {
		position:absolute;
		padding-left:30px;
		padding-top:10px;
		color:#ffffff!important;
		z-index:99;
		padding-right:30px;
	}
	.img2 {
    width:100%;
		position: relative;
		top: 0px;
		left: 0px;
		z-index: 2;
		opacity: 25%;
		overflow: hidden;
	}

.img2 img{
  width:100%;
}


/* [RED],[BLACK],[YELLOW],[ORANGE] & [GREEN] [PINK] [BLUE] boxes */

/* Colour codes */
#c-pink {background-color:#FFC5F8;}
#c-black {background-color:#000;}
#c-red {background-color:#f86464;}
#c-yellow {background-color:#F7D45D;}
#c-orange {background-color:#FF9E41;}
#c-green {background-color:#51E19F;}
#c-blue {background-color:#ACD5FB;}
#c-teal {background-color:#008080;}
#c-frame-black{

box-shadow: 10px 10px 5px rgb(67, 67, 67);
border-left: 6px solid black;}

/* Spacing */
#c-black,#c-red,#c-yellow,#c-orange,#c-green,#c-pink, #c-blue, #c-teal,#c-frame-black {
padding-top:0.2em;
padding-bottom:2em;
padding-left:1em;
padding-right:1em;
margin-bottom:1em;    
}
#c-black a,#c-red a,#c-yellow a,#c-orange a,#c-green a,#c-pink a, #c-teal a, #c-frame-black a {
  float:left;
  margin-right:.5em;
}
/*what is this?*/
#c-black a.external .ui-icon-extlink,#c-red a.external .ui-icon-extlink,#c-yellow a.external .ui-icon-extlink,#c-orange a.external .ui-icon-extlink,#c-green a.external .ui-icon-extlink,#c-pink a.external .ui-icon-extlink, #c-blue a.external .ui-icon-extlink, #c-teal a.external .ui-icon-extlink{
display:none;
}

/* Formatting of text */
/*Headers*/
#c-red h2,#c-yellow h2, #c-green h2, #c-blue h2, #c-pink h2, #c-frame-black h2 {
color:#000!important;
font-family:'National2-Bold';
text-transform: uppercase;
font-size:25px;
margin-bottom:0.5em;
}
#c-black h2,#c-orange h2, #c-teal h2 {
color:#fff!important;
font-family:'National2-Bold';
text-transform: uppercase;
font-size:24px;
}

#c-red h3,#c-blue h3, #c-yellow h3, #c-green h3, #c-pink h3, #c-frame-black h3 {
color:#000!important;
font-family:'National2';
text-transform: uppercase;
font-size:24px;
margin-top:0.25em;
margin-bottom:.2em;
}
#c-black h3,#c-orange h3, #c-teal h3 {
color:#fff!important;
font-family:'National2';
text-transform: uppercase;
font-size:24px;
}



/* Box height*/
#c-pink, #c-black, #c-red, #c-yellow, #c-orange, #c-green, #c-blue, #c-teal{
    height: 100%;
}

/* Paragraph (and li?)*/
#c-black p,#c-orange p, #c-black li,#c-orange li, #c-teal p, #c-teal li {
color:#fff!important;
}
#c-yellow p, #c-green p, #c-red p, #c-blue p, #c-yellow li, #c-green li, #c-red li, #c-blue li, #c-frame-black li, #c-frame-black p {
color:#000!important;
margin-top:.6em;
}

/* Formatting of link box */
#c-yellow a, #c-green a, #c-red a, #c-blue a, #c-pink a, #c-frame-black a {
text-transform: uppercase;
text-decoration-line: none;
color:#000!important;
border: 2px solid #000;
padding:8px;
}
#c-yellow a:hover,#c-red a:hover, #c-green a:hover, #c-blue a:hover, #c-pink a:hover, #c-frame-black a:hover {
text-transform: uppercase;
text-decoration: none!important;
color:#fff!important;
border: 2px solid #000!important;
padding:8px;
background:#000!important;
}
#c-black a, #c-orange a, #c-teal a {
text-transform: uppercase;
text-decoration-line: none;
color:#fff!important;
border: 2px solid #fff;
padding:8px;
}
#c-black a:hover, #c-orange a:hover, #c-teal a:hover {
text-transform: uppercase;
text-decoration: none!important;
color:#000!important;
border: 2px solid #fff!important;
padding:8px;
background:#fff!important;
}



/* [WRAP-LEFT] & [WRAP-RIGHT] */
.wrap-left img {
    padding-right:1em;
    padding-bottom:.5em;
    float:left;
}
.wrap-right img {
    padding-left:1em;
    padding-bottom:.5em;
    float:right;
    
}