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

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







/* ========================= 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: #242424;
	min-width: 1200px;
    font-family: "Avenir", arial, sans-serif;
    font-weight: 100;
}

/* HR STYLE */
hr { 
  display: block;
  border-color: #d9d8d6;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}




/* 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;
    padding: 1em 0px 1em 0px;
    margin: 0px;
    text-decoration: 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;
}














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

/* DARK GRAY MENU STRIP THAT HOLDS DESKTOP MENU ITEMS */
.menu_strip_links {
    background: #242424;
    width: 100%;
    display: flex;
    align-items: baseline; 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

/* STYLE FOR MY GRENFELL TEXT IN DESKTOP MENU */
.menu_strip_links h3    {
    padding: 1.5em 0px 1.5em 0px;
    margin: 0px;
}

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

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

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

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

/* MYGRENFELL MENU-DROP TEXT STYLE */
.drop_font    {
    cursor: pointer; 
    color: white; 
    text-decoration: none; 
    font-family: 'Avenir', arial, sans-serif;
    font-weight: 100;
    font-size: 1em;
    box-sizing: border-box;
}


/* THE GRENFELL LOGO */
.logo	{
	width: 12em; 
	height: auto; 
	padding: 1.5em;
    margin: 0px;
}

/* CONTAINER FOR DESKTOP SOCIAL MEDIA BUTTONS */
.social_btn_container	{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
	text-align: right;
	width: 50%;
	height: auto;
    padding: 0px;
}

/* PICTURE STYLES FOR DESKTOP SOCIAL MEDIA BUTTONS */
.social_btn_container img	{
	width: 1.4em;
	height: auto;
	padding: 1.5em 1.5em 1.5em 0px;
}





/* MY GRENFELL LOGIN MENU */
.login_menu	{
	display: flex;
	justify-content: center;
	padding: 1.5em;
	margin: 0px;
	box-sizing: border-box;
}

/* PARAGRAPH STYLES FOR MENU ITEMS */
.login_menu p   {
    font-family: "Avenir", arial, sans-serif;
    font-weight: 100;
    padding: 0px 0px 1.5em 0px;
    margin: 0px;
    font-size: 0.9em;
    color: white;
}

/* LINK STYLES FOR SUB-MENU ITEMS */
.login_menu a:link  {
    font-weight: 100;
    color: white;
    text-decoration: none;
}

/* LINK STYLES FOR SUB-MENU ITEMS */
.login_menu a:hover   {
    font-weight: 100;
    color: white;
    text-decoration: none;
}

/* LINK STYLES FOR SUB-MENU ITEMS */
.login_menu a:active {
    font-weight: 100;
    color: white;
    text-decoration: none;
}

/* LINK STYLES FOR SUB-MENU ITEMS */
.login_menu a:visited   {
    font-family: "Avenir", arial, sans-serif;
    font-weight: 100;
    color: white;
    text-decoration: none;
}

/* LOGIN MENU CONTAINER */
.login_menu_container	{
	display: none;
	justify-content: center;
	padding: 1.5em;
	margin: 0px;
	box-sizing: border-box;
}

/* MY GRENFELL LOGIN MENU */
.login_menu_drop	{
	display: none;
	justify-content: center;
	padding: 1.5em;
	margin: 0px;
	box-sizing: border-box;
}

.future_students_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}

.current_students_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}

.academics_and_research_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}

.departments_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}

.campus_services_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}

.login_menu_drop	{
	display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 3;
}















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

/* HOMEPAGE BANNER CONTAINER - CLIPPED TO SHOW ANIMATION ZOOMING OUT */
.bg_container	{
	width: 100%;
    height: 500px;
	margin: 0px;
	padding: 0px;
	position: relative;
    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;
}




















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


/*  CONTENT PANELS and COLUMNS */
/* CONTAINER FOR 4 COLUMNS */
.panel	{
	width: 100%;
	padding: 0px;
	margin: 0px;
	display: flex;
	align-items: flex-start;
	color: #242424;
	justify-content: center;
}

/* CONTAINER FOR 3 COLUMNS */
.panel_2	{
	width: 75%;
	padding: 0px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	color: #242424;
	justify-content: center;
}

/* CONTAINER FOR 3 COLUMNS */
.panel_4	{
	width: 75%;
	padding: 0px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	color: #242424;
	justify-content: center;
}


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



/* SPANS 1 COLUMN */
.column	{
	width: 25%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}

/* MAKE IMAGES ON MAIN PAGE FADE WHEN HOVERED OVER */

.column img {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
}

.column img:hover   {
    opacity: 0.5;
    transition-property: opacity;
    transition-duration: 0.5s;
}




/* SPANS 2 COLUMNS */
.column2	{
	width: 50%;
	padding: 1.5em 1.5em 0px 1.5em;
	margin: 0px;
	box-sizing: border-box;
}

/* SPANS 3 COLUMNS */
.column3	{
	width: 75%;
	padding: 1.5em 1.5em 0px 1.5em;
	margin: 0px;
	box-sizing: border-box;
}

/* SPANS 4 COLUMNS */
.column4	{
	width: 100%;
	padding: 1em;
	margin: 0px;
	box-sizing: border-box;
}

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


/* TITLE TEXT FOR COLUMNS */
.home_title_column  {
    width: 100%;
    overflow: hidden;
    height: 5em;
	padding: 1.5em 0em 0em 0em;
	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;
    transition-property: background;
    transition-duration: 0.5s;
    border-radius: 15px; 
    color: white; 
    padding: 0px; 
    margin: 0px 0px 1.5em 0px;
}

.apply_btn:hover  {
    background: #39abd1;
    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;
	display: flex;
}

.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;
}


















/* MEDIA QUERIES BELOW SERVE DIFFERENT STYLES FOR DIFFERENT RESOLUTIONS SO THAT THE
HOMEPAGE ANIMATION WORKS PROPERLY */
/* 8K */
@media only screen and (max-width: 8000px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 1400px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
}

/* 5K */
@media only screen and (max-width: 5120px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 1600px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
}

/* 4K */
@media only screen and (max-width: 3850px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 1300px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
}

@media only screen and (max-width: 3500px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 1100px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */

/* 1440p */
@media only screen and (max-width: 2560px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 900px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
}

@media only screen and (max-width: 2360px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 720px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */
    


/* 1080p */
@media only screen and (max-width: 1920px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 775px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
}

@media only screen and (max-width: 1800px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 600px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */


/* THIS IS THE ONE THAT APPLIES TO MY MACBOOK */
/* BREAKPOINT 1600px */
@media only screen and (max-width: 1600px) {
.panel_2	{
	width: 100%;
    height: 500px;
	padding: 0px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	color: #242424;
	justify-content: center;
}/* END PANEL2 */
    
    .column	{
    color: #7f7e81;
	width: 33.3%;
	padding: 1.5em 1.5em 0px 1.5em;
	margin: 0px;
	box-sizing: border-box;
	transition-property: filter;
	transition-duration: 0.5s;
}/* END COLUMN */
    
    .highlight_title	{
	padding: 0px 1.5em 0px 1.5em;
	box-sizing: border-box;
	font-size: 1em;
	color: #7f7e81;
	text-align: left;
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
}/* END COLUMN */

    .menu_container h3  {
        font-size: 0.9em;
    }

    .bg_container	{
	width: 100%;
    height: 520px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
    
}/* END BREAKPOINT 1600px */

/* 4k 300% Scaled */
@media only screen and (max-width: 1400px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 450px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */    

@media only screen and (max-width: 1200px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 450px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */

@media only screen and (max-width: 1000px)    {
    /* =========================================== THE CONTAINER FOR THE MAIN BACKGROUND ON HOMEPAGE - HOLDS 4 ANIMATED PARTS OF PIC ================================= */
.bg_container	{
	width: 100%;
    height: 400px;
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
} /* END MEDIA QUERY */
   
/* 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;
    text-decoration: none;
}

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

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

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