@import url(/css/reset.css);
@import url(/css/text.css);
@import url("//hello.myfonts.net/count/3acc42");
/*
* 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
================================================== */
html {
	
}
body {
	font: 14px/24px 'FuturaLTPro-Light', Arial, sans-serif;
	letter-spacing:0.05em;
	color: #464646;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	
}

a {color:#867971}
b {font-weight:normal;font-family: 'FuturaLTPro-Medium'}
h3 {font-weight: normal;font-size:18px;text-transform: uppercase}

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


.offwhitebg {background:#fbfaf9}
.beigebg {background:#ece8e2}
.bigtext {font-size:18px;}

/**** nav ****/
.pagelogo {display:block;position:absolute;top:0;left:44%;width:12%;height:12vw;background:top center no-repeat url("../img/content/boxlogo.svg");background-size:contain;z-index:3000}
.navbutton {position:fixed;top:0;right:0;z-index:5000;background:rgba(70,70,70,0.8);width:60px;height:60px;cursor:pointer;cursor:hand;transition:all 0.2s}
.navbutton:hover {background:rgba(70,70,70,1)}
.navicon {width:20px;height:16px;position:relative;margin:22px 0 0 20px}
.navicon span {width:20px;height:2px;position:absolute;left:0;display:block;background:#fff}
.navicon span:nth-child(1) {top:0;transition:top 0.2s 0.2s, transform 0.2s 0s}
.navicon span:nth-child(2) {top:7px}
.navicon span:nth-child(3) {top:14px;transition:top 0.2s 0.2s, transform 0.2s 0s}

.navholder {position:fixed;top:0;right:0;height:100vh;width:0;z-index:4000;transition:width 0.4s}
.nav {width:50vw;height:100vh;background:rgba(134,121,113,0.95);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;list-style-type:none;margin:0;padding:0}
.nav li {margin:0;padding:10px 2.5vw;}
.nav li a {font-size:18px;color:#fff;text-decoration: none}
.nav li a:hover {text-decoration: underline}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.s6 .nav .n6 {font-family:'FuturaLTPro-Medium'}

.navopen .navholder {width:50vw}

.navopen .navicon span:nth-child(1) {top:7px;transform:rotate(45deg);transition:top 0.2s 0s, transform 0.2s 0.2s}
.navopen .navicon span:nth-child(2) {top:7px;height:0}
.navopen .navicon span:nth-child(3) {top:7px;transform:rotate(-45deg);transition:top 0.2s 0s, transform 0.2s 0.2s}


.pagebanner {width:100%;position:relative}
.pagebanner .bannerslider {position:relative;width:100%;height:70vh}
.pagebanner .bannerslider .slide {background:50% 50% no-repeat;background-size:cover;height:70vh;width:100%}
.pagebanner .bannerslider .overlay {position:absolute;bottom:0;left:0;width:100%;height:50%;z-index:1000;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#464646+0,464646+100&0+0,0.6+100 */
background: -moz-linear-gradient(top,  rgba(70,70,70,0) 0%, rgba(70,70,70,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(70,70,70,0) 0%,rgba(70,70,70,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(70,70,70,0) 0%,rgba(70,70,70,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00464646', endColorstr='#99464646',GradientType=0 ); /* IE6-9 */}

.slidercontrols {width:100%;height:40px;background:#867971;display:flex;flex-direction:row;justify-content:flex-end}
.slidercaption {color:#ffffff;text-transform:uppercase;display:flex;flex-direction:row;align-items:center;letter-spacing:0.2em;padding-right:10px;font-size:12px;line-height:12px}
.sliderbuttons {width:80px;display:flex;flex-direciton:row}
.sliderbuttons div {flex:0 0 40px;height:40px;background:#ece8e2 50% 50% no-repeat;background-size:10px auto;cursor:pointer;}
.sliderbuttons div:hover {background-color:#fff}
.sliderbuttons .prev {background-image:url("../img/ui/leftarrow.svg")}
.sliderbuttons .next {background-image:url("../img/ui/rightarrow.svg")}


/**** footer ****/
.footer {background:#464646;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:2.5vw 2.5vw 5vw 2.5vw}
.footer a {text-transform: uppercase;color:#867971}
.footerlogo {width:10vw;height:10vw;background:url("../img/content/footerlogo.svg") left center no-repeat;background-size:contain}



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

div.pinch-zoom,
        div.pinch-zoom img{
            width: 100%;
            -webkit-user-drag: none;
        }


/**** holding ****/

.holding {background:#d0cec8;color:#373634;font-family:"Avenir LT W01_45 Book1475508";font-size:14px;line-height:22px}
.holding .holdingbg {margin:60px;min-height:calc(100vh - 120px);background:url(../img/content/holding/elevation.png) no-repeat 50% 50% #e3e2df;position:relative}

.holding .holdingmain {height:calc(100vh - 410px);padding:30px;font-size:24px;line-height:30px;letter-spacing:0.1em;text-align:center}
.holding .holdingmain img {margin-bottom:30px;min-height:100px}

.holding .holdingbg .footer {position:absolute;bottom:60px;width:100%;text-align:center}
.holding .agent {float:left;width:25%;margin:0}
.holding .agent1 {margin-left:25%}
.holding .agent2 {margin-right:25%}
.holding .bnp {width:180px;margin-bottom:20px}
.holding .footer span {font-size:18px;letter-spacing:0.1em;text-transform:uppercase}
.holding .footer a {color:#373634}
.holding .footer a:hover {text-decoration:none}


/**** home ****/
.s0 .pagelogo {display:none}
.homeintro {position:relative;background:#ece8e2}
.introbanner {width:100%;height:70vh;background:50% 45% no-repeat;background-size:cover;position:relative}
.introbanner .overlay {position:absolute;bottom:0;left:0;width:100%;height:50%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#464646+0,464646+100&0+0,0.6+100 */
background: -moz-linear-gradient(top,  rgba(70,70,70,0) 0%, rgba(70,70,70,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(70,70,70,0) 0%,rgba(70,70,70,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(70,70,70,0) 0%,rgba(70,70,70,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00464646', endColorstr='#99464646',GradientType=0 ); /* IE6-9 */
}
.introbar {background:#867971;width:100%;height:2.5vw}
.intrologo {background:url("../img/content/boxlogo.svg") 50% 50% no-repeat;background-size:contain;width:18vw;height:18vw;margin:-10.25vw auto 2.5vw auto;position:relative;z-index:500}
.introtext {background: #ece8e2;font-size:12px;line-height:22px;text-align:center;letter-spacing:0.2em}
.introtext p {width:22%;margin:0 auto 5vw auto}
.homepictext {display:flex;flex-direction:row;padding:2.5vw 0;width:100%}
.homepictext .pic {flex:0 0 calc(50% - 1.25vw)/*;height:80vh;background:url("../img/content/home/pic1.jpg") 50% 50% no-repeat;background-size:cover*/;margin-right:1.25vw}
.homepictext .text {margin-left:1.25vw;display:flex;flex-direction:column;justify-content: center;align-items:flex-start}
.homepictext .text p {width:40%}
.homepictext .text p.bigtext {width:60%}

.homelinks {padding:2.5vw 1.25vw 5vw 1.25vw;display:flex;flex-direction:row}
.homelink {margin:0 1.25vw;display:block;flex:0 0 calc((100% / 3) - 2.5vw );text-decoration: none}
.homelink .pic {background:50% 50% no-repeat;background-size:100% auto;transition: all 0.5s;height:30vw}
.homelink .text {background:#867971;background-size:cover;flex:1 0;font-size:20px;color:#ece8e2;letter-spacing:0.2em;text-indent: 2.5vw;display:flex;flex-direction:row;align-items:center;padding:20px 0}
.homelink:hover .pic {background-size:105% auto}
.homelink:hover .text {text-decoration:underline}

@media all and (-ms-high-contrast:none) { 

  /* IE11 specific properties */
	.homepictext {display:block}
	.homepictext .pic {width:calc(50% - 1.25vw);margin-right:1.25vw;float:left}
	.homepictext .text {margin-left:1.25vw;width:calc(50% - 1.25vw);display:flex;flex-direction:column;justify-content: center;align-items:flex-start;float:left}
	
	.homelinks {display:block}
	.homelink {margin:0 1.25vw;width:calc((100% / 3) - 2.5vw);text-decoration: none;float:left}
	.homelink .pic {background-size:cover;height:30vw}
	.homelink .text {font-size:20px;padding:20px 0}
	.homelink:hover .pic {background-size:cover}
	.homelink:hover .text {text-decoration:underline}
}

/**** building ****/
.buildingpictext {display:flex;flex-direction:row;padding:2.5vw 0}
.buildingpictext .pic {flex:0 0 50%;min-height:80vh;background:url("../img/content/building/pic1.jpg") 50% 50% no-repeat;background-size:cover}
.buildingpictext .text {margin:10% 12.5%;flex:0 0 25%;display:flex;flex-direction:column;justify-content: center;align-items:flex-start}
.threepics {padding:2.5vw 1.25vw 2.5vw 1.25vw;display:flex;flex-direction:row}
.threepics .pic {margin:0 1.25vw;height:40vw;display:flex;flex-direction:column;flex:0 0 calc((100% / 3) - 2.5vw );background:50% 50% no-repeat;background-size:cover}
.spec {padding:5vw 10vw}
.spec ul {margin-bottom:5vw}
.spec ul li {margin-bottom:10px}
.brownbutton {background:#867971;background-size:cover;font-size:16px;line-height:16px;color:#ece8e2;letter-spacing:0.2em;display:inline-block;padding:20px;text-transform: uppercase;text-decoration: none}
.brownbutton:hover {background:#464646}

@media all and (-ms-high-contrast:none) { 

  /* IE11 specific properties */
	.buildingpictext .text p {width:25vw}
	
	.threepics {display:block}
	.threepics .pic {height:40vw;float:left;width:calc((100% / 3) - 2.5vw)}
}

/**** gallery ****/
.s2 .pagelogo {display:none}
.gallery {position:relative;width:100%;height:calc(100vh - 40px)}
.gallery .slide {background:50% 50% no-repeat;background-size:cover;height:100%;width:100%}
.slidercontrols {width:100%;height:40px;background:#867971;display:flex;flex-direction:row;justify-content:flex-end}
.slidercaption {color:#ffffff;text-transform:uppercase;display:flex;flex-direction:row;align-items:center;letter-spacing:0.2em;padding-right:10px;font-size:12px;line-height:12px}
.sliderbuttons {width:80px;display:flex;flex-direciton:row}
.sliderbuttons div {flex:0 0 40px;height:40px;background:#ece8e2 50% 50% no-repeat;background-size:10px auto;cursor:pointer;}
.sliderbuttons div:hover {background-color:#fff}
.sliderbuttons .prev {background-image:url("../img/ui/leftarrow.svg")}
.sliderbuttons .next {background-image:url("../img/ui/rightarrow.svg")}

/**** location ****/
.history1 {display:flex;flex-direction:row;padding:2.5vw 0 0 0}
.history1 .pic {flex:0 0 50%;background:url("../img/content/location/history/square.jpg") 50% 50% no-repeat;background-size:cover}
.history1 .text {margin:10% 12.5%;flex:0 0 25%;display:flex;flex-direction:column;justify-content: center;align-items:flex-start}

.history2 {display:flex;flex-direction:row;padding:1.25vw 0 1.25vw 0}
.history2 .pic1 {flex:0 0 calc(50% - 5vw);margin:1.25vw 2.5vw;background:url("../img/content/location/history/daimler.jpg") 50% 50% no-repeat;background-size:cover;height:35vw}
.history2 .pic2 {flex:0 0 calc(25% - 2.5vw);margin:1.25vw 2.5vw 1.25vw 0;background:url("../img/content/location/history/kinggeorge.jpg") 50% 50% no-repeat;background-size:cover}
.history2 .text {flex:0 0 calc(25% - 5vw);margin:1.25vw 2.5vw;display:flex;flex-direction:column;justify-content: center;align-items:flex-start}

.amenities {display:flex;flex-direction:row;justify-content:space-between;padding:1.25vw 0}
.amenities .list {margin:3.75vw 5vw 5vw 10vw;flex:0 0 calc(100% - 70vw)}
#accordion {border-bottom:1px solid #867971}

.amenities h3 {background:url("../img/ui/openlist.svg") right 20px center no-repeat;background-size:20px auto;border-top:1px solid #867971;padding:20px 0;margin:0;cursor:pointer}
.amenities h3.ui-accordion-header-active {background-image:url("../img/ui/closelist.svg")}
.amenities h3:hover {text-decoration:underline}
.amenities .restaurants {color:#ef8174}
.amenities .clubs {color:#5ca390}
.amenities .occupiers {color:#c0b460}

.amenities .list .lists {display:flex;flex-direction:row;padding-bottom:20px}
.amenities .list .lists ul {margin:0 5% 0 0;padding:0;flex:0 0 45%;list-style-type: none;width:100%}
.amenities .list .lists ul li {margin:4px 0;display:flex;flex-direction:row}
.amenities .list .lists ul li .listnum {flex:0 0 30px}
.amenities .map {margin:1.25vw 0;flex:0 0 55vw}
.pinch-zoom-container {width:100%}

.aerial {text-align:center;margin-top:5vw}
.aerial img {display:block}

@media all and (-ms-high-contrast:none) { 

  /* IE11 specific properties */
	.history1 .text p, .history1 .text h3 {max-width:25vw}
	
	.history2 {display:block}
	.history2 .pic1 {width:calc(50% - 5vw);height:35vw;float:left}
	.history2 .pic2 {width:calc(25% - 2.5vw);height:35vw;float:left}
	.history2 .text {width:calc(25% - 5vw);height:35vw;float:left}
	.history2 .text p {width:100%}
	
	.amenities {display:block}
	.amenities .list {float:left;width:calc(100% - 70vw)}
	.amenities .map {float:left;width:55vw}
	.amenities .pinch-zoom-container {width:55vw}
}

/**** availability ****/
.availability {display:flex;padding:2.5vw 0 5vw 0;flex-direction:row;justify-content:space-between}
.availability .availabletable {margin:2.5vw 5vw 0 5vw;width:35%}
.availability .availabletable table {text-transform: uppercase}
.availability .availabletable table td {padding:10px}
.availability .availabletable table thead, .availability .availabletable table tfoot {color:#fff;background:#c1b6a1}
.availability .availabletable table thead tr:first-child td {padding-bottom:0}
.availability .availabletable table thead tr:last-child td {padding-top:0}

.availability .availabletable table tbody td {border-bottom:1px solid #fff}
.availability .availabletable table tbody tr:last-child td {border:0}

.availability .availabletable table tbody tr:not([rel=""])
    {
        cursor:pointer;
    }
.availability .availabletable table tbody tr:not([rel=""]):hover
    {
        background:#fbfaf9;
    }
.availability .availabletable table tbody tr.highlight {background:#fff}
.availability .plans {flex:0 0 calc(50% - 2.5vw);margin-right:2.5vw;background:#fff;position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}
.availability .plan h3 {position:absolute;top:20px;left:20px;color:#867971}
.availability .plan {background:50% 50% no-repeat;background-size:contain;width:90%;height:80%;min-height:40vw;margin:10%}

.availability .let td {background:#e0dad0}
.availability .let td:last-child {text-align:center}

.key {position:absolute;bottom:20px;left:20px;display:none}
.key:before {content:'';display:block;background:#e3c288;width:18px;height:18px;border:1px solid #877971;float:left;margin-right:8px}
.key:after {content:'Balcony'}
.north {position:absolute;top:30px;right:30px;width:20px;height:20px;background:url("../img/ui/north.svg") top right no-repeat;background-size:cover}

.availability .plan.eighth {background-image:url("../img/content/availability/plans/eighth2.png")}
.availability .plan.seventh {background-image:url("../img/content/availability/plans/seventh.png")}
.availability .plan.sixth {background-image:url("../img/content/availability/plans/sixth.png")}
.availability .plan.fifth {background-image:url("../img/content/availability/plans/fifth.png")}
.availability .plan.fourth {background-image:url("../img/content/availability/plans/fourth.png")}
.availability .plan.third {background-image:url("../img/content/availability/plans/third.png")}
.availability .plan.second {background-image:url("../img/content/availability/plans/second.png")}
.availability .plan.first {background-image:url("../img/content/availability/plans/first.png")}
.availability .plan.ground {background-image:url("../img/content/availability/plans/ground.png")}
.availability .plan.lowerground {background-image:url("../img/content/availability/plans/lowerground.png")}

.availability .plan.eighth h3:before {content:'Eighth'}
.availability .plan.seventh h3:before {content:'Seventh'}
.availability .plan.sixth h3:before {content:'Sixth'}
.availability .plan.fifth h3:before {content:'Fifth'}
.availability .plan.fourth h3:before {content:'Fourth'}
.availability .plan.third h3:before {content:'Third'}
.availability .plan.second h3:before {content:'Second'}
.availability .plan.first h3:before {content:'First'}
.availability .plan.ground h3:before {content:'Ground'}
.availability .plan.lowerground h3:before {content:'Lower Ground'}

.availability .plan.seventh .key, .availability .plan.fifth .key, .availability .plan.third .key, .availability .plan.second .key, .availability .plan.ground .key {display:block}
.availability .plan.ground .key:before {background:#eddbce}
.availability .plan.ground .key:after {content:'Reception'}

.fitout {widht:100%;height:60vh;background:url("../img/content/availability/fitout.jpg") 50% 50% no-repeat;background-size:cover;position:relative}
.caption {position:absolute;bottom:20px;left:20px;font-size:12px;line-height:12px;text-transform: uppercase;color:#fff;text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);}

.availability .spacetable {margin:2.5vw 5vw 0 5vw;width:35%}

@media all and (-ms-high-contrast:none) { 

  /* IE11 specific properties */
	.availability {display:block;padding:2.5vw 0 5vw 0}
	.availability .availabletable, .availability .spacetable {float:left}
	.availability .plans {width:calc(50% - 2.5vw);margin-right:2.5vw;float:left}
}

.tour{background:#fff;padding:1.25vw;margin-bottom:20px}
.tour p {margin:0}

/**** contact ****/

.contact {padding:20vw 10vw;display:flex;flex-direction:row;justify-content:space-between}
.contactheading {margin-bottom:5vw}
.details {display:flex;flex-direction:row}
.architects {margin-left:5vw}
.contactcol2 {flex:0 1 30%}
.contactcol2 .details {flex-direction:column}
.agentlogo {width:200px;height:80px;background:left center no-repeat;background-size:contain;display:flex;flex-direction:row;align-items:center;margin-bottom:2.5vw;text-decoration:none}
.misrep {padding:0 10vw 5vw 10vw;font-size:11px;line-height:13px}

/****************************************************
* 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}



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {
		.holding .holdingbg {margin:30px;min-height:calc(100vh - 60px)}
		.holding .holdingmain {height:calc(100vh - 290px);padding:15px;font-size:20px;line-height:24px}

		.holding .holdingbg .footer {bottom:30px;}
		.agent {width:35%}
		.agent1 {margin-left:15%}
		.agent2 {margin-right:15%}}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		/**** home ****/
		.homelink .text {font-size:20px}
		
		/**** availability ****/
		.availabletable {font-size:12px;line-height:20px}
}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		/**** home ****/
		.intrologo {width:30vw;height:30vw;margin:-16.25vw auto 2.5vw auto}
		.introtext p {width:50%}
		
		/**** location ****/
		.amenities .list {margin:2.5vw;flex: 0 0 calc(100% - 63vw);font-size:12px;line-height:18px}
		
		/**** availability ****/
		.availability {display:block}
		.availability .availabletable, .availability .spacetable {width:90%}
		.availability .plans {width:90vw;margin:5vw}
		
		/**** contact ****/
		.contact, .misrep {padding:20vw 5vw}
}


	@media only screen and (max-height: 550px) {
		.holding .holdingmain {height:auto;margin-bottom:30px}
		
		.holding .holdingbg .footer {position:relative;bottom:0}
		.holding .footer .agent {margin:0 0 30px 0 !important;width:100%}
		
	}
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.holding .holdingmain {height:auto;margin-bottom:30px}
		.holding .holdingbg {margin:10px;min-height:calc(100vh - 20px)}
		.holding .holdingbg .footer {position:relative;bottom:0}
		.holding .footer .agent {margin:0 0 30px 0 !important;width:100%}
		
		/**** nav ****/
		.navopen .navholder, .nav {width:100vw}
		.nav li {padding-left:20px}
		
		.navbutton {width:40px;height:40px}
		.navicon {margin: 12px 0 0 10px;}
		
		.pagelogo {left:calc(50% - 60px);background-position:top center;width:120px;height:120px}
		
		/**** home ****/
		.intrologo {width:50vw;height:50vw;margin:-26.25vw auto 2.5vw auto}
		.introtext p {width:80%}
		.homepictext {display:block;padding:0}
		.homepictext .text {padding:20px}
		.homepictext .text p {width:80%}
		.homepictext .text p.bigtext {width:100%}
		.homelinks {flex-direction:column}
		.homelink {flex:0 0 280px;margin:10px}
		
		/**** building ****/
		.buildingpictext {display:block}
		.brownbutton {font-size:16px}
		
		/**** location ****/
		.history1, .history2 {display:block}
		.history1 .text, .history2 .text {margin:10vw}
		.history2 .pic1 {height:280px;margin:5vw}
		.history2 .pic2 {height:280px;margin:5vw}
		
		.amenities {display:block}
		.amenities .map {margin:10vw 0 0 0}
		
		/**** availability ****/
		.availability .availabletable table td {padding:5px}
		
		/**** contact ****/
		.contact {padding-top:200px;display:block}
		.contactcol1 {margin-bottom:20vw}
		.details {display:block}
		.architects {margin-left:0}
		/**** footer ****/
		.footer {flex-direction:column}
		.footerlogo {width:120px;height:120px}
}

	/* 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) {}


/* #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: 'FuturaLTPro-Light';src: url('/webfonts/3ACC42_0_0.eot');src: url('/webfonts/3ACC42_0_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/3ACC42_0_0.woff2') format('woff2'),url('/webfonts/3ACC42_0_0.woff') format('woff'),url('/webfonts/3ACC42_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'FuturaLTPro-Medium';src: url(/'webfonts/3ACC42_1_0.eot');src: url('/webfonts/3ACC42_1_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/3ACC42_1_0.woff2') format('woff2'),url('/webfonts/3ACC42_1_0.woff') format('woff'),url('/webfonts/3ACC42_1_0.ttf') format('truetype');}