/*
''template details start''
'name:Page
'primary:true
'serial:3030
'cssFile:template_page.css
'aspFile:template_page.asp
''template details end''
*/

/* defaults - copied from CMS2016.css so documents will inherit these styles in editing mode 
	* { vertical-align:baseline; font-weight:inherit; font-family:inherit; font-style:inherit; font-size:100%; border:0 none; outline:0; padding:0; margin:0; }*/
	html, body { margin:0; padding:0; font-family:'Spectral', serif; font-weight:300; color:#555; }
	a { color:#07C; text-decoration:none; }
	a:hover { opacity:0.9; }
	p { margin:1em 0; }
	h1 { font-size:175%; font-weight:400; }
	.pageTitle { border-bottom:1px solid #e6e6e6; padding-bottom:10px; margin-bottom:30px; text-align:center; }
	h2 { font-size:135%; font-weight:400; }
	h3 { font-size:100%; font-weight:600; }
	hr { height:0; border:none; border-top:#eee solid 1px; margin:1.5em 0; }
	hr.noLine { border:1px solid #fff; }
	ul, ol { margin:1em 0; }
	ul li, ol li { margin:0 0 0 30px; }
	b, strong, .cBold { font-weight:bold; font-weight:500; }
	.clear { clear:both; }
	iframe { width:100% !important; display:block; }
	.box { padding:30px; border:1px solid #e6e6e6; box-sizing:border-box; }
	.note { padding:20px; background:#fffacd; font-style:italic; font-size:90%; }
/* defaults - copied from CMS2016.css so documents will inherit these styles in editing mode */

.row { max-width:1200px; } /* set the max width of the website row */

/* colours - first is for CMS editor, second is to overide CMS2016.css */
h1.pageTitle,
h2.pageTitle { color:#3c1d03; font-size:180%; font-weight:200; line-height:100%; }
h2, .pageContent h2 { color:#3c1d03; font-weight:400; font-size:140%; }
h3, .pageContent h3 { color:#3c1d03; font-weight:500; font-size:120%; }
h4, .pageContent h4 { font-weight:500; font-size:100%; margin-bottom:10px; }
.btn, .pageContent .btn, .outerHome .btn { background:#3c1d03; color:#fff; text-transform:uppercase; font-size:12px; border-radius:0; padding:10px 20px; font-weight:400; }
.bodyStyle .btn:hover { opacity:0.9; }
.box, .pageContent .box { border:1px solid #e6e6e6; }

/* logo default */
.swLogo { font-size:60px; font-weight:400; text-transform:uppercase; text-align:center; line-height:50px; letter-spacing:6px; color:#fff; }
.swLogo span { font-size:22px; font-weight:300; letter-spacing:3px; opacity:0.5; display:block; } 

/* header */
#headerBlock { text-align:center; padding:30px 0 0 0; box-sizing:border-box; }
.headerNav { text-transform:uppercase; margin-bottom:30px; opacity:0.7; }
.onScroll { display:none; position:absolute; top:0; }
#headerBlock .headerNav.scroll-to-fixed .onScroll { display:block; }
#headerBlock .headerNav.scroll-to-fixed .onScroll.swLogo { left:1%; font-size:20px; line-height:70px; margin:0; }
#headerBlock .headerNav.scroll-to-fixed .onScroll.headerContact { right:1%; text-align:left; top:15px; }
#headerBlock .headerNav.scroll-to-fixed .onScroll.headerContact > div { display:inline-block; }
#headerBlock .headerNav.scroll-to-fixed .datepicker-label,
#headerBlock .headerNav.scroll-to-fixed .datepicker-input { display:none; }
#headerBlock .headerNav.scroll-to-fixed .datepicker-button { background:rgba(255,255,255,0.3); }
#headerBlock .headerNav.scroll-to-fixed .datepicker-button:hover { background:rgba(255,255,255,0.4); }

/* gradient */
 #headerBlock {
background: -moz-linear-gradient(top,  rgba(220,212,197,1) 0%,rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(220,212,197,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(220,212,197,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c1d03', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ }


/* booking */
#headerBlock .webrooms-datepicker { font-size:90%; }
#headerBlock .datepicker-label,
#headerBlock .datepicker-input,
#headerBlock .datepicker-button { line-height:40px; height:40px; box-sizing:border-box; }
#headerBlock .datepicker-label { color:#3c1d03; border:1px solid #eee; }
#headerBlock .datepicker-input { color:#3c1d03; left:100px; height:42px; line-height:42px; opacity:0.75; }
#headerBlock .datepicker-input:hover { opacity:1; }
#headerBlock .datepicker-button { background:#3c1d03; font-weight:500; text-transform:uppercase; }
#headerBlock .datepicker-label:before { background:url(/~images/template/icon_calendar.png) center center no-repeat; top:3px; }
.bodyStyle #ui-datepicker-div { font-family:inherit; font-size:90%; }

/* header image */
.outerPage { padding-top:500px; }
#headerBlock { height:400px; z-index:999; position:absolute; top:0; left:0; right:0; }
.loadBanners { opacity:0; }
#banner { height:500px; position:absolute; top:0; left:0; right:0; }
#banner ul.gallery,
#banner ul.gallery li { height:500px; }
#banner .slideshow li img { max-height:none; /*display:none;*/ }
#banner .caption span.caption-0 { display:none; }
#banner .caption span.caption-1 { background:rgba(23,112,138,0.5); padding:10px 20px; right:0; left:auto; font-size:14px; opacity:1; }
#banner .slideshowPrev, #banner .slideshowNext { display:none; }
#headerBlock .swLogo { margin-top:100px; padding-bottom: 30px; }
#headerBlock .swLogo img{width:300px; height:auto;}
#headerBlock .onScroll img{width:auto; height:auto; margin-top:10px;}

/* footer */
#footerBlock .row {max-width:1600px; width:100%;}
#footerBlock { text-align:center; padding:50px 10px; }
#footerBlock .swLogo { color:#3c1d03; width:33%; float:left; }
#footerBlock .contact { font-size:100%; color:#333; width:33%; float:left; text-align:left;}
#footerBlock .contact address {line-height: 1.3;}
#footerBlock .contact .vBar { opacity:0.3; margin:0 5px; }
#footerBlock .badges { margin:0; width:33%; float:left; text-align:right; }
#footerBlock .social {  }
#footerBlock .copy { font-size:90%; color:#ccc; width: 100%; float: left; height:50px; }
#footerBlock .copy a { color:inherit; }
#footerBlock .copy a:hover { color:#aaa; }

/* page */
.bodyStyle { font-size:17px; font-family:'Spectral', serif; font-weight:300; color:#555; position:relative; }
#pageOuter { padding:70px 0 0; }
.intro { padding:10px 70px 20px 70px; }
.row .note { font-style:normal; padding:10px; display:inline-block; }
.taupo-intro {text-align:center;}
.taupo-intro .btn {padding:15px 20px;}

/* articles */
.row .pageContent .article,
.row .pageContent .box,
.galleryThumbs,
.book { border:none; box-shadow:0 1px 10px rgba(0,0,0,0.1); padding:70px; background:#fff; }
.galleryThumbs { margin-bottom:20px; }
.galleryThumbs h2 { font-size:130%; font-weight:300; margin-bottom:10px; }
.pageContent .article h2.maintitle, 
.pageContent .article h3.subtitle, 
.pageContent .article h4.subtitle, 
.pageContent .article .teaser, 
.pageContent .article .description { width:50%; padding-right:50px; }
.pageContent .article ul.gallery { width:50%; height:300px; }
.pageContent .articles-reviews ul.gallery { width:50px; height:50px; }
.pageContent .articles-reviews h2.maintitle, 
.pageContent .articles-reviews h3.subtitle, 
.pageContent .articles-reviews .description { width:100%; padding:0; }
.article h3.subtitle,
.article h4.subtitle { color:#84bdd3; font-weight:300; line-height:125%; font-size:95%; }
.article .teaser { font-weight:500; }
.articles-awards .ieIMGfix { background-size:contain; }
.articles-awards ul.gallery img { object-fit:contain; }
.articles-awards .article ul.gallery { border:20px solid #eee; }
.articlesBlock .description br { content:''; margin-top:0.5em; display:block; }

/* articles roomtypes */
.row .pageContent .roomtype { padding:0; padding-bottom:70px; }
.row .pageContent .roomtype .gallerySlides { width:100%; float:none; }
.row .pageContent .roomtype .gallerySlides ul.gallery li { height:600px; }
.row .pageContent .roomtype h2.maintitle, 
.row .pageContent .roomtype h3.subtitle, 
.row .pageContent .roomtype h4.subtitle, 
.row .pageContent .roomtype .features, 
.row .pageContent .roomtype .description,
.row .pageContent .roomtype .availability { width:100%; padding:0 10%; }
.row .pageContent .roomtype h2.maintitle { padding-top:70px; }
.row .roomtype .features li { width:50%; box-sizing:border-box; display:inline-block; margin:3px 0; }
.row .roomtype .gallerySlides a.slideLeft, 
.row .roomtype .gallerySlides a.slideRight { background:none; font-size:75px; font-weight:200; top:40%;  }



/* Home page article facilities */
.pageContent .articles-facilities { text-align:center; }
.pageContent .articles-facilities .article { padding:0; box-sizing:border-box; width:49%; display:inline-block; position:relative; float:left; }
.pageContent .articles-facilities .article:nth-child(even) { float:right; }
.pageContent .articles-facilities .article ul.gallery { width:100%; float:none; height:300px; }
.pageContent .articles-facilities .article h2.maintitle { width:100%; margin:0; position:absolute; bottom:0; left:0; right:0; background:#000; color:#fff; font-size:17px; opacity:0.75; padding:15px; z-index:500; }
.pageContent .articles-facilities .article h3.subtitle,
.pageContent .articles-facilities .article h4.subtitle,
.pageContent .articles-facilities .article .teaser,
.pageContent .articles-facilities .article .description { display:none; }
.pageContent .articles-facilities .article .links a{width:100%; height:300px; margin:0; position:absolute; bottom:0; left:0; right:0; color:transparent; z-index:501; opacity:0; margin-bottom: -30px; }
.pageContent .articles-facilities .article ul.links {position:absolute; bottom:15px; left:0; right:0;}
.pageContent .articles-facilities .article .links li {list-style:none;}

/* facilities */
.pageContent .facilities-category { text-align:center; }
.pageContent .facilities-category .article { padding:0; box-sizing:border-box; width:49%; display:inline-block; position:relative; float:left; }
.pageContent .facilities-category .article:nth-child(even) { float:right; }
.pageContent .facilities-category .article ul.gallery { width:100%; float:none; height:300px; }
.pageContent .facilities-category .article h2.maintitle { width:100%; margin:0; position:absolute; bottom:0; left:0; right:0; background:#000; color:#fff; font-size:17px; opacity:0.75; padding:15px; z-index:500; }
.pageContent .facilities-category .article h3.subtitle,
.pageContent .facilities-category .article h4.subtitle,
.pageContent .facilities-category .article .teaser,
.pageContent .facilities-category .article .description { display:none; }
.pageContent .facilities-category .article .links a{width:100%; height:300px; margin:0; position:absolute; bottom:0; left:0; right:0; color:transparent; z-index:501; opacity:0; margin-bottom: -30px; }
.pageContent .facilities-category .article ul.links {position:absolute; bottom:15px; left:0; right:0;}
.pageContent .facilities-category .article .links li {list-style:none;}

/*contact box height*/
.box{height:400px;}

/* new css classes*/
.bodyStyle .posRel { position:relative; max-width:1000px; }
.faLeft{float:left; width:50%;}
.faRight {float:right; width:50%;}
.left {width:70%; float:left; padding-bottom:50px;}
.right {width:30%; float:right; padding-bottom:20px; }
.fac .facilities-left {width:50%; float:left;}
.fac .facilities-right {width:50%; float:right;}
.fac {width:100%; height:auto; padding:20px 0px;}

/*=======================================================*/
/*======================= MOBILE ========================*/
/*=======================================================*/

@media only screen and (max-width: 1300px) 
{
#headerBlock .headerNav.scroll-to-fixed .onScroll.swLogo { display:none; }
}

@media only screen and (max-width: 1200px) 
{
#headerBlock .headerNav.scroll-to-fixed .onScroll.headerContact { display:none; }
#pageOuter { padding:70px 30px 0; }
.intro { padding:10px 50px 20px; }
.pageContent .articles-facilities .article { margin:0 0 20px 0; }
}

@media only screen and (max-width: 960px) 
{
.bodyStyle.outerPage { padding-top:550px; }
#headerBlock,
#banner { top:50px; }
.headerNav { opacity:1; box-shadow:0 1px 10px rgba(0,0,0,0.2); }
.swLogo span { line-height:100%; font-size:20px; padding:10px; }
#headerBlock .swLogo,
#headerBlock .webrooms-datepicker { padding:0 30px; }
#headerBlock .webrooms-datepicker { display:block; }
#headerBlock .datepicker-label { display:none; }
#headerBlock .datepicker-input { display:block; position:static; background:#fff; text-align:center; width:100%; text-indent:0; }
#headerBlock .datepicker-button { display:block; margin:2px 0 0; padding:10px 20px; height:auto; width:100%; line-height:100%; }
.pageContent .article ul.gallery { width:100%; float:none; height:250px; margin-bottom:1em; }
.pageContent .article h2.maintitle, 
.pageContent .article h3.subtitle, 
.pageContent .article h4.subtitle, 
.pageContent .article .teaser, 
.pageContent .article .description { width:100%; padding:0; }
.pageContent .articles-reviews ul.gallery { height:50px; float:left; width:50px; }
.pageContent .reviews, 
.pageContent .widget { width:100%; display:block; padding:0; }
#footerBlock .badges img { height:80px; }
.row .pageContent .article, 
.row .pageContent .box,
.galleryThumbs,
.book { padding:40px; }
.pageContent .articles-facilities .article ul.gallery { height:250px; margin:0; }
.pageContent .articles-facilities .article { padding:0; }
.pageContent .galleryThumbs ul.gallery li { padding:0; }
.box{height:auto;}

.fac .facilities-left {width:100%; float:left; margin:0px !important;}
.fac .facilities-right {width:100%; float:left; margin:0px !important;}


/* footer mobile */
#footerBlock { height:auto; }
#footerBlock .swLogo { width:100%; }
#footerBlock .contact { width:100%; text-align:center; }
#footerBlock .badges {width:100%; text-align:center; }

}

@media only screen and (max-width: 480px) 
{
.bodyStyle.outerPage { padding-top:450px; }
#headerBlock .swLogo { font-size:50px; margin-top:30px; }
#banner, #banner ul.gallery, #banner ul.gallery li { height:400px; margin:0; }
#pageOuter { padding:2em 1.5em; }
.row .pageContent .article, 
.row .pageContent .box,
.galleryThumbs { padding:1.5em; }
.book { padding:0; }
h1.pageTitle, h2.pageTitle { font-size:140%; }
h2, .pageContent h2 { font-size:120%; }
.intro { padding:0; }
.pageContent .articles-facilities .article { width:100%; display:block; float:none; margin-bottom:1em; padding:0; }
.pageContent .articles-facilities .article:nth-child(even) { float:none; }
#footerBlock { padding:0 1.5em 1.5em; }
#footerBlock .swLogo { display:block; }
.pageContent .article ul.gallery { height:auto; }
#footerBlock .contact,
#footerBlock .swLogo,
#footerBlock .badge{padding:20px 0px;}

}



/*=======================================================*/
/*====================== NAVIGATION =====================*/
/*=======================================================*/


/* screen */
@media all and (min-width:960px) {
.headerNav { transition:opacity .25s ease-in-out; }
.headerNav:hover { opacity:1; }
.headerNav.scroll-to-fixed { background:#3c1d03; opacity:1; }
.headerNav.scroll-to-fixed .flexnav > li > a { line-height:70px; padding:0 15px; color:#fff; }
.headerNav .flexnav > li:hover,
.headerNav .flexnav li:hover > a { background:#3c1d03; color:#fff; }
.headerNav .flexnav li ul li a { font-size:100%; text-transform:none; font-size:14px; padding:7px 15px; }
.headerNav ul.flexnav ul ul { width:280px; }
.headerNav ul.flexnav ul ul a { background:#333; } 
}

/* mobile */
@media only screen and (max-width:960px) {
.bodyStyle .headerNav { background:#3c1d03; }
.faLeft{float:left; width:100%;}
fRight{width:100%; float:left;}
faRight{width:100%; float:left;}
.left {width:100%; float:left; padding-bottom:20px;}
.right {width:100%; float:right; padding-bottom:20px; }
.pageContent .facilities-category .article {width:100%; padding:0; }
.pageContent .facilities-category .article ul.gallery { margin:0;}
.row .roomtype .features li { width:100%;}
}