/*
* Genome Institute of Singapore
* Version 1.0.0
* Resposive Quries & Bugs Fixes, Copyright 2014.
*/

/* #Page Styles
================================================== */

.tablet-view, .mobile-view{
	display: none;
}
.desktop-view{
	display: block;
}

/* #Media Queries
================================================== */
/*  
 * Grid over 1200px and minimum of 1200px (1200px between 992px)
 * large desktop can be formidable. bootstrap -lg screens
 */

@media only screen and (max-width: 1200px) and (min-width: 992px){
	.desktop-view, .mobile-view{
		display: none;
	}
	.tablet-view{
		display: block;
	}
	nav#navbar ul li a{
		font-size: 18px;
	}
	.box .media-img img{
		border: 9px solid #f0f0f0;
		width: 88%;
	}
	.home-article .box-1 .media-img:before, .home-article .box-3 .media-img:after{
		left: -1177px;
	}
	.home-article .box-3 .media-img:after {
		left: auto;
		right: -1177px;
	}
	.home-article .box-4 .media-img:after{
		right: -1177px;
	}
	.home-article .box-3 .media-img:after {
		right: -93px;
	}
	.box .media-desc{
		width: 100%;
	}
	.page-article article{
		width: 66%;
	}
	.page-article .photo-wrap{
		width: 33.4%;
	}
	.page-article .page-side-photo{
		border-width: 10px;
	}
	.page-article .page-side-photo img{
		max-width: 74%;
	}
	article .glutter-join{
		width: 460px;
	}
	ul#members{
		width: 100%;
	}
	ul#members li.gap, ul#members li{
		width: 161px;
	}
	h2.big{
		font-size: 30px;
	}
	h4 {
		font-size: 21px;
	}
	.absolute-image > div:before{
		width: 510px;
	}
	.absolute-image > div:after{
		width: 417px;
	}
	.scope-out{
		background: none;
		border: 0;
		box-shadow: none;
	}
	.scope-out .scope-points{
		width: 81%;
		left: 0;
		top: 0;
		border: 1px solid rgba(199, 201, 200, 0.16);
		border-left: 0;
		border-bottom: 0;
	}
	.scope-out .scope-points ul{
		width: 77%;
	}
	.form-elem form label{
		font-size: 15px;
	}
	/* understanding page */
	h1.large{
		font-size: 63px;
	}
	.cells-container{
		width: 1132px;
	}
	.media-cell-1{
		top: 211px;
	}
	.media-cell-2{
		top: 188px;
		left: 7px;
	}
	.media-cell-3{
		top: 222px;
	}
	.media-cell-6{
		top: -29px;
	}
	.media-cell-7{
		top: -10px;
	}
	.table-responsive[data-pattern="priority-columns"]{
	    overflow-y: hidden;
	    overflow-x: auto;
	}
}	

/*  
 * Grid over 992px. tablet portrait view. bootstrap -md screens
 */
@media only screen and (max-width: 992px){
	.desktop-view, .mobile-view{
		display: none;
	}
	.tablet-view{
		display: block;
	}
	.image-center{
		text-align: center;
	}
	.image-center > img{
		display: inline-block;
	}
	nav#navbar ul li a{
		font-size: 16px;
	}
	.box .media-img img{
		border: 9px solid #f0f0f0;
		width: 88%;
	}
	.box .media-desc{
		width: 100%;
		margin-top: 23px;
	}
	.home-article .box-1 .media-img:before, .home-article .box-3 .media-img:after, .home-article .box-1 .media-img:after, .home-article .box-2 .media-img:after{
		content: none;
	}
	.page-article h1, .page-article > h1.head, .page-article h2.push-right{
		text-align: center;
		padding-left: 0;
	}
	.page-article article{
		width: 100%;
		padding-right: 15px;
	}
	.page-article article p{
		font-size: 14px;
	}
	.page-article .photo-wrap{
		width: 100%;
		top: 0;
	}
	.page-article .page-side-photo{
		width: 100%;
		height: auto;
		border: 0;
		border-radius: 0;
		text-align: center;
	}
	.page-article .page-side-photo img{
		max-width: 100%;
		display: inline-block;
		width: 35%;
		min-width: 289px;
		position: static !important;
	}
	article .glutter-join{
		width: 460px;
	}
	article .glutter-join .glutter-desc{
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	article .glutter-join .round-image{
		text-align: center;
	}
	article .glutter-join .round-image img{
		display: inline-block;
		border-radius: 0;
		border: 0;
	}
	.glutter-desc h5, .glutter-desc h4{
		text-align: center;
	}
	article .glutter-join .glutter-desc p{
		text-align: justify;
	}
	article .row{
		/*margin: 0 !important;*/
		margin-top: 13px !important;
	}
	.page-article img{
		padding: 6px;
		box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.56);
		margin: 1px;
	}
	article .round-image + .small-round-title{
		font-size: 18px;
		width: 100%;
	}
	.push-right{
		padding-left: 15px !important;
	}
	ul#members{
		width: 100%;
	}
	ul#members li.gap, ul#members li{
		width: 156px;
	}
	.ui-select{
		width: 152px;
	}
	.filter-items .filter-by a.filter, .filter-items .filter-by .ui-select, .filter-items .filter-by a.filter-submit{
		margin-bottom: 10px;
	}
	.no-shadow{
		padding: 0 !important;
		box-shadow: none !important;
	}
	.col-md-12.fl-r{
		float: none;
	}
	h2.big{
		font-size: 27px;
		padding-top: 17px;
	}
	h4 {
		font-size: 20px;
	}
	.absolute-image > div:before{
		width: 510px;
	}
	.absolute-image > div:after{
		width: 417px;
	}
	.scope-out{
		background: none;
		border: 0;
		box-shadow: none;
	}
	.scope-out .scope-points{
		left: 0;
		top: 0;
		border: 1px solid rgba(199, 201, 200, 0.16);
		border-left: 0;
		border-bottom: 0;
	}
	.scope-out, .scope-out .scope-points,.scope-out .scope-points ul {
		width: 100%;
	}
	.scope-out .scope-points ul{
		width: 100%;
	}
	.scope-out .scope-points ul#dotted-border li , .scope-out .scope-points h3{
		text-align: left;
	}
	.scope-out .scope-points ul#dotted-border li:last-child{
		border-bottom-width: 1px;
	}
	.form-elem form .input-group .col-md-6 > div{
		width: 100%;
	}
	.form-elem form .input-group .col-md-6:first-child > div{
		margin-bottom: 15px;
	}
	/* understanding page */
	.cells-container{
		width: 100%;
		height: 619px;
	}
	h1.large{
		font-size: 53px;
		top: -12px;
		left: -75px;
	}
	.media-cell{
		width: 173px;
		height: 193px;
		font-size: 20px;
	}
	.media-cell-1, .media-cell-2, .media-cell-3, .media-cell-4, .media-cell-5, .media-cell-6, .media-cell-7{
		background-size: 100%;
	}
	.media-cell-1{
		top: 188px;
		left: -5px;
	}
	.media-cell-2{
		height: 210px;
		top: 152px;
		left: 4px;
	}
	.media-cell-3{
		top: 194px;
	}
	.media-cell-4{
		top: 68px;
		left: -31px;
	}
	.media-cell-5{
		top: 140px;
	}
	.media-cell-6{
		top: 51px;
		left: -11px;
	}
	.media-cell-7{
		top: 67px;
		left: -25px;
	}
	.fellows-group .media-box{
		width: 100%;
	}
	.table-responsive[data-pattern="priority-columns"]{
	    overflow-y: hidden;
	    overflow-x: auto;
	}
	.page-article .page-side-photo{
		margin-bottom: 15px;
	}
	.page-left{
		padding-left: 0;
	}
	.media-box .media-right-desc{
		width: 100%;
		text-align: justify;
	}
	.page-article article.no-bg-tablet:before{
		content: none;
	}
	.btn-div.right{
		width: 100%;
	}
	.round-image.thick img{
		padding: 0;
		box-shadow: none;
	}
}

/*  
 * Grid over 992px and minimum of 768px (992px between 768px)
 * medium devices can be formidable. bootstrap -md screens
 */

@media only screen and (min-width: 768px) and (max-width: 992px){
	
}

/*  
 * Grid over 768px. tablet mini portrait, smartphone landscape view. bootstrap -sm screens
 */
@media only screen and (max-width: 768px){
	.desktop-view, .tablet-view{
		display: none;
	}
	.gsc-search-button.gsc-search-button-v2
	{
	display:none !important;
	}
	.mobile-view{
		display: block;
	}
	#navbar-top{
		min-height: 0;
	}
	footer ul#foo-links li{
		margin-bottom: 8px;
	}
	#addthis-banner{
		display: none !important;
	}
	.ns_nerveSlider#full-width-slider .ns_nextButton div, .ns_nerveSlider#full-width-slider .ns_prevButton div{
		background-size: 60%;
	}
	.nav-mobile #search-mob input[type="text"]:focus{
    	width: 185px;
	}
	.page-article article p, .page-article article ul li, .page-article article ol li, .page-article article span, address{
		font-size: 14px;
	}
	.page-article h1, .page-article > h1.head, .page-article h2.push-right{
		font-size: 37px;
		margin-bottom: 17px;
	}
	.page-article h2.push-right{
		font-size: 19px;
	}
	article .glutter-join {
		width: auto;
	}
	#content article p{
		padding-left: 0;
		text-align: justify;
	}
	ul#members li.gap, ul#members li{
		width: 166px;
	}
	.media-box .media-right-desc {
		width: 100%;
		text-align: justify;
	}
	.actual-right.col-sm-4{
		float: none;
		margin-bottom: 15px;
	}
	.absolute-image:after{
		bottom: -59%;
		height: 60%;
	}
	.absolute-image > div:before{
		top: 1px;
	}
	.absolute-image img{
		width: 200px;
	}
	.push-right-far{
		margin-left: 135px;
	}
	h2.big{
		font-size: 20px;
		margin-bottom: 4px;
	}
	h4 {
		font-size: 17px;
	}
	.sm-mt-10{
		margin-top: 10px;
	}
	.absolute-image:before{
		top: -14px;
	}
	.absolute-image > div:after {
		width: 280px;
		top: 93%;
		left: 69%;
	}
	.absolute-image > div:before{
		width: 367px;
	}
	.page-left{
		float: none;
		padding-left: 0;
	}
	.sm-no-gutter [class*="col-"]{
		padding-left: 0;
		padding-right: 0;
	}
	/* understanding page */
	section.no-slider{
		margin-top: 0;
	}
	h1.large{
		position: static;
		text-align: center;
		width: 100%;
		line-height: 32px;
		font-size: 37px;
	}
	.cells-container{
		background: none;
		height: auto;
	}
	.media-cell{
		position: static;
		float: left;
		margin-right: 45px;
		margin-bottom: 25px;
	}
	.cells-container .column .media-cell:last-child{
		margin-right: 0;
	}
	.media-cell-1{
		float: none;
		margin: 0 auto;
		margin-bottom: 25px;
	}
	.cells-container .column{
		text-align: center;
	}
	.cells-container .column > div{
		display: inline-block;
	}
	.image-inner{
		text-align: center;
		margin-bottom: 15px;
	}
	.image-inner img{
		display: inline-block;
	}
	.image-inner span{
		margin-top: 5px;
	}
	.page-article article:before{
		content: none;
	}
	.page-article article{
		padding-left: 15px;
	}
	/*.actual-right{
	    padding-left: 0px;
	}
	.actual-right + *[class*="col-"]{
	    padding-left: 0px;
	}*/
	.home-article .box {
		margin-bottom: 30px;
	}
	header#navbar-top {
		margin-bottom: 0px;
	}
	#mobile-nav #sub-menu ul{
		width: auto !important;
	}
	.box .media-desc{
		width: 280px;
	}
	.home-article .box-4 .media-img:after{
		content: none;
	}
	article.full-width{
    	width: 100% !important;
	}
	#platform-leaders .media-box .media-left-image{
		width: 100%;
		padding-right: 0;
		text-align: center;
	}
	#platform-leaders .media-box .media-right-desc{
		text-align: center;
	}
	.Investigators-top .xs-m-0:after{
		content: none;
	}
	ul#members.large-size li{
		width: 300px;
		margin: 0 auto;
		display: block;
		text-align: center;
		margin-bottom: 15px;
		min-height: 0 !important;
	}
	ul#members.large-size li img + h5{
		text-align: center;
	}
	ul#members.large-size li.gap{
		display: none;
	}
	.nav-mobile #search-mob{
		height: 30px;
		width: 30%;
	}
	.search-select{
	  position: absolute;
	  right: 14px;
	  top: 16px;
	  display: none
	}
	.search-select a{
		display: none;
	}
	.search-click-button {
		  background: url("../images/sprites.png") no-repeat scroll -13px -61px rgba(0, 0, 0, 0);
		  width: 18px;
		  height: 19px;
		  display: inline-block;
	}
	.gsc-search-box-tools .gsc-search-box input.gsc-input{
		height: 30px !important;
		padding-left: 8px !important;
	}
	.fellows-group .media-box{
		min-height: 0 !important;
	}
	#single-page{
		width: 100%;
	}
	#single-page article{
		padding: 0 15px;
	}
	p.push-right{
		padding-left: 0 !important;
	}
}

/*  
 * Grid over 479px. smartphone portrait view. bootstrap -xs screens
 */
@media only screen and (max-width: 479px){
	html{
		font-size: 14px;
	}
	.gsc-search-button.gsc-search-button-v2
	{
	display:none !important;
	}
	.nav-mobile .open-panel-link{
		/*font-size: 17px;*/
		padding-left: 16px;
	}
	.ns_nerveSlider#full-width-slider .ns_nextButton div, .ns_nerveSlider#full-width-slider .ns_prevButton div{
		background-size: 40%;
	}
	.nav-mobile #search-mob::after {
	  background: url("../images/sprites.png") no-repeat scroll -13px -61px rgba(0, 0, 0, 0);
	  content: "";
	  height: 19px;
	  position: absolute;
	  right: 10px;
	  top: 6px;
	  width: 18px;
	}
	.nav-mobile #search-mob{
		
		right: 0;
	}
	.nav-mobile #search-mob input[type="text"]{
		display: inline-block;
		width: 185px;
		border-radius: 0px;
	}
	.nav-mobile #search-mob .search-click-button{
		display: inline-block;
		top: -35px;
		right: 26px;
	}
	.nav-mobile #search-mob a.search-close{
		display: inline-block;
		position: absolute;
		right: 9px;
		left: auto;
		top: 5px;
	}
	.page-article h1, .page-article > h1.head, .page-article h2.push-right{
		font-size: 25px;
		margin-bottom: 17px;
		line-height: 30px;
	}
	.page-article h2.push-right{
		font-size: 16px;
	}
	.page-article article p, .page-article article ul li, .page-article article ol li, .page-article article span, address{
		font-size: 13px;
		text-align: justify;
	}
	.base-ques h2.tab{
		font-size: 18px;
	}
	.page-article article{
		padding: 0px 15px;
	}
	.page-article article:before{
		content: none;
	}
	article .glutter-join{
		width: auto;
	}
	article .round-image + .small-round-title{
		font-size: 16px;
		width: 100%;
	}
	ul#members{
		width: 100%;
		text-align: center;
	}
	ul#members li.gap, ul#members li{
		width: 100%;
		display: inline-block;
	}
	.media-box .media-left-image{
		width: 100%;
		padding-right: 0;
		text-align: center;
	}
	.media-box .media-right-desc {
		width: 100%;
	}
	.media-box .media-right-desc h5 {
		margin-top: 10px;
	}
	.filter-by{
		text-align: center;
	}
	.filter-by > *{
		float: none !important;
		width: 180px !important;
		margin: 8px auto !important;
		margin-bottom: 0 !important;
		display: block;
		min-width: 0;
	}
	.filter-by .ui-btn-icon-right:after{
		right: 0;
	}
	.ui-select select{
		min-width: 0;
	}
	.center-mobile{
		text-align: center;
	}
	a.center-mobile{
		display: block;
	}
	.center-mobile > *{
		display: inline-block;
	}
	.absolute-image{
		position: static;
	}
	.absolute-image:before, .absolute-image:after, .absolute-image > div:after, .absolute-image > div:before{
		content: none;
	}
	.absolute-image .round-image img{
		padding: 6px !important;
		box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.56) !important;
		margin: 1px;
		border: 0 !important;
		border-radius: 0;
	}
	.xs-m-0{
		margin: 0;
	}
	h2.big{
		padding-top: 0;
	}
	.push-right-far {
		margin-left: 0;
		text-align: center;
	}
	.media-link.mail .txt-below{
		padding-left: 0 !important;
		text-align: center !important;
	}
	.push-right-far .txt-wrap {
		margin-top: 0;
	}
	.xs-no-gutter [class*="col-"]{
		padding-left: 0;
		padding-right: 0;
	}
	.ui-select .ui-btn>span:not(.ui-li-count){
		font-size: 12px;
	}
	.small-filter .filter-label > span{
		display: none;
	}
	/* understanding page */
	.media-cell{
		margin-right: 0;
		float: left;
		clear: both;
		margin-bottom: 25px;
	}
	.media-box.stretched .media-right-desc p{
		font-size: 13px;
	}
	.media-link #txt-below{
		margin: 5px 0;
	}
	.media-link .cvtxt-below{
		margin: 0;
	}
	.Investigators-top{
		padding-bottom: 0;
	}
	.search-select{
		display: block;
	}
	.nav-mobile #search-mob{
		width: 45%;
		right: -26px;
		top: 52px;
	}
	.gsc-search-box-tools .gsc-search-box .gsc-input{
		padding-right: 0 !important;
	}
	td.gsib_b{
		display: none;
	}
	.nav-mobile #search-mob input[type="text"]{
		box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.66) inset;
		font-size: 14px;
		padding-left: 4px !important;
	}
	.nav-mobile #search-mob {
  		width: 35%;
  		right: 13px;
  		top: 43px;
  		opacity: 0;
  		-webkit-transition: .3s;
  		-o-transition: .3s;
  		-moz-transition: .3s;
  		-ms-transition: .3s;
  		transition: .3s;
	}
	.nav-mobile #search-mob form{
		opacity: 1;
		top: 0;
	}
	td.gsc-search-button{
		display: none;
	}
	.nav-mobile #search-mob:after{
		content: none;
	}
	.nav-mobile #search-mob.show{
		top: 54px;
		opacity: 1;
	}
}

/* semi circle 1024px best view */
@media only screen and (max-width: 1024px) and (min-width: 992px){
	.page-article .photo-wrap {
		width: 35.4%;
	}
	.page-article article {
		width: 64%;
	}
	.page-article .page-side-photo{
		width: 498px;
		height: 498px;
	}
	.page-article .page-side-photo img{
		max-width: 100%;
		width: 350px;
	}
}