/* FOR SEPERATING DESKTOP AND MOBILE ELEMENTS */
/* HIDE MOBILE */
.mobile_only	{
		display: inherit;	
}

/* SHOW DESKTOP */
.desktop_only	{
		display: none;	
}  








/* =============== EMERGENCY BANNER =================== */
.emergency_banner   {
    width: 100%;
    background: #990000;
    color: white;
    font-size: 1.5em;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    text-align: center;
}











/* ========================= GENERAL STYLES ============================= */
/* BRANDED - BOOKER FONT */
@font-face {
    font-family: 'brookermedium';
    src: url('../fonts/brooker-webfont.woff2') format('woff2'),
         url('../fonts/brooker-webfont.woff') format('woff'),
         url('../fonts/Brooker.ttc') format('ttf');
    font-weight: normal;
    font-style: normal;

}

/* GENERAL BODY DECLARATIONS */
body	{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	color: black;
    width: 100%;
}


/* MAKE SURE PICS DON'T HAVE SPACE BETWEEN THEM AND ELEMENTS */
img {
    padding: 0px;
	margin: 0px;   
}


/* PUT BROOKER FONT ON ALL HEADLINES */
h1, h2, h3	{
	font-family: "brookermedium", arial, sans-serif;
}















/* =========================== DESKTOP MENU ==================================== */
/* TOP GRAY MENU STRIP THAT HOLDS LOGO AND SOCIAL MEDIA BUTTONS */
.menu_container {
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}


/* HOLDS MOBILE MENU ITEMS */
.mobile_menu    {
    display: none;
    background: #232323; 
}

/* THIS HOLDS EVERYTHING IN THE MOBILE MENU RIBBON */
.mobile_menu_ribbon_container  {
    background: #58575a; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* THIS HOLDS THE GRENFELL LOGO AND MENU BUTTON FOR MOBILE */
.mobile_menu_ribbon {
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
    box-sizing: border-box; 
    display: flex;
}

/* MOBILE MENU LINK COLOR, FONT AND STYLE */
.mobile_menu a:link  {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

/* MOBILE MENU LINK COLOR, FONT AND STYLE */
.mobile_menu a:hover {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

/* MOBILE MENU LINK COLOR, FONT AND STYLE */
.mobile_menu a:active {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

/* MOBILE MENU LINK COLOR, FONT AND STYLE */
.mobile_menu a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

/* MOBILE MENU PARAGRAPH COLOR, FONT AND STYLE */
.mobile_menu p {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    padding: 0px 1.5em 0px 1.5em;
    margin: 0px;
}

/* MOBILE MENU LOGO CONTAINER */
.mobile_menu_logo_container {
    width: 60%;
}

/* MOBILE MENU LOGO */
.mobile_menu_logo   {
    width: 80%; 
    height: auto; 
    padding: 1.5em; 
    margin: 0px
}

/* MOBILE MENU BUTTON CONTAINER */
.mobile_menu_button_container {
    width: 40%; 
    padding: 0px; 
    margin: 0px;
}

/* MOBILE MENU BUTTON */
.mobile_menu_button {
    float: right; 
    width: 1.8em; 
    height: auto; 
    padding: 2em; 1.5em 1.5em 0px; 
    margin: 0px;
}

.mobile_social_media_container  {
    display: flex; 
    width: 100%; 
    justify-content: space-around; 
    box-sizing: border-box; 
    padding: 1em 0px 2em 0px; 
    text-align: center;
}

.mygrenfell_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mygrenfell_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_future_students_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_future_students_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_current_students_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_current_students_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_academics_and_research_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_academics_and_research_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_departments_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_departments_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_campus_services_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_campus_services_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

.mobile_mygrenfell_links  {
    display: none;
    background: #232323; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
}

.mobile_mygrenfell_links a:link, a:hover, a:active, a:visited {   
    color: white;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    margin: 0px;
}

/* THE LINE THAT SEPERATES THE MENU ITEMS AND THE BACKGROUND PHOTO */
.menu_line	{
	background: #2d6b9e; 
	padding: 0px; 
	margin: 0px; 
	width: 100%; 
	height: 5px;
}

/* THE GRENFELL LOGO */
.logo	{
	width: 15em; 
	height: auto; 
	padding: 10px;
}

/* LOGIN MENU */
.login_menu	{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	margin: 0px;
	box-sizing: border-box;
}


/* LOGIN MENU CONTAINER */
.login_menu_container	{
	display: none;
}



















/* ========================== DESKTOP BANNERS AND OVERLAYS =================== */

/* HOMEPAGE BANNER CONTAINER - CLIPPED TO SHOW ANIMATION ZOOMING OUT */
.bg_container   {
    width: 100%;
    height: 33em;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
        
}

/* HOMEPAGE BANNER - ANIMATED TO ZOOM OUT */
.bg_banner  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation-name: grow;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 0;
}
/* ANIMATION FOR HOMEPAGE BANNER */
    @keyframes grow {
        0% {width: 110%;}
        100% {width: 100%;}
    }

/* OVERLAY FOR HOMEPAGE */
.homepage_overlay   {
    width: 100%; 
    height: auto; 
    position: absolute; 
    z-index: 1;
}


/* FOR NON-MOVING BACKGROUND IMAGE */
.static_bg	{
	width: 100%;
	height: auto;
}


.mobile_banner  {
    width: 100%; 
    height: auto; 
    padding: 0px; 
    margin: 0px;
}







































/* ============================ BODY CONTENT ============================= */


/*  CONTENT PANELS and COLUMNS */
/* ALL PANELS FOR MOBILE ARE 100% WIDTH */
.panel	{
	width: 100%;
	padding: 0px;
	margin: 0px;
	display: flex;
    flex-direction: column;
	align-items: flex-start;
	color: black;
	justify-content: center;
}

/* ALL PANELS FOR MOBILE ARE 100% WIDTH */
.panel_2	{
	width: 100%;
	padding: 0px;
	margin: 0 auto;
	display: flex;
    flex-direction: column;
	align-items: flex-start;
	color: #242424;
	justify-content: center;
}


/* HEADLINE 2 */
.highlight_title	{
	padding: 1em;
	box-sizing: border-box;
	font-size: 1em;
	color: #58575a;
	text-align: left;
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
}


.highlight_paragraph	{
	padding: 0px;
	box-sizing: border-box;
	font-size: 1.5em;
	color: #242424;
	text-align: right;
	width: 75%; 
	margin-left: auto; 
	margin-right: auto;
}



/* ALL COLUMNS FOR MOBILE ARE 100% */
.column	{
	width: 100%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}

/* ALL COLUMNS FOR MOBILE ARE 100% */
.column2	{
	width: 100%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}

/* ALL COLUMNS FOR MOBILE ARE 100% */
.column3	{
	width: 100%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}

/* ALL COLUMNS FOR MOBILE ARE 100% */
.column4	{
	width: 100%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}

/* ALL COLUMN IMAGES FOR MOBILE ARE 100% */
.column img, column2 img, column3 img, column4 img 	{
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

/* ALL COLUMN IMAGES FOR MOBILE ARE 100% */
.column3 img    {
    width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}
















/* ============================== ACCORDIAN CSS =================================== */
/* This is for content that is meant to be clicked for Javascript or JQuery */
.content    {
    cursor: pointer;
    color: black;  
}

/* Headline containers that change color once hovered over */
.headline_banner	{
	background: #dfdfdf;
	transition-property: background;
    transition-duration: 0.5s;
	border-radius: 10px;
   	width: 100%;
    padding: 1.5em;
    box-sizing: border-box;
}

/* Headline Container Hover Effect */
.headline_banner:hover  {
    background: #3f8abc;
}

/* For Accordians - this is the collapsed state that hides the content */	
.collapsed {
    	display: none;
}


/* APPLY BUTTON ON CHOOSE GRENFELL PAGE */
.apply_btn  {
    background: #2d6b9e; 
    border-radius: 15px; 
    color: white; 
    padding: 0px; 
    margin: 0px 0px 1.5em 0px;
}









/* ==================================== FOOTER ===================================== */
.footer	{
	background: #242424;
	color: white;
	width: 100%;
	margin: 0px;
	padding: 1em;
	box-sizing: border-box;
    text-align: center;
}

.footer a:link {   
    color: #2d6b9e;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    padding: 0px;
    margin: 0px;
}

/* COLOR, FONT, AND STYLE FOR DESKTOP MENU LINKS */
.footer a:hover  {   
    color: #39abd1;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    padding: 0px;
    margin: 0px;
}

/* COLOR, FONT, AND STYLE FOR DESKTOP MENU LINKS */
.footer a:active {   
    color: #2d6b9e;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    padding: 0px;
    margin: 0px;
}

/* COLOR, FONT, AND STYLE FOR DESKTOP MENU LINKS */
.footer a:visited {   
    color: #2d6b9e;
    text-decoration: none;
    	font-family: "Avenir", arial, sans-serif;
        font-weight: 100;
    padding: 0px;
    margin: 0px;
}

.footer_link_text   {
    line-height: 1em;
    padding: 0px;
    text-align: center;
}










/* LINK STYLE - PLACED ON BOTTOM OF CSS SHEET OTHERWISE
    */
a:link  {
    color: #2d6b9e;
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.5s;
    font-weight: bold;
    font-size: 1em;
}

a:active    {
    color: #39abd1;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
}

a:hover  {
    color: #39abd1;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
}

a:visited   {
    color: #2d6b9e;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
}