@import url("//hello.myfonts.net/count/33e029");
@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

:root{
	--darkGreen: #143023;
	--paleGreen: #79877d;
	--white: #fff;
	
}

html {
	height:100%
}
body {
	font: 16px/20px 'Lato', Arial, sans-serif;
	color: #143023;
	background: #fff;
	height:100%;
}


a {color:#fff}

b {font-weight:700}

.flexmiddle {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.animatein {visibility:hidden}
.resizeimg {max-width: 100%;height: auto;}

/**** nav ****/
.menubutton {display:block;cursor:pointer;cursor:hand;width:20px;height:20px;padding:20px; color:white; background-color:var(--darkGreen);position:fixed;top:30px;right:30px;z-index:9000;}
.menuiconholder {width:100%;height:100%;position:relative}
.menuicon {background:white; color:white; width:20px;height:2px;position:absolute;top:9px;
-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;}
.menuicon:before {content:'';background:white;width:20px;height:2px;position:absolute;top:-6px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.menuicon:after {content:'';background:white;width:20px;height:2px;position:absolute;top:6px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.closeicon:after, .closeicon:before {content:'';background:white;width:20px;height:2px;position:absolute;top:9px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%;
	 transform-origin: 50% 50%;}

.menuopen .menuicon {opacity:0}
.menuopen .menuicon:before,.menuopen .menuicon:after {top:0}

.menuopen .closeicon:after {
-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);}
.menuopen .closeicon:before {
-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);}

.menubutton:hover {background:var(--paleGreen)}
.menubutton:hover .menuicon, .menubutton:hover .menuicon:before, .menubutton:hover .menuicon:after, .menubutton:hover .closeicon:before, .menubutton:hover .closeicon:after {background:#fff}

.menuholder {position:fixed;top:0;right:0;z-index:8500;overflow:hidden;width:0;height:100vh;background: var(--paleGreen) url(../img/ui/gridbg2.png) fixed;
-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;}
.menuholder.menuopen {width:calc(100% / 3);
}
  
.nav {font-family: 'GlaserSteD';font-size:30px;margin:0;padding:0;list-style-type:none}
.nav li {margin:0;padding:10px 00}
.nav li a {display:inline-block;padding:10px 0;color:#fff;text-decoration:none}
.nav li a:hover {color: var(--darkGreen)}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.s6 .nav .n6 {border-bottom:1px solid #fff}

sup {
	vertical-align: super;
	font-size: 10px;
}

.pagesection {width:100%;position:relative}
.beigesection {background:var(--paleGreen)}
.greysection {background:var(--paleGreen)}
.greysection a {color:var(--paleGreen)}
.bordersection {border-bottom:4px solid var(--paleGreen)}
.sectiongap {width:100%;height:60px}
.subsectiongap {width:100%;height:30px}


h1 {font-family: 'GlaserSteD';font-weight:normal;font-size:55px;line-height:55px;color:var(--darkGreen)}
h1 span, .s1 h1, .s2 h1 {color:var(--paleGreen)}
h2 {font-family: 'GlaserSteD';font-weight:normal;font-size:30px;line-height:30px;color:var(--paleGreen)}
h3 {font-family: 'GlaserSteD';font-weight:normal;font-size:20px;line-height:20px;margin-bottom:30px}

.biglink {font-family: 'GlaserSteD';font-weight:normal;font-size:30px;line-height:30px;color:var(--darkGreen);text-decoration:none}
.bigpadding {padding:120px; display: flex; flex-direction: column; gap: 20px;}
.bugpadding {padding:120px 20px 0 120px;}
.midpadding {padding:60px;}
.leftpadding {padding:0 0 0 30px}
.leftrightpadding {padding:0 30px}

.twothirds {width:calc((100% / 3) * 2);float:left;background:no-repeat 50% 50%;background-size:cover;}
.onethird {width:calc(100% / 3);float:left;background:no-repeat 50% 50%;background-size:cover;}
.rightbar {width:calc(100% / 3);position:relative;background:rgba(255,255,255,0.8);z-index:1000;float:right}
.fullheight {height:100vh}
.fullheightexpand {min-height:100vh}
.threequartersheight {height:75vh}

.footer a {font-family: 'GlaserSteD';font-weight:normal;font-size:30px;line-height:30px;color:var(--palegreen);text-decoration:none}
.s5 .footer {display:none}

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

.homeintro {background: var(--darkGreen)}
.introtext {text-align:center;font-family: 'GlaserSteD';color:white;font-size:24px;line-height:24px;margin-top:3vw}
.introtext-two {text-align:center;font-family: 'GlaserSteD';color:white;font-size:36px;line-height:36px;margin-top:1vw}
.homelogoholder {width:60%;padding:0 20%;height:100%;position:absolute;top:0;left:0;z-index:20}
.homepatternholder {width:40%;padding:0 30%;height:100%;position:absolute;top:0;left:0;z-index:10}

.capsuleflexholder {display:flex;flex-direction:row}
.capsuleflex {display:flex;flex-direction:row;align-items:center;justify-content:flex-start}
.capsuleinfo {display:flex;flex-direction:row;justify-content: flex-start;flex-wrap:wrap;max-width:600px;margin-bottom:20px}
.capsuleitem {flex:0 0;flex-basis:calc(50% - 20px);margin:0 20px 20px 0}
.capsulepic {width:80%;height:6vw;background:bottom center no-repeat;background-size:contain;margin:0 auto 20px auto}
.capsuletext {text-align:center; color: var(--darkGreen)}
.capsuletext b {text-transform:uppercase}


.spec-list-item{display: flex; width:400px}
.spec-list{padding-bottom: 40px;}

#downarrow {width:100%;height:30px;background:url(../img/ui/downarrow.svg) no-repeat 50% 50%;background-size:contain;position:absolute;bottom:60px;left:0;z-index:2000}
.fadetext {color:white;position:relative;padding:5px;}
.fadetext:after {content:'';position:absolute;width:100%;height:100%;position:absolute;top:0;left:0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dcd6d0+0,dcd6d0+100&0+0,1+75 */

background: -moz-linear-gradient(top,  rgba(121, 135, 125, 0) 0%, rgba(121, 135, 125, 1) 75%, rgba(121, 135, 125, 1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(121, 135, 125, 0) 0%, rgba(121, 135, 125, 1) 75%, rgba(121, 135, 125, 1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(121, 135, 125, 0) 0%, rgba(121, 135, 125, 1) 70%, rgba(121, 135, 125, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dcd6d0', endColorstr='#dcd6d0',GradientType=0 ); /* IE6-9 */
}
.cglink {position:absolute;bottom:120px;left:120px;z-index:1000}
.cglink2 {position:absolute;bottom:90px;left:120px;z-index:1000}
.dl-brochure{color: #799381}


/**** building ****/
.buildingslider {width:100%;height:100%;position:absolute;top:0;left:0}
.buildingslider .slide, .locationslider .slide, .availabilityslider .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.buildingslider #adv-custom-caption {position:absolute;bottom:30px;left:30px;font-family: 'GlaserSteD';font-size:40px;line-height:40px;z-index:1000;color:rgba(255,255,255,0.9)}
.buildingslidercontrols {position:absolute;top:60px;left:-60px}
.buildingslidercontrols span {display:block;width:60px;height:60px;background:#fff url(../img/ui/leftarrow.svg) no-repeat 50% 50%;background-size:30%;float:left;z-index:1000;cursor:pointer;cursor:hand;}
.buildingslidercontrols #next {background-image:url(../img/ui/rightarrow.svg)}
.buildingslidercontrols span:hover {background-color:#dcd6d0}

.building-spec{padding: 0 80px}
.spec li {margin-bottom:10px;}
.spec li.download {list-style-type:none;margin:20px 0 0 0;padding:0}
.download a {color:var(--darkgreen)}

.virtualtour {display:inline-block;padding:10px 30px;background-color:var(--paleGreen);color:#fff;margin-top:20px}

/**** location ****/
.locationslider {width:100%;height:80vh;position:absolute;top:0;left:0}
.locationoverlay {height:80vh;position:relative;z-index:1000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/var(--darkGreen)+0,394151+100&0+0,0.5+100 */
background: -moz-linear-gradient(top,  rgba(57,65,81,0) 0%, rgba(57,65,81,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(57,65,81,0) 0%,rgba(57,65,81,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(57,65,81,0) 0%,rgba(57,65,81,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00394151', endColorstr='#80394151',GradientType=0 ); /* IE6-9 */
}
.locationoverlay h1 {position:absolute;bottom:30px;left:30px;color:#fff;margin:0;font-size:120px;line-height:120px}
.coventgardenis {background:var(--darkGreen);color:#fff;padding:30px;font-family: 'GlaserSteD';font-size:30px;line-height:40px}

.locationpic {position:relative}
.locationpic img {vertical-align:bottom}
.locationpic span {position:absolute;bottom:0;right:0;display:inline-block;font-family: 'GlaserSteD';font-size:22px;line-height:40px;padding:0 10px;background:#fff;color:var(--palegreen)}

.appetising {position:relative;top:-120px}
.sheekeyholder {position:relative}
.sheekey {position:absolute;bottom:30px}
.hotel {position:relative;top:-350px;margin-bottom:-260px}

.bestof .header {background:url(../img/ui/gridbg2high.png) var(--palegreen) repeat-x;padding:180px 60px 60px 60px;color:#fff}
.bestof .header h1 {color:var(--darkgreen);width:60%}
.bestof .header p {width:40%}
.bestof .info {background:#dcd6d0;padding:30px 0 0 0}
.infobox {height:400px;margin-bottom:30px;border-bottom:var(--palegreen) 4px solid}
.infobox h2 {font-size:45px;line-height:45px;color:var(--darkgreen)}
.infobox.tallbox {height:838px}
.infobox.rightbox {margin-left:30px;border-left:var(--palegreen) 4px solid;border-bottom:0}
.infobox.leftbox {margin-right:30px;border-right:var(--palegreen) 4px solid;border-bottom:0}
.infotext {position:relative;float:left;width:calc(50% - 80px);height:calc(100% - 80px);padding:40px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: left;	
   align-items: left;
   -webkit-justify-content: center;
   justify-content: center;}
.infopic {position:relative;float:left;width:calc(50% - 80px);height:calc(100% - 80px);padding:40px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}
.tallbox .infotext, .tallbox .infopic {width:calc(100% - 80px);height:calc(50% - 80px)}
.lastbox {margin-bottom:0;border-bottom:0}
.walkingtime {width:80px;height:80px;position:absolute;top:30px;right:30px;color:#fff;text-transform:uppercase;font-size:12px;line-height:14px;text-align:center;border-radius:100%}
.walkingtime:before {content:'';mix-blend-mode: multiply;display:block;width:80px;height:80px;border-radius:100%;background:var(--palegreen);position:absolute;top:0;left:0;z-index:0}
.walkingtime p {margin:0;position:relative;z-index:200}
.walkingtime span {font-family: 'GlaserSteD';font-size:30px;line-height:40px;display:block}

/**** connections ****/
.connectionsintro {background:url(../img/content/connections/drawing.svg) right center no-repeat;background-size:70%;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: left;
   align-items: left;
   -webkit-justify-content: center;
   justify-content: center;}
.traveltimes {background: var(--paleGreen)}
.traveltimes table {float:left;width:40%;margin-right:60px}
.traveltimes thead {font-family: 'GlaserSteD';font-weight:normal;font-size:30px;line-height:30px;color:var(--palegreen)}
.traveltimes td {padding-bottom:10px}
.traveltimes .num {font-weight:700}
#map {height:50vh}
#map_canvas {height:100%}
.travel-logo{width: 50px; height: 50px;}
.travel-icon-wrapper{display: flex; gap: 10px; align-items: center;}
.location-copy{color: white;}

/**** availability ****/
.availabilityslider {width:100%;height:100%;position:absolute;top:0;left:0}
.availabilityslider #adv-custom-caption {position:absolute;bottom:30px;left:30px;font-family: 'GlaserSteD';font-size:40px;line-height:40px;z-index:1000;color:rgba(255,255,255,0.9)}

.availabilityslidercontrols {position:absolute;bottom:30px;right:29px;z-index:1000}
.availabilityslidercontrols span {display:block;width:61px;height:61px;background:url(../img/ui/leftarrow.png) no-repeat 50% 50%;float:left;z-index:1000;cursor:pointer;cursor:hand;}
.availabilityslidercontrols #next {background-image:url(../img/ui/rightarrow.png);position:relative;left:-1px}
.availabilityslidercontrols span:hover {background-color:#dcd6d0}

.availabletable {width:100%;color:var(--palegreen)}
.availabletable td {border-bottom:1px solid var(--palegreen);padding:5px 0}
.availabletable tfoot td {font-weight:700;border:0}

.plansslider {width:100%;position:relative;}
.plansslider .slide {padding:120px;width:calc(100% - 240px);text-align:center;}
.plansslider .slide img {margin-bottom:30px}
.plansslider #plansadv-custom-caption {position:absolute;top:60px;left:60px;font-family: 'GlaserSteD';font-size:20px;line-height:20px;z-index:1000;color:var(--palegreen);display:inline-block;padding:3px}
.plansslider #plansadv-custom-caption:before {content:'';width:1px;height:86px;background:var(--palegreen);display:block;position:absolute;top:-60px;left:-1px}
.plan-table{position: absolute; right:140px; top: 100px; display: flex;flex-direction: column; p{line-height: 1em; border-bottom: 1px solid black; font-size: 12px; margin: 0; padding: 5px 0;}}
@media screen and (max-width: 1024px){
	.plan-table{right: 80px; top: 20px; p{font-size: 8px; padding: 2px 0;}}
}
.plansslidercontrols {position:absolute;bottom:30px;right:29px;z-index:1000}
#plansnext, #plansprev {display:block;width:61px;height:61px;background:url(../img/ui/leftarrow2.png) no-repeat 50% 50%;z-index:1000;cursor:pointer;cursor:hand;position:absolute;top:calc(50% - 30px)}
#plansnext {background-image:url(../img/ui/rightarrow2.png);right:0}
#plansprev {left:0}
#plansnext:hover, #plansprev:hover {background-color:#fff}
.north {position:absolute;z-index:1000;bottom:30px;right:30px; display: flex; justify-content: space-between; align-items: flex-end;  gap: 20px; img{width: 30px}}
.stmartin{position:absolute;z-index:1000;bottom:calc(50% - 75px);right:-40px;transform:rotate(-90deg);}
.downloadplan {padding-top:15px;font-size:22px;text-transform:uppercase}

/**** gallery ****/
.gallery {padding:15px}
.gallerysquare {margin:15px;display:block;width:calc((100% / 4) - 30px);height:calc((100vw / 4) - 30px);background:var(--darkGreen) 50% 50% no-repeat;background-size:cover;float:left;position:relative}
.gallerysquare.beige1 {background-color:var(--paleGreen)}
.gallerysquare.beige2 {background-color:var(--paleGreen)}
a.gallerysquare {background-color:#dcd6d0}
a.gallerysquare:after {content:'';display:block;width:100%;height:100%;position:absolute;background:var(--palegreen);opacity:0;
-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;}
a.gallerysquare:hover:after {opacity:0.8}


/**** contact ****/
.contactpic {width:50%;height:100vh;background:url(../img/content/contact/contactpic.jpg) 50% 50% no-repeat;background-size:cover;float:left;position:fixed;top:0;left:0}
.contactdetails {width:50%;min-height:90vh;background:var(--darkGreen);float:left;margin-left:50%;color:#fff}
.contactcol3 {width:calc((100% - 90px) / 3);margin-right:30px;float:left}
.contactcol2 {width:calc((100% - 90px) / 2);margin-right:30px;float:left}
.misrep {background:var(--paleGreen);color:#fff;font-size:11px;line-height:13px;width:50%;padding-left:50%}




.mapsection{background-color: var(--darkGreen); padding: 40px 0;}








/**** holding ****/
.holding {font: 14px/18px 'Lato', Arial, sans-serif;color: #444444;}
.holding a {color:var(--palegreen)}
.holding a:hover {text-decoration:none}

.holding .holdingbg {height:calc(100% - 322px);background:url(../img/content/holding/holdingbg.jpg) 50% 50% no-repeat;background-size:cover}
.holding .logostripe, .holding .downloadstripe {background:#fff;padding:20px 0;width:100%;height:26px}
.holding .logostripe img {width:310px;height:auto;float:right}

.holding .downloadstripe {background:var(--palegreen);padding:10px 0;font-size:14px;line-height:14px;height:14px}
.holding .downloadstripe a {color:#fff;float:right;text-transform:uppercase;font-weight:700;text-decoration:none}
.holding .downloadstripe a:hover {text-decoration:underline}

.holding .redstripe {background:#812631;color:#fff;padding:20px 0}
.holding h2 {text-align:right;margin:0;font-size:20px;line-height:24px}
.holding h2 span {font-weight:300}

.holding .footer {padding:20px 0;margin:0;height:160px}


/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}

.splitter{display: flex; justify-content: space-between;}

.revealOnScroll.fadeInUp {
  opacity: 0;
}

/**** slicknav ****/
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 767px) {
	#nav {
		display:none;
	}
	
	.slicknav_menu {
		display:block;z-index:1000;position:fixed;top:0;right:0;padding:0;width:100%;height:0;
	}
	.slicknav_menu .vmiddle {position: relative;top: 0;  -webkit-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);}
	.slicknav_menu .logo {display:none}
	.slicknav_btn {margin:0;background:#666666;position:fixed;top:30px;right:30px;border-radius:0;padding:8px 5px 8px 5px;height:35px;z-index:600}
	.slicknav_menu .slicknav_menutxt {font-family:"Lato", Arial, Helvetica, sans-serif;letter-spacing:0.1em;color:#fff;text-shadow:none;font-weight:300}
	.slicknav_menu .slicknav_icon {width:30px}
	.slicknav_menu .slicknav_icon-bar {background-color:#aaaaaa;box-shadow:none;height:3px;width:30px;margin:5px 0;transition:0.2s;opacity:1;position:relative}
	.slicknav_menu .slicknav_icon-bar:nth-of-type(1) {margin-top:0}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(1) {opacity:1;transform: rotate(45deg);top:8px}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(2) {opacity:0;transform: rotate(-135deg);}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(3) {opacity:1;transform: rotate(-45deg);top:-8px}
	.slicknav_btn:hover .slicknav_icon-bar {background-color:#fff}
	.slicknav_nav {width:100%;background:#fff}
	.slicknav_nav a {color:#fff;display:inline-block;padding:8px 0;width:auto;margin:0}
	.slicknav_nav ul {margin:0}
	.slicknav_nav li {margin:0 !important;text-align:center;text-transform:uppercase;letter-spacing:0.1em}
	.slicknav_nav a:hover {text-decoration:underline}
	
	.slicknav_nav {background:#383737}
}

/* #Media Queries
================================================== */
	
	/* biggerest desktop */
	@media only screen and (max-width: 1400px) {
		/**** location ****/
		.locationoverlay h1 {font-size:110px;line-height:110px}
	}
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {
		/**** location ****/
		.locationoverlay h1 {font-size:100px;line-height:100px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		/**** location ****/
		.locationoverlay h1 {font-size:90px;line-height:90px}
		
		.appetising {position:relative;top:0px}
		.hotel {position:relative;top:-160px;margin-bottom:-160px}
		.infobox h2 {font-size:35px;line-height:35px;}
		
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		h1 {font-size:40px;line-height:40px}
		
		.bigpadding {padding:60px}
		.bugpadding {padding:60px;}
		
		/**** home ****/
		.cglink {bottom:120px;left:60px}
		.cglink2 {bottom:20px;left:60px}
		#downarrow {height:20px;bottom:30px;left:0}
		
		/**** location ****/
		.locationoverlay h1 {font-size:80px;line-height:80px}
		
		.infobox h2 {font-size:30px;line-height:30px;}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		h1 {font-size:30px;line-height:30px}
		
		.bigpadding {padding:30px}
		.bugpadding {padding:30px;}
		.midpadding {padding:15px}
		
		.rightbar {width:calc(50%);}
		
		
		/**** home ****/
		.cglink {bottom:30px;left:30px}
		.cglink2 {bottom:5px;left:30px}
		#downarrow {height:15px;bottom:15px;left:0}
		
		/**** location ****/
		.locationoverlay h1 {font-size:70px;line-height:70px}
		.hotel {position:relative;top:-60px;margin-bottom:-60px}
		.infobox h2 {font-size:20px;line-height:20px;}
		
		/**** connections ****/
		.traveltimes table {float:left;width:45%;margin-right:30px}
		
		/**** gallery ****/
		.gallery {padding:5px 5px 30px 5px}
		.gallerysquare {margin:5px;width:calc((100% / 3) - 10px);height:calc((100vw / 3) - 10px);}
		
		/**** contact ****/
		.contactpic {width:100%;height:50vh;float:none;position:relative}
		.contactdetails {width:100%;margin-left:0;}
		.misrep {width:100%;padding-left:0%}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.holding .holdingbg {height:70vh}
		.twothirds, .onethird {width:100%}
		.twothirds.fullheight {height:auto}
		.vmiddle {position: relative;top: 0%;  -webkit-transform: translateY(0%);  -ms-transform: translateY(0%);  transform: translateY(0%);}
		
		.rightbar {width:calc(100%);}
		.rightbar.fullheight {height:auto;padding:30px 0}
		.leftpadding {padding:15px}
		
		/**** nav ****/
		.menubutton {padding:10px;}
		.menuholder {}
		.menuholder.menuopen {width:100%;}
		.nav {font-size:20px;}
		.nav li {padding:3px 0}
		.nav li a {padding:3px 0;}
		
		/**** home ****/
		.introtext {font-size:20px}
		.capsuleflexholder {flex-direction:column-reverse}
		.homepic {height:80vh}
		.capsulepic {height:100px}
		
		.cglink {bottom:80px}
		
		/**** building ****/
		.buildingslider {position:relative}
		.buildingslidercontrols {position:absolute;top:-40px;left:inherit;right:0px}
		.buildingslidercontrols span {width:40px;height:40px}
		.buildingslider #adv-custom-caption {display:none !important}
		
		/**** location ****/
		.locationoverlay h1 {font-size:40px;line-height:40px}
		.coventgardenis {font-size:20px;line-height:26px}
		.appetising {position:relative;top:0px}
		.sheekey {position:relative;bottom:0px;margin-bottom:30px}
		.hotel {position:relative;top:0px;margin-bottom:0px}
		.locationpic span {font-size:20px;line-height:26px;}
		.london-row-wrapper{display: flex;}
		.bestof .header {padding:180px 30px 30px 30px}
		.bestof .header h1 {width:100%}
		.bestof .header p {width:100%}
		
		.infobox.tallbox {height:400px}
		.infobox.rightbox {margin-left:0px;border-left:0;border-bottom:var(--palegreen) 4px solid}
		.infobox.leftbox {margin-right:0px;border-right:0;border-bottom:var(--palegreen) 4px solid}
		.lastbox {border-bottom:var(--palegreen) 4px solid}
		.infotext {width:calc(100% - 40px);height:calc(50% - 40px);padding:20px;}
		.infopic {width:calc(100% - 40px);height:calc(50% - 40px);padding:20px;}
		
		.mapsection {display:none}
		.splitter{display: flex; flex-direction: column;}

		/**** connections ****/
		.connectionsintro {background-position:50% 30px;background-size:100%;padding-top:70vw;display: block}
		.traveltimes table {width:90%;margin:0 10px 30px 10px}
		
		/**** availability ****/
		.availabilityslider #adv-custom-caption {display:none !important}
		.availabilityslidercontrols span {width:40px;height:40px;background-size:contain}
				

		.plansslider .slide {padding:100px 60px 60px 60px;width:calc(100% - 120px);text-align:center;}
		.availabilityslidercontrols {bottom:0px;right:0px;}
		#plansnext, #plansprev {width:30px;height:30px;background-size:contain;top:calc(50% - 15px)}
		
		/**** gallery ****/
		.gallerysquare {margin:5px;width:calc((100% / 2) - 10px);height:calc((100vw / 2) - 10px);}
		
		/**** contact ****/
		.contactcol3 {width:calc(100%);margin-right:0px;float:left}
		.contactcol2 {width:calc(100%);margin-right:0px;float:left}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		/**** location ****/
		.locationoverlay h1 {font-size:25px;line-height:25px}
		
		/**** gallery ****/
		.gallerysquare {width:calc(100% - 10px);height:calc(100vw - 10px);}
		div.gallerysquare {display:none}
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/
@font-face {font-family: 'GlaserSteD';src: url('/webfonts/33E029_0_0.eot');src: url('/webfonts/33E029_0_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/33E029_0_0.woff2') format('woff2'),url('/webfonts/33E029_0_0.woff') format('woff'),url('/webfonts/33E029_0_0.ttf') format('truetype');}