/*////////////////////////////////////////////////////////////////////////////////
Common
////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////
Responsive View
////////////////////////////////////////////////////////////////////////////////*/
.view-normal{ display: none;}
.view-large{ display: block;}
.view-mobile{display: none;}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Responsive Styles Large Desktop And Above
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media all and (min-width: 1600px) {
	
	.portfolio-info{ min-height: 210px;}
	
/*///////////Homepage slider side title//////////////////*/	
	.view-normal{ display: none;}
	.view-large{ display: block;}
	.view-large img{width:100%; height: auto;}
	.view-mobile{display: none;}
}
 
@media all and (min-width: 1500px) {
.home-cover-section .container-fluid{ max-width: 80% !important;}
.what-on-section .container-fluid{ max-width: 80% !important;}
	

}

@media all and (max-width: 1600px) {
	.portfolio-info{ min-height: 240px;}
}


@media all and (max-width: 1499px) {
	.view-normal{ display: block !important;}
	.view-large{ display: none !important;}
	.view-mobile{display: none !important;}
}





@media all and (max-width: 1199px) {
	
/*///////////what's on///////////////
.block-event .figure .caption, .block-event .caption,
.block-event figure figcaption{ min-height: 180px !important;}////*/	
		.portfolio-info{ min-height: 220px !important;}

	.footer-logo-nus a{  margin-right: -0 !important;}

}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Code for desktop
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 991px) { 

	/*///////////Related Project//////////////////*/	
	.related-projects .col-12 .portfolio-grid{ margin-left: 0 !important; margin-right: 0 !important;}
	
}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 Desktops, 991px and below
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 991px) { 
	
	section{ padding: 40px 0 !important;}
	
/*///////////Header//////////////////*/
	.accordion-menu{ padding: 15px 35px 15px 35px !important;}
	.header-icon-eye{ left: 44%;}
	.logo-container{width:340px;}	
	.header-icon-eye{ width:80px; left: 44%; }
	
	.navbar { max-height: auto !important; min-height: auto !important;}
	.eye-side{ display: none !important;}
	

	
/*///////////Responsive Nav//////////////////*/
	#accordion{ padding-top: 0 !important; margin-right: 0 !important;}
	#accordion li{ padding: 0 !important; margin: 0 !important;}	
	#accordion li > a { padding: 10px !important;}
	

	#accordion li.dropdown .dropdown-menu{ 
		background-color: #112764 !important;
		padding: 0 !important; margin: 0 !important;
	}
	
	#accordion li.dropdown .dropdown-menu li{ 
		background-color: #112764 !important;
		padding: 0 !important; margin: 0 !important;
	}
	
	#accordion li.dropdown .dropdown-menu li a { padding: 10px 40px 10px 40px !important;}
	#accordion li.dropdown .dropdown-menu li a:hover{ background-color: #000 !important;}
	
	
	
/*///////////Homepage slider side title//////////////////*/	
	.view-normal{ display: none;}
	.view-large{ display: none;}
	.view-mobile{display: block;}	
	.view-mobile img{width:100%; height: auto;}

	
/*///////////Responsive Nav//////////////////*/
	.navbar-collapse{ margin-top: 0 !important}
	.navbar-nav li {padding:  6px 20px 3px 20px !important;}
	.navbar-nav li a{ font-size: 15px !important; }
	.navbar-nav li{ background-color: #0c1b49 !important;}
	.navbar-nav li:hover{ background-color: #00a8e7 !important; color:#fff !important;}
	
/*///////////Home//////////////////*/	
.title-ways-of-seeing{ padding-top: 40px;}

	
	/*///////////what's on/////////////
	.block-event .figure .caption,	.block-event .caption,
	.block-event figure figcaption{ min-height: 170px !important;}/////*/	
	
	.portfolio-info{ min-height: 160px !important;}
	
	.related-projects .col-12 { padding-left: 5px !important; padding-right: 5px !important;}

	
/*///////////Inner page Header//////////////////*/	
		#inner-page-header{
			background: #E2071B url("../img/header-ways-of-seeing-991.png") no-repeat 50% 90% !important;
			height: 250px;
		}
	
	.eye-side{  top:39px !important;}
	.header-date{padding-top: 95px;}

	.profile-img h4{ padding-top: 0 !important;}

	
	.instagram-post { padding-left: 0 !important; padding-right: 0 !important;}

	
	
/*///////////Footer//////////////////*/	
	.footer-copyright{ text-align: center !important;}
	.cross-hand{background-size: 300%;}
	.social-icon a img{ width: 32px; height: auto; margin-left: 6px; }

}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 767px) {  
	
	/*///////////Home//////////////////*/	
	#home-slider .rsOverflow .rsContainer .rsSlide  a img{ padding-bottom: 130px !important;}
	.slider-info h1{ padding-bottom: 0 !important;}
	.rsDefault .rsArrowIcn{top:45% !important;}	
	
	/*///////////what's on//////////////////*/	
	.portfolio-info{ min-height: auto !important;}

	.content-section .container{ 
		padding-left: 30px !important; padding-right: 30px !important;
		max-width: 100% !important; min-width: 100% !important;
	}
	
	.back-to-home{ display: block; padding-bottom: 145px;}
	
	.side-genres img{width: 25px !important; left:5px !important;}

	
/*///////////Font Size//////////////////*/	
	.slider-info h2{ font-size: 20px; }
	.slider-info h1{font-size: 24px !important; margin-top: 0; padding-bottom: 5px; }
	h1.page-title, h1.page-title-nospace{ font-size: 32px !important; }


/*///////////Header//////////////////*/	
	.top-link-tickets{width: 100% !important; border-radius: 0; text-align: left; margin: 0 !important; }
	.logo-container{ top:42px;}
	.accordion-menu{ padding: 30px 20px  !important;}
	
	.header-icon-eye{ width:80px; right: 70px !important; left:auto;  top:55px; }
	
/*///////////Home//////////////////*/	
	.slider-info{ padding: 15px 20px 15px 70px;}
	.slider-info-box {min-width: 100% !important; }
	.slider-info{margin-bottom: 0; border-bottom-right-radius: 0; border-top-right-radius: 0;}
	
	.slider-info{background-size: 40px auto !important;}

	.info-festival-diary{ max-width: 85% !important;}

	
/*///////////Inner page Header//////////////////*/	
		#inner-page-header{
			background: #E2071B url("../img/header-ways-of-seeing-767.png") no-repeat 50% 90% !important;
			height: 250px;
		}
	
	.eye-side{  display: none !important;}
	.header-date{padding-top: 100px;}
		
/*///////////Footer//////////////////*/		
	.footer-logo-nus-centre{ text-align: center;}
	.footer-logo-nus{ text-align: center;}
	.cross-hand{background-size: 600%;}
	
	.partner-logo{ text-align: center;  }
	.partner-logo-jcci { padding-bottom: 60px; display: block; }
	.partner-logo img{ width: 210px; height: auto;}
	
	.social-icons{ text-align: center; padding-top: 0;}
	
	.title-desktop{color:#F6F6F6;}
	.title-mobile{color:#1B0A40;}
	
	.footer-logo{ min-height: 50px;  display: block;  text-align: center;}
	
	.partner-donors-title-mobile{ display: block !important;}
	.partner-donors-title-desktop{ display: none !important;}
	.blank-p{ display: none !important;}
	
	
	/*///////////Footer New//////////////////*/		
	.footer-title{ text-align: center !important;}
	.footer-title{ width: 100% !important; padding: 0 0 20px 0 !important; display: block !important;}
	.logos-group{ display: flex !important; justify-content: center !important; padding-bottom: 20px !important;}
	
	.footer-logo1 img{width:230px; height: auto; float: left; padding: 0 20px 20px 20px;}
	.footer-logo2 img{width:220px; height: auto; float: left; padding: 0 20px 20px 20px;}
	.footer-logo3 img{width:170px; height: auto; float: left; padding: 0 20px 20px 20px;}
	
	
}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 768px) and (max-width: 1024px) {

/*////////////////Slide size/////////////////////////////*/
	.slider-size{ height: 500px !important;}
	
/*////////////////Slide box hand side/////////////////////////////*/
	.cross-hand{background-size: 400%;}
	
/*////////////////Inner page header/////////////////////////////*/	
		.eye-side img{width:22px !important; }
	#inner-page-header{
			background: #E2071B url("../img/header-ways-of-seeing-767.png") no-repeat 50% 90% !important;
			height: 220px;
		}
	
	.header-date{padding-top: 72px;}
  
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 
	/*////////////////Inner page header/////////////////////////////*/	
	.eye-side img{width:25px !important; }
	#inner-page-header{
			background: #E2071B url("../img/header-ways-of-seeing-767.png") no-repeat 50% 90% !important;
			height: 250px;
		}
	
	.header-date{padding-top: 97px;}

}


@media (max-width: 575px) {  
	/*////////////////Footer/////////////////////////////*/		
	.footer-logo-nus{ text-align: center !important; margin: 0 auto 20px auto !important;}
	.footer-logo-nus115{ text-align: center !important;  margin:  0 auto 20px auto !important;}
	

	
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 481px) and (max-width: 767px) {


}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 320px) and (max-width: 480px) {
 	
/*///////////Header//////////////////*/	 
	.btn-tickets:before, .btn-guide:before{ width: 22px !important; height: 20px !important;}
	.txt-link{ font-size: 13px !important;}	
	
	.logo-container{ top:52px !important;}
	.navbar{ padding-top: 10px !important; padding-botom: 10px !important;}
	.header-icon-eye{ display: none !important;}
	
	h1, .slider-info h1{font-size: 22px !important; margin-top: 0; padding-bottom: 5px; line-height: 130% !important; }
	h2, .slider-info h2{ font-size: 20px !important; }
	h3{ font-size: 18px !important;}
	
	/*///////////Content side spacing//////////////////*/	
	/*/////////.content-area{ padding-left: 30px !important; padding-right: 30px !important;}
	.content-area .row{ width: 100% !important; margin: 0 auto !important;}////////*/	
	
	/*///////////Home//////////////////*/	
	.slider-info  p { padding-bottom: 2px !important; line-height: 130% !important;;}
	
	
	/*///////////Inner page Header//////////////////*/	
		#inner-page-header{
			background: #E2071B url("../img/header-ways-of-seeing-mobile.png") no-repeat 50% 90%;
		}

}