/* FOR TESTING ONLY TJW tweaks */

@media (max-width:768px){
	/* to manage location of follow us items when stacking for xs phones */	
	.followUs { clear: both; overflow: hidden; text-align: left; padding: 0; margin: 0 0 20px; }

	/*to make line height lower so follow us items dont get pushed off footer was 52px at this size */
	#clousure {line-height: 24px;}
	#footer #clousure .container{line-height: 24px;}
	
	/* to make email address text show properly - check why this set to 65% with DOm see mq.css where this is set to 65% */
	#footer .newsletter input{width:70%;}
	#footer .newsletter button{width:70%;}
	
	/* to make GTR logo in header clickable when it is behind hidden collapsed navbar - bring it to the front */
	#logo {z-index:9999; position:relative;}
}

/*TJW workaround for navbar to collapse at our arbitrary 800px
	see https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
*/
/*TJW MSTS-74 */
/* wierd it collapses at 767 but not at 768 so need below */


@media (max-width: 768px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
	.navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    } 
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 10px;
    }
    .navbar-nav>li {
        float: none;
    }

    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    } 
    /* video slider arrow images only show when => 768 */
    .videos-slider .owl-prev, .videos-slider .owl-next {display:none !important;} 
    
    /* to get background behind signin and subscribe grey */
    #navbar-1{ background-color:#eceded; margin-top:5px; padding:5px;padding-top:0px;}
    .navbar-right {margin-top: 0px;background-color:#ECEDED;padding-bottom:5px;}
    nav.navbar ul.nav ul.sub-menu .container{width:inherit;} /* to make submenu sit inside dropdown */
    
}
/* NAVBAR  not collapsed */
/* was 58px in style.css simply overriding so we can see that sign up is on the submenu. 
	we should make this work better - ?hide signup item if we want to keep submenu at 58px depth?
*/
nav.navbar ul.nav ul.sub-menu{height:auto;} 

/* pagination on news page in correct place see style2.css */
.pagination{width: 100%;}

/* TJW  to get search to appear between 768 and 800 px - currently not there this fix works below as overrides value set in flex.sccs line 19 
	BUT could have wider implication ?  */
/*TJW MSTS-74 */
/* commented out  as should work with defaults now  - it doesnt put back in */
@media (max-width: 768px) {

		.visible-xs.rightmenu {display:block !important; }
 
}


/* OTHER NEWS */
/*TJW pad other news so all look the same height */

.equalheadlines {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
/* IOS FIX : the above fix causes the grid to break in iOs eg safari due to the :after :before (Added by flex) and the clearfix element */
/* the following fixes it (hours and hours later!) */
.row.equalheadlines:before, .row.equalheadlines:after , 
.row.headlines:before, .row.headlines:after,
.container.contheadlines:before, .container.contheadlines:after {
  display: none;
  width:0px;
}
.equalheadlines .clearfix.visible-md-block
{
	width:0px;
}
.equalheadlines .clearfix.visible-sm-block
{
	width:0px;
}
/* end of headlines fix for IOS*/

.tjwheadlines {
	margin :0px;
	padding :10px;
	background-color:#f4f0ef;
	background-clip:content-box;
}

/* Fix position of the seemore link for other news */
.seemorepos a.see-more{
	position:absolute;
	bottom:20px;
	right:30px;
}
/* END OTHER NEWS */

/* fix the position of the seemore link for postList  this set orig in style.css to absolute then overrideen for diff screens. it should work as absolute */
a.tjw-see-more{
	position:absolute;
	bottom:-10px;
	right:10px; 
}

.postList a.see-more{
	position:absolute;
	bottom:-10px;
	right:10px; 
}

/* VIDEOSLIDER */
/* full width */
/*TEST */
.container-fluid.videoslider {
/*	padding-right:0px;
	padding-left:0px; 
	margin-right:0px;
	margin-left:0px;	*/
	background-color:#d3cfce;
	margin-top:30px;
	margin-bottom:30px;
	padding-top:20px;
}

.container-fluid.videoslider h2 {
	margin-top:10px;
	margin-bottom:10px;
	padding-top:0px;
	padding-bottom:0px; 
}

/**/
/*.row.video-slider {
	margin-left:-10px; // makes owl-item bigger by 10px :best not !! 
}*/
/* TEST 
.container-fluid.videoslider row, col-sm-12 {
	padding-top:0px;
	padding-bottom:0px; 
	margin-top:0px;
	margin-bottom:0px;
}
*/
/* TEST
.container-fluid.videoslider h2 {
	margin-top:10px;
	margin-bottom:10px;
	padding-top:0px;
	padding-bottom:0px; 
}
*/

.row.video-slider{background-color:#d3cfce;padding-top: 0px; padding-bottom: 10px;margin-top: 10px; margin-right:0px;}
/*.row.video-slider .col-sm-12 {height:400px;}
.row.video-slider .col-sm-12 {height:auto;}
*/

.videos-slider.owl-carousel{height:inherit;} /* TJW try with auto rather than setting height individually eg mq.css : 500  hoping this affects owl-stage-outer */
.videos-slider.owl-carousel .owl-stage-outer{height:360px;} /* needs to be set to show full a.title text at height of 80px */ /* may need to set for each size */
/*.videos-slider.owl-carousel .owl-stage-outer{height:270px;}*/
.videos-slider.owl-carousel .owl-stage{height:inherit; margin-left:0px}

.owl-carousel.videos-slider .owl-item img{
	/* width:auto; /* TJW TEST  was 228 this affects size of img-responsive.wp-post-image size */
	/*/width:auto; */
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px
}
/* .videos-slider a.title{color: #444; margin: 10px 0 0px 0; float: left; width: 80%;font-size: 14px;} /* width % is the % of owl-item  */
.owl-carousel.videos-slider.owl-item {
	/*margin-left:10px;
	margin-right:10px; */
}
 /* restrict height of the owl item so that the contents of the a element do not make thw owl-item bigger than its owl-item-outer */
/* it would be better if this not hard set, this is about 4 lines assuming they will not have title much bigger than this ?*/
.videos-slider .owl-item content a{
	height:80px;  /* can also be controlled by height of owl-stage-outer */	
	 overflow:hidden; 
}
.videos-slider a.title{color: #444; margin: 10px 0 0px 0; float: left; width: 100%;font-size: 14px;}


/* TJWVIDEOSLIDER using defaults where possible to allow carousel to work responsively */
.tjwslider .latest{position:absolute;top:0;left:0;background: #F3AB35;text-transform:uppercase;font-size:15px;padding: 10px 24px;color:white;}
.tjwslider a.title{color: #444; margin: 10px 0 0px 0; float: left; width: 100%;font-size: 14px;}
.tjwslider .owl-item content a{
	height:80px;  /* can also be controlled by height of owl-stage-outer */	
	overflow:hidden; 
}
/* END VIDEOSLIDER */

/* MAGAZZINE SLIDER */
@media (max-width: 991px) {
	.featMag{display:none;}
}

/* we get a faint line above video slider in px2 due to line on last ads appearing  tjw coloring red here to make obvious what is going on 
#tjwhr {
	border-color: red;

}
*/
/* and also make it disappear when we have no ads, we may want to override bootstrp visible-sm to work at 768 if we do not want ads on ipad portrait or change class and remove visible-sm from functions.php */

@media (max-width: 991px) {
#tjwhr {display:none;}
}

/* LATEST NEWS */
/* TJW setting so takes up whole of the container space so equal widths  for news, magazine stories, features and gtr + etc
*/
.postList {width:100%}

/* TJW getting latest news size so do not stack but show horizontal - taken from mq.css and maybe put back in there see 1430 px media THINK THIS CAN GO IFI GET GRID WORKING! */
@media (max-width: 1200px) {

	/* TJW .postList article .content{
		/* TJW width:198px; 
		padding: 0px;
		margin-left: 10px;
	} 
	*/
	
/* 	 TJW might want to set this size per media  rather than use default set in style.css for all of these .postList article figure img {
		width: 158px;
		height: 115px;
	} */
	
	.postList figure {
		margin-right:0;
		width: 100%; 
		/* height: 154px;  /*****/
		background-repeat: no-repeat; 
		background-size: cover;
	} 
/* 	.postList article figure img{width:100%;height:154px;} */
	
	.postList figure a{width:100%;}
	
	/*#tjwhr {max-width:300px;}*/
	
}
/*@media (min-width: 1199px) {
	#tjwhr {width:100%;}	
}*/

/* TJW style.css and mq.css override grid width to 100% which totally screws up the responsive bootstrap code see */
/*.tjwcols .col-sm-4, .tjwcols .col-md-12,
{width:auto !important;}
body.home .col-sm-4{width:auto !important;} doesnt work */
/* .header-ad{height: 174px;} */
.header-ad{
	padding-top: 5px;
	float:right; /* DJ - changed to left to try and central align it. */
}

/*@media screen and (max-width: 992px){
/*  #header{height: 142px;} /* TJW important ? but if i take it out then bootstrap handles  need to set header-ad to same height. */
/*.head #logo{width:270px;}
.head #logo img{width:100%;} */
/* .header-ad{height: 142px;} */
/*.header-ad{padding-top: 40px;}
}
*/

@media screen and (max-width: 768px){
#header{height: 50px;} /* TJW important */
.head #logo{width: 96px; height: 50px;} 
.head #logo img{height:50px;}
.head #logo{margin-left: 40px;}

.postList.supplementstory .row{min-height: 101px;} /* added for GS-356 */
.postList.magazinestory .row{min-height: 121px;}

}

/* below was in style.css and mq.css for only some sizes - we need this for all to make sure image fills bootstrap cols */
/*news page*/
.post-listing article figure img { width: 100%; height: auto; }
.post-listing article figure{width:100%;}
/*HERE */
/* home page */
/* NO NO .postList article figure img { width: 100%; height: 315px; }
.postList article figure{width:100%;}
*/
/*	.postList article figure img{width:100%;height:154px;} */

.postList article figure img{width: 158px;height: 115px;} /* TJW all screen sizes */

/* get all postListings to align to left */ /* see 769 px makes other news disappear and stylec.css line131 */
.postList.post .col-md-12 {padding-left:0px;} /* TJW NB this affects all sizes of others eg col-lg-6 if on same element will get this style */
.postList.supplementstory .col-md-12 {padding-left:0px;}
.postList.magazinestory .col-md-12 {padding-left:0px;}
.postList.upcoming-events .col-md-12 {padding-left:0px;}
.postList.upcoming-events .col-lg-12 {padding-left:0px;}

.postList.post .row{min-height: 130px;}	 /* for 1200px layout but check all others , this may be ok ? */
/* GS-356 .postList.supplementstory .row{min-height: 170px;} 
.postList.magazinestory .row{min-height: 170px;} reduce this a bit to prevent vertical gapping and add new rule for < 768 media */
.postList.upcoming .row{min-height: 130px;}	 /* GS-369 to be consistent with above for 1200px layout but check all others , this may be ok ? */ 
.postList.supplementstory .row{min-height: 130px;} 
.postList.magazinestory .row{min-height: 130px;}

.postSection .row{margin-left:-15px; margin-right:-15px;} /* MSTS74- this is the default bootstrap settings - we set differnt in style.css which i dont like */
.bsrow.row{margin-left:-15px; margin-right:-15px;} /* MSTS74- this is the default bootstrap settings - we set differnt in style.css which i dont like */

/* should apply to all sizes : removed from style.css : */
.whitelistLoggedIn {font-weight: 700; text-align: right; }
#header .whitelistLoggedIn { font-size: 12px; margin-top: 5px; background: none; margin-bottom: 5px; }

/* trying to get layout at 1200 and above ok */
/* testing setting upcoming events logo to standard size in all cases */

.upcoming-events a.featured-holder{
	height:115px;
	width:158px;
}
/* TJW below poss only for 1200 size when content to side of image*/
@media (min-width: 1200px){
.postList.supplementstory .content {padding-left:15px;}
.postList.magazinestory .content {padding-left:15px;}
}

@media (min-width: 1400px){
.container {
    width: 1370px;
    max-width:1370px;
}
}

/* FLG HOMEPAGE GAPPING when losing image on small devices */
@media screen and (max-width: 768px){
.postList.post .row{min-height: auto;}	
.postList.supplementstory .row{min-height: auto;} /* added for GS-356 */
.postList.magazinestory .row{min-height: auto;}

}



/* PUBLICATION PAGE START */
/* to make background span full width */
.container-fluid.other-issues{padding-right: 0px;padding-left:0px;}
.row.other-issues{margin-right: 0px;}

/* added as now using md not sm inside the box  seee style.css l 1301 may not all be needed ? */

.publications .col-md-5 .box{float: left; width: 100%; background: #d3cfce; padding:40px;}
.publications-sub .col-md-5 .box{background:none;}
.publications .col-md-5 .box .col-md-5{padding-left:0;}
.publications .col-md-5 .box figure img{width:100%;height:auto;}
.publications .col-sm-5 .box .col-md-7{padding-left:30px;min-height:266px;}
.publications .col-sm-5 .box .col-md-7 button{padding: 12px 45px;position: absolute; bottom: 0; left: 25px;font-size: 14px;}
.publications .col-sm-5 .box .col-md-7 button small{position: absolute; color: #444; right: -80px; bottom: 14px; font-size: 12px;}
@media screen and (max-width: 991px){
	.publications .col-sm-5 .box .col-md-7 {margin-top:30px}	
}
/* publication page end */

/*singlemagazinestory */
.addthis_toolbox {
    	margin-top: 0px;
	}
	
.single-magazine .cat a{		
		margin-left: 0px;
	}

@media screen and (max-width: 767px){
.single-magazine .cat{
	padding-bottom: 50px;
}

.gtr-plus .cat{
	padding-bottom: 50px;
}

}

/* PAGE EVENT SPECIFIC */

.event-listing .upcoming-events .eventInfo{width:100%;padding:14px 20px 20px 20px;}
/*.event-listing .eventInfo {height: auto; } */
#partner-event.eventInfo {height: auto; }
.event-listing .upcoming-events a.featured-holder{width:100%;height:auto;}
.event-listing .partner-events.upcoming-events .col-sm-6{border-style: solid; border-color: white; border-width: 10px;}

/* homepage margin on upcoming events */
@media screen and (min-width: 1500px){
#events .content{padding-left:0px;}
}

/* page-events.php to make white background cover the text */
@media screen and (min-width: 1500px){
.recommended-stories article{height:360px;}
}

@media screen and (max-width: 991px) and (min-width: 635px){
.recommended-stories article{height:320px;}
}
/*@media screen and (max-width: 767px) and (min-width: 635px){
.recommended-stories article{height:335px;}
}*/
@media screen and (max-width: 420px) {
.recommended-stories article{height:335px;}
}