@charset "utf-8";
@media screen and (max-width: 1599.98px) {
  .hasLeftNav #mainContent{ padding-left: 60px; }
	#insideVisualImg img{ left:50%; transform:translateX(-50%);}
}
@media screen and (max-width: 1399.98px) {
	#secTitleWrap{ width: 360px;}
  #mainNav>ul>li>a{ padding: 0 5px; }
 /* #mainNav>ul>li>a>span{ font-size: 1em; }*/ 
}
@media screen and (max-width: 1299.98px) {
	#insideVisual{ min-height:230px;}	
	#secTitle{ font-size:2.222em;}
}

@media screen and (min-width: 1500px) {
	.mainTrails.three-col-wrap .trail{ width: calc((99.99% - 40px) / 3); }
	.mainTrails.three-col-wrap .trail:nth-child(3n+1){ margin-left: 0; }
	.mainTrails.four-col-wrap .trail{ width: calc((99.99% - 60px) / 4); }
	.mainTrails.four-col-wrap .trail:nth-child(4n+1){ margin-left: 0; }
	.mainTrails.five-col-wrap .trail{ width: calc((99.99% - 80px) / 5); }
	.mainTrails.five-col-wrap .trail:nth-child(5n+1){ margin-left: 0; }
}
@media screen and (min-width: 1200px) {
  #mobileNavWrap, #mBgLayer{
    display:none!important;
  }  
  .fixed #logoWrap a {
    width: 195px; 
    height: 64px; 
  }
}
@media screen and (max-width: 1199.98px) {
	#secTitleWrap{ width: 300px;}
  #siteTools{
    padding-right: 84px;
  }
  .blankTPL #siteTools{ padding-right: 20px;}
  #logoWrap a{ width: 195px; height: 64px; }
  #toolHome, #toolQuicklinks, #toolFontsize, #toolShare{ display: none!important; }
  .blankTPL #toolFontsize, .blankTPL #toolShare{ display: flex!important; }
  #mmenuCtrl {
    display:flex!important;
  }
  #mainNav, #leftNavWrap {
    display:none;
  }
  #headerZone{
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
  }
  #mainContent{ width: 100%!important; padding-left: 0!important;}
  .container {
    padding: 0 30px;
  }
  #backtotop{ right: 30px; }
  #mmenuCtrl{ width: 84px; }
  #newsGallery{ width: 460px;}
  .galleryWrap .imgWrap{ width: 100%;}
}

/* Large devices (Desktops, 995px and up) */
@media screen and (min-width: 992px) and (max-width: 1499.98px) {
	.mainTrails .trail{ width: calc((99.99% - 40px) / 3); }
	.mainTrails .trail:nth-child(3n+1){ margin-left: 0; }
}
@media screen and (min-width: 992px) {
/****** common starts******/
/*#mobileNavWrap, #mBgLayer{
  display:none!important;
}*/
#secTitleWrap:after{
	content:'';
	/* background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); */
	background-image:url('../images/section-visual-gradient.png'); 
	width:180px;
	height:320px;
	position:absolute;
	right:-180px;
	top:50%;
	transform:translateY(-50%);
	z-index:1000;
}
#secTitleWrap:before{
	content:'';
	width:200px;
	height:100%;
	background-color:#fff;
	position:absolute;
	left:-200px;
	top:50%;
	transform:translateY(-50%);
	z-index:1000;
}
.photosWrap .photoItem{
  width: calc((99.9% - 40px) / 3);
}
.photosWrap .photoItem:nth-child(3n+1){ margin-left: 0; }
#footerMain { direction: rtl; }
#footerLeft{ text-align: left; }
.otherTrails .trail{ width: calc((99.99% - 30px) / 2);}
.otherTrails .trail:nth-child(2n+1){ margin-left: 0; }
.docentServices .service{
  width: calc((99.99% - 60px)/3);
}
.docentServices .service:nth-child(3n+1){ margin-left: 0; }
.newsletterWrap > .item{
  width: calc((99.99% - 90px)/4);
}
.newsletterWrap > .item:nth-child(4n+1){ margin-left: 0; }
.f_right_img.caption{ max-width: 30%; }
#insideVisualImg{ flex:1;}
.videoWrap > div{
  width: calc((99.99% - 40px)/3);
}
.videoWrap > div:nth-child(3n+1){ margin-left: 0; }
}

/* Medium devices (Tablets, less than 992px) */
@media screen and (max-width: 991.98px) {
/****** common starts******/
#secTitleWrap:after{
	content:'';
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%);
	width:100%;
	height:50px;
	position:absolute;
	left:50%;
	top:-50px;
	transform:translateX(-50%);
	z-index:1000;
}
#footerMain, #footerMain > div{ display: block; text-align: center;}
#footerRight{ padding-top: 35px;  }
#insideVisual{ flex-wrap: wrap; padding: 0; height: inherit;}
#insideVisual > div{ width: 100%!important; min-width: inherit!important; }
#insideVisualImg{
  order: 1;
  overflow: hidden;
}
#insideVisualImg img{ width: 100%; position: relative; right:inherit;  }
#secTitleWrap{ order: 2; }
#secTitle{ justify-content: center;}
#secTitle > div{ padding: 20px; }
#newsWrap{
  display: block;
}
#newsGallery{ 
  padding-left: 0;
  max-width: 460px;
  width: auto;
  margin: 0 auto;  
}
.photosWrap .photoItem{
  width: calc((99.9% - 20px) / 2);
}
.photosWrap .photoItem:nth-child(2n+1){ margin-left: 0; }
.galleryWrap{ float: none; margin:0 auto 30px!important; width: 100%; max-width: 480px; }
.otherTrails .trail{ margin-left: 0; width: 100%; }
.trailsMapList{ display: block; direction: ltr; }
.trailsMapList .trailImg{ width: 100%!important; max-width: inherit!important; margin-bottom: 20px;}
.trailsMapList .trailImg a{ display: inline-block; }
.trailsMapList .trailsList{ padding-right: 0; }
.videoWrap > div{
  width: calc((99.99% - 20px)/2);
}
.videoWrap > div:nth-child(2n+1){ margin-left: 0; }
}

/*form*/
.formItemWrap .formTable .inputWrap > label, .formItemWrap .formTable .inputWrap > input, .formItemWrap .formTable .inputWrap .captchaBlock, .formItemWrap .formTable .inputWrap .checkBoxWrap, .formItemWrap .formTable .inputWrap .dropdownWrap{
	width: 100%!important;
	display:block;
	float:none;
} 

/*Between Tablets and Mobile */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
/****** common starts******/
/****** common ends******/
/****** home starts******/
/****** home ends******/
/****** content starts******/
.f_right_img{ max-width: 50%; }
.mainTrails .trail{ width: calc((99.99% - 20px) / 2); }
.mainTrails .trail:nth-child(2n+1){ margin-left: 0; }
.mainTrails .trail > a > span.title{ padding: 20px 40px 20px 20px; height: 100px; }
.docentServices .service{
  width: calc((99.99% - 30px)/2);
}
.docentServices .service:nth-child(2n+1){ margin-left: 0; }
.newsletterWrap > .item{
  width: calc((99.99% - 60px)/3);
}
.newsletterWrap > .item:nth-child(3n+1){ margin-left: 0; }
/****** content ends******/
}
@media screen and (min-width: 768px) {
/****** common starts******/
/****** common ends******/
/****** home starts******/
/****** home ends******/
/****** content starts******/
.trailsMapList.secIndex >.trailsList > div{ width: 50%; }
.dmLists{ display:flex; flex-wrap:wrap;}
.dmLists li{
	width:calc((100% - 15px)/2);
	margin-left:15px;
}
.dmLists li:nth-child(2n+1){ margin-left:0;}

#content .two-col-list{ display:flex; flex-wrap:wrap;}
#content .two-col-list ol{
	width: calc(50% - 40px);
    margin: 0 0 0 50px;
}
#content .two-col-list ol:nth-child(2n+1){ margin-left:25px;}

/****** content ends******/
}
/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {
/****** common starts******/
body{ font-size:16px;}
.fancybox-slide{ padding:20px;}
#siteTools{
  padding-right: 70px;
}
.container {
  padding: 0 15px;
}
#backtotop{ right: 15px; }
#mobileNav .shareWrap{
  padding: 20px;
}
/*#siteTools{ padding-right: 45px; }*/
#headerTop{ padding-right: 14px; }
#mobileNavWrap {
  height: calc(99.99% - 60px);
}
#mobileNavWrap.show {
  top: 60px;
}
#mmenuClose {
  position:absolute;
  top:-60px;
  right:0;
  width:60px;
  height:60px;
}
#logoWrap a{ width: 122px; height: 40px; }
#siteTools > ul > li{ margin: 0 4px; }
#siteTools > ul > li > a{ margin: 0; }
#mmenuCtrl{
  width: 60px;
  height: 60px;
}
#backtotop{ width: 40px; height: 40px; }
#backtotop:before {
  width: 14px;
	height: 14px;
}
#mainContent {
  width:100%!important;
  padding-left:0!important;
}
#footerRight{ padding-top: 20px;  }
#footerLeft{ padding: 20px 0;}
#secTitle{ font-size: 1.750em;}
#pageTitle h1{ font-size: 1.375em; line-height:1.25em; }
#secTitle > div{ padding:15px;}
/****** common ends******/
/****** home starts******/
/****** home ends******/
/****** content starts******/
.f_left_img, .f_right_img{
  float:none;
  margin:0 auto 15px;
  max-width:100%!important;
  text-align: center; 
}
.staffListTbl tbody tr > td:first-child{
  width: 55%;
  padding-right: 10px;
}
.staffListWrap{ padding:15px 10px 10px; }
.staffListWrap .staff, .staffListWrap .staff>span{
  display: block;
  width: 100%!important; 
}
.staffListWrap .staff > span:first-child{ padding:0 0 5px; }
#whatsonYears{ float: none; margin-bottom: 20px; }
.displayItems .item{ display: block; }
#content .displayItems .item .imgWrap{ width: 100%; text-align: left; }
#content .displayItems .item .details{ padding-left: 0; padding-top: 20px; }
.galleryWrap .imgWrap > a:before{ width: 40px; height: 40px; }
.galleryWrap .imgWrap > a:after{ width: 24px; height: 24px; bottom: 27px; right: 27px; }
.locate_routes{
  display: block;
}
.locate_routes > div{
  width: 100%;
  position: relative;
  padding:0 15px 0 75px;
  margin-bottom: 20px;
  min-height: 60px;
}
.locate_routes > div:before{
  width: 64px;
  height: 64px;
}
.locate_routes > div:after{
  width: 64px;
  height: 64px;
}
.mediaContBox{ display: block; padding: 20px; }
.mediaContBox .mediaWrap{
  max-width: 80%;
  width: inherit;
  margin: 0 auto;  
}
.mediaContBox .mediaWrap img{ width: 100%; }
.mediaContBox .detailWrap{
  padding: 20px 0 0;
}
.mainTrails{ display: block; }
.mainTrails .trail{ width: 100%; margin-left: 0;}
.mainTrails .trail > a > span.title{ height: auto; }
.otherTrails .trail{ margin-bottom: 20px;}
.otherTrails .trail > a > span.img{ width: 30%; }
.otherTrails .trail > a > span.title{ width: 70%; padding: 0 10px 0 20px; }
.docentServices{ display: block; }
.docentServices .service{ width: 100%; margin-left: 0; margin-bottom: 20px; }
table.bulletin tr th:first-child{ width: 20%!important; }
.newsletterWrap > .item{
  width: calc((99.99% - 20px)/2);
  margin-left: 20px;
}
.newsletterWrap > .item:nth-child(2n+1){ margin-left: 0; }
.trailsMapList.secIndex >.trailsList > div{ width: 100%; }

/*form*/
.formItemWrap .formTable .formRow.col-2 > div{ padding:10px 0 0 0!important; display:block; width:100%;}
.formItemWrap .formTable .formRow:first-child > div{ padding-top:10px!important;}
.formItemWrap .formTable .formRow:first-child > div:first-child{ padding-top:0px!important;}
.formItemWrap .formTable .formRow.col-3 > div, .formItemWrap .formTable .formRow.addr-col-3 > div{ display:block; width:100%!important;  padding-left:0!important; padding-right:0!important; }
.formItemWrap .formTable .checkBoxWrap .otherInput input{width: 100%;}
.formItemWrap .formTable .checkBoxWrap .otherInput label{ padding-top: 0;  }
.amoForm .btnWrap > a{
  min-width: 120px;
  padding: 0 40px 0 20px;
}
.amoForm .btnWrap > a:before{ right: 20px; }
.amoForm a#btnSubmit:before{ margin-left: 10px; }
#content .amoForm.qrcode-gba div.btnWrap > a{
  display: block;
  margin: 0 auto 30px auto;
  width: 210px;
  min-width: 210px;
}
.formItemWrap{ padding: 30px 20px; }
.DMLinks > a{
  width: calc((100% - 10px)/2);
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 12px 20px 12px 12px;
}
.DMLinks > a:nth-child(2n+1){
  margin-left: 0;
}
.ThemeLinks > a{
  width: 100%;
  margin-left: 0px;
  margin-bottom: 10px;
  padding: 12px 20px 12px 12px;
}
#mapContainer{
	height:240px!important;
}
#content .remarks{ line-height:1.3em;}
.tabContainer .tabMenu ul li a{ padding: 5px 10px;}
.videoWrap > div{
  width: 100%;
	margin-left: 0;
}
/****** content ends******/
}
@media screen and (max-width: 575.98px) {
}
@media screen and (max-width: 479.98px) {
}
@media screen and (max-width: 359.98px) {
}