/* This first rule is now in the global CSS **/
/* .mobTog {
display:none;
}
*/
@media only screen and (max-width : 480px) and (orientation:portrait)  {
/* Note that I'm switching to portrait only for the launch date as landscape LHS is playing up */


/* kPAGE homepage main chunks */
.primaryhp, .secondaryhp {
    width:100% !important;
    float:initial !important;
}

#fadeCornercb {
float:initial;
}

.mobmainbanner {
    display:inline;
    width: 100%;
background-color:#272449;
}

/* clearing text not image additional*/
.mobmainbanner {
	display:block;
}
.mobmainbanner a {
    color: white;
    margin: auto 2em;
    padding: 10px 20px;
    font-size: 36px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
}
.crss h1{
text-align:center;
}
#kpagesearch input {
		width: 80% !important; /* input box only */
	}

.homeland {
    max-width:100%;
    padding:0px;
    margin:10px 0px;
}

.khero-box-z .homeland {
    width:275px !important;
    max-width: 100%;
}
.khero-box-jj .homeland {
    width: 275px !important;
    max-width: 100%;
}


#midCol .box_left, #midCol .box_right {
width: 90% !important;
margin: 0px 0px 5px 0px;
float:none;
padding:10px;
}

.newss {
    display:none;
}

.mob-container {
	display:inline;
}

/* desk desktop class for main events */
.khero-row.khero-box-jj.desk {
display:none;
}

.mob-KsectNews .knewsHero {
	margin:auto;
}

.mob-container .knewsHero h3 {
    text-align:left;
    margin: 8px auto 10px !important;
}
 .mob-container .knewsHero p {
    text-align:left;
    max-width: 200px;
    margin: 5px auto 45px;
 }

.mob-news, .mob-res {
    text-align:center;
}

.mob-news, .mob-res, .khero-box {
	padding:40px 0px;
}

/* end kpage homeapge */


/* won't scroll on mobile so hiding the video button for mobile. User can scroll down manually */
.courseOverview_content .cbb-btn {
	display:none;
}



/* fix for twocol news */
.twoCols a .imgListing {
  width: 100%;
}


/* fix for new feature template */
.feat-pan-link-img, .feat-pan-link-img img {
	margin:0px;
	padding:0px;
	width:100%;
}


.panelHenry {
width: 98%;
}




/* NOW THAT MOBILE HAS 'unslick' SET ON IT, WE HAVE TOO MANY ITEMS SO HIDING THEM USING nth of type CSS */
.mob-knewsContainer .knewsHero:nth-child(n+4) {
	display:none;
}
.mob-knewsContainerRESEARCH .knewsHero:nth-child(n+4) {
	display:none;
}

/* Style for the new mobile News items */
.knewsHero {
	text-align: center;
}

.knewsHero h3 {
    padding: initial;
    max-width: 200px;
    margin: auto;
}








/* This nulls out the huge widths that was causing issues ON THE UNSLICK HOMEPAGE */
#fadeCornercb, .kpagewidth {
	width:initial !important;
}






     /* set max-width to allow smaller images to be so if they so wish! */
     #midCol img {
        max-width:100%;
        height:auto !important; /* this sorts the awkward height issue on rescaling. CB */
     }

#midCol img.right, #midCol img.left {
	float:initial !important;
	width: 100% !important;

	padding: 0px !important;
	margin: 0px !important;
}


 .land_hero {
     width:98%; /* to do. find cause of overflow. padding maybe. CB. */

}

.land_hero h3 {
margin:auto;
}




/* BLOCKQUOTES MOBILE */
#midCol blockquote {
	padding: 50px 15px 20px 15px !important;
	padding: 5rem 1.5rem 2rem 1.5rem !important;
	margin:0px !important;
	margin:0rem !important;
        font-size:21px; !important;
        font-size:2.1rem !important;
        line-height:28px !important;
        line-height:2.8rem !important;
float:initial !important;
}
#midCol blockquote p {
	font-size:21px !important;
	font-size:2.1rem !important;
	line-height:28px !important;
	line-height:2.8rem !important;
}






/* probably need more here too for p etc */

    .mobTog {
    display:inline-block;
    font-size:20px;
    /* padding: 20px 0px; */
    margin: 20px 0px;
    /* NEED TO CHANGE CURSOR FOR ELEMENT TO TRIGGER ON ACTUAL MOBILE DEVICES. SEE http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery */
    cursor: pointer;
    }

    .homeLink {
    padding: 30px 0px 0px 0px;
    }

    #fadeCorner {
    background: none;
    float: initial !important; /* this should fix the side scroll issue */
	}

    #imgBlock, ul.topNav, #navigation {
        display:none; <!-- removes altogether. may want to think about adding in footer again -->
        
    }

    #midCol, #leftCol, #content, #pageSurround, #footer, .twoCols #midCol, #copyright, #footInfo{
        width:100%; <!-- removes fixed width -->
        background: white;
    }

    #midCol {
    padding-left: 0px;
    padding-right:0px;
    overflow:auto;
/* trial */
    overflow-y: hidden;    
    }

/* Javascript is now adding a class to midCol div on the Fulltext News template so we can target the scroll soley for these pages without breaking other CMS pages that have iframes */
.newsFull {
    overflow-y: hidden !important; /* hide vertical */
    overflow-x: hidden !important; /* hide horizontal */
}


 /*   ul.siteTools {
        width:100%;
        padding:0px;
        background: white;
    }
*/
    #header, #pageSurround, body {
        background:white;
    }

    .simpleRight, .simpleLeft {
        float:none;
        width:100%;
    }

    #header {
        height: 100% !important;    
    }

/*
    ul.siteTools {
        display:inline-block;
        height:100%;
    }
*/
    .subNav {
    display:none;
    // use jQuery to toggle this with a new shown element next to explore this section
    }

#rightCol {
width:100%;
}




    div#keyfact {
/*	width:100%; */
	width:98%;
	float:left;
    }

    .tabscontainer #tabs {
	width:100%;
    }

    .buttonapply {
	float: right;
	padding: initial;
	width: 100%;
    }

/* pushy tweaks for mobile only */
.resp-header {
display:block !important; /* overrides the inline display none that I added for testing purposes */
overflow:auto;
}
.menu-btn  {
	display:inline !important; /* overrides the inline display none that I added for testing purposes */
}

/* animate the burger! */

.resp-burger {
	    -webkit-transform: rotate(0deg);
	        -ms-transform: rotate(0deg);
	            transform: rotate(0deg);	
        -webkit-transition: .6s ease-out;	
                transition: .6s ease-out;
}
.container-push .resp-burger {	   
	   -webkit-transform: rotate(-90deg) scale(1.4);	   
	       -ms-transform: rotate(-90deg) scale(1.4);	   
	           transform: rotate(-90deg) scale(1.4);
	   background-color:#000;
	   color:white;
}

/* end animated bo-ya-ger ! */

.homeLink, .siteTools, #header {
display:none !important;
}

/* the following few lines make 1. the left pushy nav scrollable, 2. right hand content behave properly HOWEVER non-resonsive content is un-accessible */
html, body{
    overflow-x: hidden;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* The following line allows the normal page content to show when pushy moved across. (otherwise it hides it all) */
#container {
overflow:auto;
}


.pushy-open ul {
 /*  overflow-y: scroll; */
 /*   -webkit-overflow-scrolling: touch; */
}



/* New School Example templates */
.patch-panel-1 {
	width: 100% !important;
}
.patch-panel-2 {
width: 100% !important;
}

.ktest-primary {
	width: 100%;
	float: none;
	text-align:center;
}
.ktest-secondary {
	width:100%;
	float: none;
	text-align: center;
}
.ktestimonial-full-image, .ktestimonial-full-image img  {
	width:100%;
	padding:0px;
	margin:0px;
}
.crs_ovw_img, .crs_ovw_img img {
	width:100% !important;
	max-width:initial;
}

.kat-footer, .kat-foot-cont, .kpan-a, .kpan-b, .kpan-4a, .kpan-4b, .kpan-4c, .kpan-4d {
		width: 100% !important;
		text-align:center !important;
}

.kpan-a p {
	width: 80%;
	margin:auto;
}
.kpan-b .socs {
	text-align:center !important;
}

/* photo shelter template 'Gallery link' */
.phgal, .phgal-inner {
	padding:0px;
	margin:0px;
}
.phgal {
	max-width:97%;
}

/*for News template. Should not spill out but be careful*/

#midCol .curvedBL.padright {
width:100% !important;	
}
#midCol .curvedBL.padright img {
width:98% !important;
}

.yes p.caption {
	width:100% !important;
}
/* events */
.eventLrg {
	width: 100%;
}
.eventLrg img {
	width:98% !important;
}

/*staff template acad */

.staff-imga {
	width:100%;
	padding:0px !important;
	margin:0px !important;
border:none;
}
.staff-imga img {
	width:98% !important;
}

/* UGplus template */
.cbb-label:not(:last-child) {
    margin-bottom:6px;
}
.crs_ovw_img {
    display:none;
}



#footer {
	margin:auto;
}


.kfoot {
display: block;
/* display:flex;
flex-direction:column; */
width:initial;

}

.footer-col {
    margin: auto;
    overflow:auto;
    text-align:center;
    width: 100% !important;
    float:initial;
}

.footul li {
	max-width:initial;
}

.kfootMap img {
	float:initial;
}

.dg-access i, .dg-txt {
	float: initial;
	display: inline-block;
}

.affil-kfoot img, .affil-kfoot img {
	float:initial;
	padding:0px;
	margin-top:25px;
}

.kfoot h2 {
	font-size: 24px;
	line-height:28px;
	margin-top:30px;
}
.kfoot p, .kfoot a {
	font-size: 16px;
	line-height: 24px !important;
}


} /* end max-width:480px; */





#midCol .unique167836 img:first-of-type {
	-webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/* quick fix for new site AVS pool rooms */
.socialmedia-accs p {
    display: none;
}



/*  below is for the footer. rather than grunt, just adding here until the old site is decommissioned  */
.affil-kfoot a:first-of-type {
	display: none;
}

/* 2022 clean up of old template items */
.kfoot > * {
display: none;
}
ul.siteTools {
display: none;
}



.pushy-open > ul:last-child{
display: none; 
}