Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="savoye-wrapper">
			<div id="savoye_outline" class="savoye-anim centering" style="opacity:1">
				<div id="grasses"></div>
				<div id="inner-right-face"></div>
				<div id="back-right-face"></div>
				<div id="terrace2" class="terrace"></div>
				<div id="terrace3" class="terrace"></div>
				<div id="terrace" class="terrace"></div>
				<div id="top-wall-left-curve6"></div>
				<div id="top-wall-left-curve5"></div>
				<div id="top-wall-left-curve4"></div>
				<div id="top-wall-left-curve3"></div>
				<div id="top-wall-left-curve2"></div>
				<div id="top-wall-left-curve"></div>
				<div id="top-wall-left-back"></div>
				<div id="top-wall-side"></div>
				<div id="top-wall-back-left"></div>
				<div id="top-wall-back-top"></div>
				<div id="top-wall-back-bottom"></div>
				<div id="top-right-back7"></div>
				<div id="top-right-back6"></div>
				<div id="top-right-back5"></div>
				<div id="top-right-back4"></div>
				<div id="top-left2"></div>
				<div id="top-left"></div>
				<div id="top-right">
					<div class="base-window"></div>
				</div>
				<div id="top-right-back2"></div>
				<div id="top-right-back3"></div>
				<div id="top-left-back"></div>
				<div id="top-right-back"></div>
				<div id="tower"></div>
				<div id="top-roof"></div>
				<div id="top-roof2"></div>
				<div id="secondfloor"></div>
				<div id="left-pillar"></div>
				<div id="bottom-right-green-wall-front">
					<div id="bottom-right-green-wall-front-grille" class="grille-container">
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
						<div class="grille"></div>
					</div>
				</div>
				<div id="bottom-right-green-wall">
					<a href="http://xpressive.org">
						xpressive.org
					</a>
				</div>
				<div id="bottom-right-white-wall-front">
					<div id="bottom-right-white-wall-front-door"></div>
				</div>
				<div id="back-left-face"></div>
				<div id="left-face">
					<div id="left-parts">
						<div class="window-rail">
							<div class="base-window" id="left-window1"></div>
							<div class="base-window" id="left-window2"></div>
						</div>
					</div>
					<div id="bottom-left-parts">
						<div id="bottom-left-white-wall">
							<div id="bottom-left-white-wall-inner">
								<div class="grille-container">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
								<div class="grille-container">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
								<div class="grille-container">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
								<div class="grille-container">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
								<div class="grille-container">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
								<div class="grille-container" style="width:30px">
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
									<div class="grille"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="right-pillars">
					<div id="pillar1" class="pillar pillar-right"></div>
					<div id="pillar1-front" class="pillar pillar-front"></div>
					<div id="pillar2" class="pillar pillar-right"></div>
					<div id="pillar2-front" class="pillar pillar-front"></div>
					<div id="pillar3" class="pillar pillar-right"></div>
					<div id="pillar3-front" class="pillar pillar-front"></div>
					<div id="pillar4" class="pillar pillar-right"></div>
					<div id="pillar4-front" class="pillar pillar-front"></div>
					<div id="pillar5" class="pillar pillar-right"></div>
					<div id="pillar5-front" class="pillar pillar-front"></div>
				</div>
				<div id="right-parts">
					<div class="window-rail">
						<div class="base-window" id="left-window1"></div>
						<div class="base-window" id="left-window2"></div>
					</div>
				</div>
			</div>
		</div>
              
            
!

CSS

              
                body {
    padding:0;
    margin:0;
    background-color:antiquewhite;
}

#pillar5-front {
    -webkit-transform:translate3d(412.00px,200.00px,-3px) rotateY(-66.00deg);
       -moz-transform:translate3d(412.00px,200.00px,-3px) rotateY(-66.00deg);
         -o-transform:translate3d(412.00px,200.00px,-3px) rotateY(-66.00deg);
        -ms-transform:translate3d(412.00px,200.00px,-3px) rotateY(-66.00deg);
            transform:translate3d(412.00px,200.00px,-3px) rotateY(-66.00deg);
}

#top-right .base-window {
    height:23.0px;
    width:50.0px;
    top:30.0px;
    left:17.0px;
}

#pillar4-front {
    -webkit-transform:translate3d(313.00px,200.00px,-3px) rotateY(-66.00deg);
       -moz-transform:translate3d(313.00px,200.00px,-3px) rotateY(-66.00deg);
         -o-transform:translate3d(313.00px,200.00px,-3px) rotateY(-66.00deg);
        -ms-transform:translate3d(313.00px,200.00px,-3px) rotateY(-66.00deg);
            transform:translate3d(313.00px,200.00px,-3px) rotateY(-66.00deg);
}

#pillar3-front {
    -webkit-transform:translate3d(213.00px,200.00px,-3px) rotateY(-66.00deg);
       -moz-transform:translate3d(213.00px,200.00px,-3px) rotateY(-66.00deg);
         -o-transform:translate3d(213.00px,200.00px,-3px) rotateY(-66.00deg);
        -ms-transform:translate3d(213.00px,200.00px,-3px) rotateY(-66.00deg);
            transform:translate3d(213.00px,200.00px,-3px) rotateY(-66.00deg);
}

#pillar2-front {
    -webkit-transform:translate3d(113.00px,200.00px,-3px) rotateY(-66.00deg);
       -moz-transform:translate3d(113.00px,200.00px,-3px) rotateY(-66.00deg);
         -o-transform:translate3d(113.00px,200.00px,-3px) rotateY(-66.00deg);
        -ms-transform:translate3d(113.00px,200.00px,-3px) rotateY(-66.00deg);
            transform:translate3d(113.00px,200.00px,-3px) rotateY(-66.00deg);
}

.pillar-front {
    border-radius:0 0 0 2px;
    background-image:-webkit-linear-gradient(right, #ffffff, #ffffff 13%, #a3a3a3 57%, #ebebeb 99%);
    background-image:-moz-linear-gradient(right, #ffffff, #ffffff 13%, #a3a3a3 57%, #ebebeb 99%);
    background-image:-o-linear-gradient(right, #ffffff, #ffffff 13%, #a3a3a3 57%, #ebebeb 99%);
    background-image:-ms-linear-gradient(right, #ffffff, #ffffff 13%, #a3a3a3 57%, #ebebeb 99%);
    background-image:linear-gradient(to left, #ffffff, #ffffff 13%, #a3a3a3 57%, #ebebeb 99%);
}

.pillar-right {
    border-radius:0 0 2px 0;
    background-image:-webkit-linear-gradient(right, #ffffff, #ebebeb);
    background-image:-moz-linear-gradient(right, #ffffff, #ebebeb);
    background-image:-o-linear-gradient(right, #ffffff, #ebebeb);
    background-image:-ms-linear-gradient(right, #ffffff, #ebebeb);
    background-image:linear-gradient(to left, #ffffff, #ebebeb);
}

#pillar1-front {
    -webkit-transform:translate3d(12.00px,200.00px,-3px) rotateY(-66.00deg);
       -moz-transform:translate3d(12.00px,200.00px,-3px) rotateY(-66.00deg);
         -o-transform:translate3d(12.00px,200.00px,-3px) rotateY(-66.00deg);
        -ms-transform:translate3d(12.00px,200.00px,-3px) rotateY(-66.00deg);
            transform:translate3d(12.00px,200.00px,-3px) rotateY(-66.00deg);
}

.terrace {
    background-color:#ffffff;
}

#inner-right-face {
    -webkit-transform:translate3d(262px,100.00px,-294.00px) rotateY(-45.00deg);
       -moz-transform:translate3d(262px,100.00px,-294.00px) rotateY(-45.00deg);
         -o-transform:translate3d(262px,100.00px,-294.00px) rotateY(-45.00deg);
        -ms-transform:translate3d(262px,100.00px,-294.00px) rotateY(-45.00deg);
            transform:translate3d(262px,100.00px,-294.00px) rotateY(-45.00deg);
    width:262.0px;
    position:absolute;
    height:96.0px;
    background-image:-webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0.19) 59%, rgba(255, 255, 255, 0.74) 70%, rgba(255, 255, 255, 0.20) 79%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.88) 97%);
    background-image:-moz-linear-gradient(bottom right, rgba(255, 255, 255, 0.19) 59%, rgba(255, 255, 255, 0.74) 70%, rgba(255, 255, 255, 0.20) 79%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.88) 97%);
    background-image:-o-linear-gradient(bottom right, rgba(255, 255, 255, 0.19) 59%, rgba(255, 255, 255, 0.74) 70%, rgba(255, 255, 255, 0.20) 79%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.88) 97%);
    background-image:-ms-linear-gradient(bottom right, rgba(255, 255, 255, 0.19) 59%, rgba(255, 255, 255, 0.74) 70%, rgba(255, 255, 255, 0.20) 79%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.88) 97%);
    background-image:linear-gradient(to top left, rgba(255, 255, 255, 0.19) 59%, rgba(255, 255, 255, 0.74) 70%, rgba(255, 255, 255, 0.20) 79%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.88) 97%);
    border:solid 1.0px #363636;
    background-color:#e3fff1;
    border-top:solid 8.0px #242424;
    font-size:32.0px;
}

#back-right-face {
    -webkit-transform:translate3d(310px,100px,-309.00px) rotateY(-45.00deg);
       -moz-transform:translate3d(310px,100px,-309.00px) rotateY(-45.00deg);
         -o-transform:translate3d(310px,100px,-309.00px) rotateY(-45.00deg);
        -ms-transform:translate3d(310px,100px,-309.00px) rotateY(-45.00deg);
            transform:translate3d(310px,100px,-309.00px) rotateY(-45.00deg);
    width:440.0px;
    position:absolute;
    background-color:#c9c9c9;
    height:100px;
}

#back-left-face {
    background-color:#ffffff;
    width:440.0px;
    height:100px;
    position:absolute;
    -webkit-transform:translate3d(1px,100px,-310px) rotateY(45.00deg);
       -moz-transform:translate3d(1px,100px,-310px) rotateY(45.00deg);
         -o-transform:translate3d(1px,100px,-310px) rotateY(45.00deg);
        -ms-transform:translate3d(1px,100px,-310px) rotateY(45.00deg);
            transform:translate3d(1px,100px,-310px) rotateY(45.00deg);
    background-image:-webkit-linear-gradient(0deg, #ffffff, #a3a3a3 9%, #ffffff 19%, #c7c7c7);
    background-image:-moz-linear-gradient(0deg, #ffffff, #a3a3a3 9%, #ffffff 19%, #c7c7c7);
    background-image:-o-linear-gradient(0deg, #ffffff, #a3a3a3 9%, #ffffff 19%, #c7c7c7);
    background-image:-ms-linear-gradient(0deg, #ffffff, #a3a3a3 9%, #ffffff 19%, #c7c7c7);
    background-image:linear-gradient(0deg, #ffffff, #a3a3a3 9%, #ffffff 19%, #c7c7c7);
}

#terrace3 {
    width:262.0px;
    height:120.0px;
    -webkit-transform:translate3d(260px,-20px,-297px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
       -moz-transform:translate3d(260px,-20px,-297px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
         -o-transform:translate3d(260px,-20px,-297px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
        -ms-transform:translate3d(260px,-20px,-297px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
            transform:translate3d(260px,-20px,-297px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
    position:absolute;
    -webkit-transform-origin:50% 100%;
       -moz-transform-origin:50% 100%;
         -o-transform-origin:50% 100%;
        -ms-transform-origin:50% 100%;
            transform-origin:50% 100%;
    z-index:1000;
}

#terrace2 {
    width:268.0px;
    height:165.0px;
    -webkit-transform:perspective(0.00px) translate3d(22px,-65.00px,-61.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
       -moz-transform:perspective(0.00px) translate3d(22px,-65.00px,-61.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
         -o-transform:perspective(0.00px) translate3d(22px,-65.00px,-61.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
        -ms-transform:perspective(0.00px) translate3d(22px,-65.00px,-61.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
            transform:perspective(0.00px) translate3d(22px,-65.00px,-61.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
    position:absolute;
    -webkit-transform-origin:50% 100%;
       -moz-transform-origin:50% 100%;
         -o-transform-origin:50% 100%;
        -ms-transform-origin:50% 100%;
            transform-origin:50% 100%;
    z-index:1000;
}

#top-wall-left-curve6 {
    width:23.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(333px,35.00px,-372px) rotateY(100.00deg);
       -moz-transform:translate3d(333px,35.00px,-372px) rotateY(100.00deg);
         -o-transform:translate3d(333px,35.00px,-372px) rotateY(100.00deg);
        -ms-transform:translate3d(333px,35.00px,-372px) rotateY(100.00deg);
            transform:translate3d(333px,35.00px,-372px) rotateY(100.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-moz-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-o-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-ms-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:linear-gradient(to left, #f6f6f6, #ebebeb);
}

#top-wall-left-curve5 {
    width:18.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(335px,35.00px,-391px) rotateY(78.00deg);
       -moz-transform:translate3d(335px,35.00px,-391px) rotateY(78.00deg);
         -o-transform:translate3d(335px,35.00px,-391px) rotateY(78.00deg);
        -ms-transform:translate3d(335px,35.00px,-391px) rotateY(78.00deg);
            transform:translate3d(335px,35.00px,-391px) rotateY(78.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-moz-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-o-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:-ms-linear-gradient(right, #f6f6f6, #ebebeb);
    background-image:linear-gradient(to left, #f6f6f6, #ebebeb);
}

#top-wall-left-curve4 {
    width:35.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(341px,35.00px,-410px) rotateY(45.00deg);
       -moz-transform:translate3d(341px,35.00px,-410px) rotateY(45.00deg);
         -o-transform:translate3d(341px,35.00px,-410px) rotateY(45.00deg);
        -ms-transform:translate3d(341px,35.00px,-410px) rotateY(45.00deg);
            transform:translate3d(341px,35.00px,-410px) rotateY(45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(165deg, #ffffff, #f6f6f6);
    background-image:-moz-linear-gradient(165deg, #ffffff, #f6f6f6);
    background-image:-o-linear-gradient(165deg, #ffffff, #f6f6f6);
    background-image:-ms-linear-gradient(165deg, #ffffff, #f6f6f6);
    background-image:linear-gradient(165deg, #ffffff, #f6f6f6);
}

#top-wall-left-curve3 {
    width:20.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(369px,35.00px,-423.00px) rotateY(12.00deg);
       -moz-transform:translate3d(369px,35.00px,-423.00px) rotateY(12.00deg);
         -o-transform:translate3d(369px,35.00px,-423.00px) rotateY(12.00deg);
        -ms-transform:translate3d(369px,35.00px,-423.00px) rotateY(12.00deg);
            transform:translate3d(369px,35.00px,-423.00px) rotateY(12.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #f6f6f6 2%, #ffffff);
    background-image:-moz-linear-gradient(right, #f6f6f6 2%, #ffffff);
    background-image:-o-linear-gradient(right, #f6f6f6 2%, #ffffff);
    background-image:-ms-linear-gradient(right, #f6f6f6 2%, #ffffff);
    background-image:linear-gradient(to left, #f6f6f6 2%, #ffffff);
}

#top-wall-left-curve2 {
    width:19.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(387px,35.00px,-424.00px) rotateY(-10.00deg);
       -moz-transform:translate3d(387px,35.00px,-424.00px) rotateY(-10.00deg);
         -o-transform:translate3d(387px,35.00px,-424.00px) rotateY(-10.00deg);
        -ms-transform:translate3d(387px,35.00px,-424.00px) rotateY(-10.00deg);
            transform:translate3d(387px,35.00px,-424.00px) rotateY(-10.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #f6f6f6, #f6f6f6);
    background-image:-moz-linear-gradient(right, #f6f6f6, #f6f6f6);
    background-image:-o-linear-gradient(right, #f6f6f6, #f6f6f6);
    background-image:-ms-linear-gradient(right, #f6f6f6, #f6f6f6);
    background-image:linear-gradient(to left, #f6f6f6, #f6f6f6);
}

#top-wall-left-curve {
    width:30.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(402px,35.00px,-414.00px) rotateY(-35.00deg);
       -moz-transform:translate3d(402px,35.00px,-414.00px) rotateY(-35.00deg);
         -o-transform:translate3d(402px,35.00px,-414.00px) rotateY(-35.00deg);
        -ms-transform:translate3d(402px,35.00px,-414.00px) rotateY(-35.00deg);
            transform:translate3d(402px,35.00px,-414.00px) rotateY(-35.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #e3e3e3, #f6f6f6);
    background-image:-moz-linear-gradient(right, #e3e3e3, #f6f6f6);
    background-image:-o-linear-gradient(right, #e3e3e3, #f6f6f6);
    background-image:-ms-linear-gradient(right, #e3e3e3, #f6f6f6);
    background-image:linear-gradient(to left, #e3e3e3, #f6f6f6);
}

#top-wall-left-back {
    width:30.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(423px,35.00px,-397px) rotateY(-45.00deg);
       -moz-transform:translate3d(423px,35.00px,-397px) rotateY(-45.00deg);
         -o-transform:translate3d(423px,35.00px,-397px) rotateY(-45.00deg);
        -ms-transform:translate3d(423px,35.00px,-397px) rotateY(-45.00deg);
            transform:translate3d(423px,35.00px,-397px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #d9d9d9, #e6e6e6);
    background-image:-moz-linear-gradient(right, #d9d9d9, #e6e6e6);
    background-image:-o-linear-gradient(right, #d9d9d9, #e6e6e6);
    background-image:-ms-linear-gradient(right, #d9d9d9, #e6e6e6);
    background-image:linear-gradient(to left, #d9d9d9, #e6e6e6);
}

#top-wall-side {
    width:20.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(432px,35.00px,-377px) rotateY(45.00deg);
       -moz-transform:translate3d(432px,35.00px,-377px) rotateY(45.00deg);
         -o-transform:translate3d(432px,35.00px,-377px) rotateY(45.00deg);
        -ms-transform:translate3d(432px,35.00px,-377px) rotateY(45.00deg);
            transform:translate3d(432px,35.00px,-377px) rotateY(45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(165deg, #f6f6f6, #f6f6f6);
    background-image:-moz-linear-gradient(165deg, #f6f6f6, #f6f6f6);
    background-image:-o-linear-gradient(165deg, #f6f6f6, #f6f6f6);
    background-image:-ms-linear-gradient(165deg, #f6f6f6, #f6f6f6);
    background-image:linear-gradient(165deg, #f6f6f6, #f6f6f6);
}

#top-roof2 {
    width:50.0px;
    height:40.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(513px,16.00px,-97px) rotateX(90.00deg) rotateZ(45.00deg);
       -moz-transform:translate3d(513px,16.00px,-97px) rotateX(90.00deg) rotateZ(45.00deg);
         -o-transform:translate3d(513px,16.00px,-97px) rotateX(90.00deg) rotateZ(45.00deg);
        -ms-transform:translate3d(513px,16.00px,-97px) rotateX(90.00deg) rotateZ(45.00deg);
            transform:translate3d(513px,16.00px,-97px) rotateX(90.00deg) rotateZ(45.00deg);
    position:absolute;
}

#top-roof {
    width:100.0px;
    height:40.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(444.00px,16.00px,-87.00px) rotateX(90.00deg) rotateZ(45.00deg);
       -moz-transform:translate3d(444.00px,16.00px,-87.00px) rotateX(90.00deg) rotateZ(45.00deg);
         -o-transform:translate3d(444.00px,16.00px,-87.00px) rotateX(90.00deg) rotateZ(45.00deg);
        -ms-transform:translate3d(444.00px,16.00px,-87.00px) rotateX(90.00deg) rotateZ(45.00deg);
            transform:translate3d(444.00px,16.00px,-87.00px) rotateX(90.00deg) rotateZ(45.00deg);
    position:absolute;
    border-radius:40px 0 0 40px;
}

#top-wall-back-bottom {
    width:40.0px;
    height:20.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(488px,84.00px,-291px) rotateY(-45.00deg);
       -moz-transform:translate3d(488px,84.00px,-291px) rotateY(-45.00deg);
         -o-transform:translate3d(488px,84.00px,-291px) rotateY(-45.00deg);
        -ms-transform:translate3d(488px,84.00px,-291px) rotateY(-45.00deg);
            transform:translate3d(488px,84.00px,-291px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #ebebeb, #f6f6f6 83%);
    background-image:-moz-linear-gradient(right, #ebebeb, #f6f6f6 83%);
    background-image:-o-linear-gradient(right, #ebebeb, #f6f6f6 83%);
    background-image:-ms-linear-gradient(right, #ebebeb, #f6f6f6 83%);
    background-image:linear-gradient(to left, #ebebeb, #f6f6f6 83%);
}

#top-wall-back-top {
    width:40.0px;
    height:23.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(488px,35.00px,-291px) rotateY(-45.00deg);
       -moz-transform:translate3d(488px,35.00px,-291px) rotateY(-45.00deg);
         -o-transform:translate3d(488px,35.00px,-291px) rotateY(-45.00deg);
        -ms-transform:translate3d(488px,35.00px,-291px) rotateY(-45.00deg);
            transform:translate3d(488px,35.00px,-291px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right, #ebebeb, #f6f6f6 91%);
    background-image:-moz-linear-gradient(right, #ebebeb, #f6f6f6 91%);
    background-image:-o-linear-gradient(right, #ebebeb, #f6f6f6 91%);
    background-image:-ms-linear-gradient(right, #ebebeb, #f6f6f6 91%);
    background-image:linear-gradient(to left, #ebebeb, #f6f6f6 91%);
}

#top-wall-back-left {
    width:88.0px;
    height:67.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(420px,35.00px,-337px) rotateY(-45.00deg);
       -moz-transform:translate3d(420px,35.00px,-337px) rotateY(-45.00deg);
         -o-transform:translate3d(420px,35.00px,-337px) rotateY(-45.00deg);
        -ms-transform:translate3d(420px,35.00px,-337px) rotateY(-45.00deg);
            transform:translate3d(420px,35.00px,-337px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #ededed, #f6f6f6);
    background-image:-moz-linear-gradient(left, #ededed, #f6f6f6);
    background-image:-o-linear-gradient(left, #ededed, #f6f6f6);
    background-image:-ms-linear-gradient(left, #ededed, #f6f6f6);
    background-image:linear-gradient(to right, #ededed, #f6f6f6);
}

#top-wall-back-right {
    width:15.0px;
    height:70.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(520px,35.00px,-301px) rotateY(-45.00deg);
       -moz-transform:translate3d(520px,35.00px,-301px) rotateY(-45.00deg);
         -o-transform:translate3d(520px,35.00px,-301px) rotateY(-45.00deg);
        -ms-transform:translate3d(520px,35.00px,-301px) rotateY(-45.00deg);
            transform:translate3d(520px,35.00px,-301px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-moz-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-o-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-ms-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:linear-gradient(165deg, #d8d8d8, #ececec 83%);
}

#top-wall-back {
    width:100.0px;
    height:70.0px;
    background-color:#ffffff;
    -webkit-transform:translate3d(448px,35.00px,-329px) rotateY(-45.00deg);
       -moz-transform:translate3d(448px,35.00px,-329px) rotateY(-45.00deg);
         -o-transform:translate3d(448px,35.00px,-329px) rotateY(-45.00deg);
        -ms-transform:translate3d(448px,35.00px,-329px) rotateY(-45.00deg);
            transform:translate3d(448px,35.00px,-329px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-moz-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-o-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:-ms-linear-gradient(165deg, #d8d8d8, #ececec 83%);
    background-image:linear-gradient(165deg, #d8d8d8, #ececec 83%);
}

#top-right-back7 {
    background-color:rgb(251, 251, 251);
    width:31.0px;
    height:67.0px;
    -webkit-transform:translate3d(520px,35.00px,-278.00px) rotateY(190.00deg);
       -moz-transform:translate3d(520px,35.00px,-278.00px) rotateY(190.00deg);
         -o-transform:translate3d(520px,35.00px,-278.00px) rotateY(190.00deg);
        -ms-transform:translate3d(520px,35.00px,-278.00px) rotateY(190.00deg);
            transform:translate3d(520px,35.00px,-278.00px) rotateY(190.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #f1f1f1, #f0f0f0);
    background-image:-moz-linear-gradient(left, #f1f1f1, #f0f0f0);
    background-image:-o-linear-gradient(left, #f1f1f1, #f0f0f0);
    background-image:-ms-linear-gradient(left, #f1f1f1, #f0f0f0);
    background-image:linear-gradient(to right, #f1f1f1, #f0f0f0);
}

#top-right-back6 {
    background-color:rgb(251, 251, 251);
    width:30.0px;
    height:67.0px;
    -webkit-transform:translate3d(549px,35.00px,-275px) rotateY(159.00deg);
       -moz-transform:translate3d(549px,35.00px,-275px) rotateY(159.00deg);
         -o-transform:translate3d(549px,35.00px,-275px) rotateY(159.00deg);
        -ms-transform:translate3d(549px,35.00px,-275px) rotateY(159.00deg);
            transform:translate3d(549px,35.00px,-275px) rotateY(159.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #f6f6f6, #f3f3f3);
    background-image:-moz-linear-gradient(left, #f6f6f6, #f3f3f3);
    background-image:-o-linear-gradient(left, #f6f6f6, #f3f3f3);
    background-image:-ms-linear-gradient(left, #f6f6f6, #f3f3f3);
    background-image:linear-gradient(to right, #f6f6f6, #f3f3f3);
}

#top-right-back5 {
    background-color:rgb(251, 251, 251);
    width:60.0px;
    height:67px;
    -webkit-transform:translate3d(593px,35.00px,-200.00px) rotateY(97.00deg);
       -moz-transform:translate3d(593px,35.00px,-200.00px) rotateY(97.00deg);
         -o-transform:translate3d(593px,35.00px,-200.00px) rotateY(97.00deg);
        -ms-transform:translate3d(593px,35.00px,-200.00px) rotateY(97.00deg);
            transform:translate3d(593px,35.00px,-200.00px) rotateY(97.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #c7c7c7, #d9d9d9);
    background-image:-moz-linear-gradient(left, #c7c7c7, #d9d9d9);
    background-image:-o-linear-gradient(left, #c7c7c7, #d9d9d9);
    background-image:-ms-linear-gradient(left, #c7c7c7, #d9d9d9);
    background-image:linear-gradient(to right, #c7c7c7, #d9d9d9);
}

#top-right-back4 {
    background-color:rgb(251, 251, 251);
    width:60.0px;
    height:67px;
    -webkit-transform:translate3d(568px,35.00px,-249.00px) rotateY(135.00deg);
       -moz-transform:translate3d(568px,35.00px,-249.00px) rotateY(135.00deg);
         -o-transform:translate3d(568px,35.00px,-249.00px) rotateY(135.00deg);
        -ms-transform:translate3d(568px,35.00px,-249.00px) rotateY(135.00deg);
            transform:translate3d(568px,35.00px,-249.00px) rotateY(135.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #d9d9d9, #f5f5f5);
    background-image:-moz-linear-gradient(left, #d9d9d9, #f5f5f5);
    background-image:-o-linear-gradient(left, #d9d9d9, #f5f5f5);
    background-image:-ms-linear-gradient(left, #d9d9d9, #f5f5f5);
    background-image:linear-gradient(to right, #d9d9d9, #f5f5f5);
}

#top-left2 {
    width:12.0px;
    height:67px;
    background-color:#ffffff;
    -webkit-transform:translate3d(444px,35.00px,-103.00px) rotateY(-81deg);
       -moz-transform:translate3d(444px,35.00px,-103.00px) rotateY(-81deg);
         -o-transform:translate3d(444px,35.00px,-103.00px) rotateY(-81deg);
        -ms-transform:translate3d(444px,35.00px,-103.00px) rotateY(-81deg);
            transform:translate3d(444px,35.00px,-103.00px) rotateY(-81deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #e1e1e1, #ebebeb);
    background-image:-moz-linear-gradient(left, #e1e1e1, #ebebeb);
    background-image:-o-linear-gradient(left, #e1e1e1, #ebebeb);
    background-image:-ms-linear-gradient(left, #e1e1e1, #ebebeb);
    background-image:linear-gradient(to right, #e1e1e1, #ebebeb);
    z-index:1000;
}

#savoye_outline {
    -webkit-perspective:8000.000px;
       -moz-perspective:8000.000px;
         -o-perspective:8000.000px;
        -ms-perspective:8000.000px;
            perspective:8000.000px;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
    -webkit-perspective-origin:100px -1000px;
       -moz-perspective-origin:100px -1000px;
         -o-perspective-origin:100px -1000px;
        -ms-perspective-origin:100px -1000px;
            perspective-origin:100px -1000px;
    z-index:2;
}

#left-parts {
    background-color:#d9d9d9;
    height:100.0px;
    width:100%;
    position:absolute;
}

#right-parts {
    background-color:#fafafa;
    width:440.0px;
    height:100px;
    position:absolute;
    -webkit-transform:translate3d(311px,100.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
       -moz-transform:translate3d(311px,100.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
         -o-transform:translate3d(311px,100.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
        -ms-transform:translate3d(311px,100.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
            transform:translate3d(311px,100.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
    z-index:1000;
}

#bottom-left-parts {
    width:100%;
    height:80px;
    position:absolute;
    top:100px;
    left:102.0px;
}

#bottom-right-parts {
    width:440px;
    height:80px;
    position:absolute;
    left:0;
    top:200px;
    background-color:rgba(0, 0, 0, 0.13);
}

#top-left-parts {
    background-color:rgba(0, 0, 0, 0.00);
    width:100.0%;
    height:100.0px;
    position:absolute;
    left:0;
    top:0;
}

#top-right-parts {
    position:absolute;
    width:100%;
    height:100.0px;
    -webkit-transform:translate3d(439.00px,100.00px,0.1px) rotate(0.00deg)rotateY(2.00deg);
       -moz-transform:translate3d(439.00px,100.00px,0.1px) rotate(0.00deg)rotateY(2.00deg);
         -o-transform:translate3d(439.00px,100.00px,0.1px) rotate(0.00deg)rotateY(2.00deg);
        -ms-transform:translate3d(439.00px,100.00px,0.1px) rotate(0.00deg)rotateY(2.00deg);
            transform:translate3d(439.00px,100.00px,0.1px) rotate(0.00deg)rotateY(2.00deg);
}

#left-face {
    position:absolute;
    width:440.0px;
    -webkit-transform:translate3d(0.00px,100px,0.00px) rotateY(-45.00deg);
       -moz-transform:translate3d(0.00px,100px,0.00px) rotateY(-45.00deg);
         -o-transform:translate3d(0.00px,100px,0.00px) rotateY(-45.00deg);
        -ms-transform:translate3d(0.00px,100px,0.00px) rotateY(-45.00deg);
            transform:translate3d(0.00px,100px,0.00px) rotateY(-45.00deg);
    z-index:1000;
}

#right-face {
    position:absolute;
    width:440px;
    -webkit-transform:translate3d(439.00px,100.00px,0.10px) rotate(0.00deg)rotateY(0deg);
       -moz-transform:translate3d(439.00px,100.00px,0.10px) rotate(0.00deg)rotateY(0deg);
         -o-transform:translate3d(439.00px,100.00px,0.10px) rotate(0.00deg)rotateY(0deg);
        -ms-transform:translate3d(439.00px,100.00px,0.10px) rotate(0.00deg)rotateY(0deg);
            transform:translate3d(439.00px,100.00px,0.10px) rotate(0.00deg)rotateY(0deg);
}

.base-window {
    width:100px;
    height:100%;
    position:absolute;
    border-top:solid 2.0px #000000;
    border-bottom:solid 2.0px #000000;
    border-left:solid 3.0px #000000;
    border-right:solid 2.0px #000000;
    background-color:#d5dce5;
    box-shadow:0 0 15px 9px rgba(235, 235, 235, 1.00) inset;
}

.window-rail {
    height:26.0px;
    position:absolute;
    left:10px;
    top:43.0px;
    right:41.7px;
}

#left-window1 {
}

#left-window2 {
    left:115.0px;
    top:0;
    right:6.0px;
    bottom:0;
    width:294.0px;
}

#bottom-right-green-wall {
    width:200.0px;
    height:80.0px;
    background-color:#114e2c;
    position:absolute;
    -webkit-transform:translate3d(335px,200.00px,4.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
       -moz-transform:translate3d(335px,200.00px,4.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
         -o-transform:translate3d(335px,200.00px,4.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
        -ms-transform:translate3d(335px,200.00px,4.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
            transform:translate3d(335px,200.00px,4.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
    z-index:1000;
}

#bottom-right-green-wall-front-grille .grille {
    background-color:#154104;
    left:4.0px;
    position:relative;
}

#bottom-right-green-wall-front .grille-container {
    top:20.2px;
    position:relative;
    left:-4.0px;
}

#bottom-left-white-wall {
    width:215.0px;
    height:75.0px;
    background-color:#e9e9e9;
    position:absolute;
    padding-left:4px;
    padding-top:4px;
    padding-right:4px;
}

#bottom-left-white-wall-inner {
    border:solid 2.0px #000000;
    height:45.0px;
}

#bottom-right-green-wall a {
    font-size:21.0px;
    position:absolute;
    top:18.0px;
    left:37.0px;
    color:#c7c7c7;
    line-height:normal;
    padding:4px;
    font-family:Helvetica Neue;
    letter-spacing:1px;
    text-decoration:none;
}

#bottom-right-green-wall a:hover {
    color:#2b6991;
}

.grille {
    border-right:solid 2.0px #000000;
    width:100%;
    border-bottom:solid 1.0px black;
    background-color:#ffffff;
    height:4.0px;
}

.grille-container {
    float:left;
    display:inline-block;
    width:36.0px;
}

#bottom-right-green-wall-front {
    width:60.0px;
    height:80.0px;
    background-color:#32673c;
    position:absolute;
    -webkit-transform:translate3d(314px,200.00px,54px)  rotate(0.00deg) rotateX(0.00deg) rotateY(-45.00deg) rotateZ(0.00deg);
       -moz-transform:translate3d(314px,200.00px,54px)  rotate(0.00deg) rotateX(0.00deg) rotateY(-45.00deg) rotateZ(0.00deg);
         -o-transform:translate3d(314px,200.00px,54px)  rotate(0.00deg) rotateX(0.00deg) rotateY(-45.00deg) rotateZ(0.00deg);
        -ms-transform:translate3d(314px,200.00px,54px)  rotate(0.00deg) rotateX(0.00deg) rotateY(-45.00deg) rotateZ(0.00deg);
            transform:translate3d(314px,200.00px,54px)  rotate(0.00deg) rotateX(0.00deg) rotateY(-45.00deg) rotateZ(0.00deg);
    z-index:1000;
}

#bottom-right-white-wall-front {
    position:absolute;
    width:400.0px;
    height:80.0px;
    -webkit-transform:translate3d(235.00px,199px,-66.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
       -moz-transform:translate3d(235.00px,199px,-66.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
         -o-transform:translate3d(235.00px,199px,-66.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
        -ms-transform:translate3d(235.00px,199px,-66.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
            transform:translate3d(235.00px,199px,-66.00px) rotateX(0.00deg) rotateY(45.00deg) rotateZ(0.00deg);
    background-image:-webkit-linear-gradient(80deg, #ebebeb, #a3a3a3 56%, #a3a3a3);
    background-image:-moz-linear-gradient(80deg, #ebebeb, #a3a3a3 56%, #a3a3a3);
    background-image:-o-linear-gradient(80deg, #ebebeb, #a3a3a3 56%, #a3a3a3);
    background-image:-ms-linear-gradient(80deg, #ebebeb, #a3a3a3 56%, #a3a3a3);
    background-image:linear-gradient(80deg, #ebebeb, #a3a3a3 56%, #a3a3a3);
    border-left:solid 1px #ffffff;
}

#bottom-right-white-wall-front-door {
    width:24.0px;
    height:60.0px;
    background-color:#242424;
    position:relative;
    left:27.0px;
    top:20.0px;
    right:0;
    bottom:0;
    color:#484848;
}

#top-left {
    width:89.0px;
    height:67px;
    background-color:#ffffff;
    -webkit-transform:translate3d(438.00px,35.00px,-66.00px) rotateY(-45.00deg);
       -moz-transform:translate3d(438.00px,35.00px,-66.00px) rotateY(-45.00deg);
         -o-transform:translate3d(438.00px,35.00px,-66.00px) rotateY(-45.00deg);
        -ms-transform:translate3d(438.00px,35.00px,-66.00px) rotateY(-45.00deg);
            transform:translate3d(438.00px,35.00px,-66.00px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #ebebeb, #f6f6f6);
    background-image:-moz-linear-gradient(left, #ebebeb, #f6f6f6);
    background-image:-o-linear-gradient(left, #ebebeb, #f6f6f6);
    background-image:-ms-linear-gradient(left, #ebebeb, #f6f6f6);
    background-image:linear-gradient(to right, #ebebeb, #f6f6f6);
    z-index:1000;
}

#top-right {
    background-color:#d9d9d9;
    width:80.0px;
    height:67px;
    -webkit-transform:translate3d(501.00px,35.00px,-63.00px) rotateY(45.00deg);
       -moz-transform:translate3d(501.00px,35.00px,-63.00px) rotateY(45.00deg);
         -o-transform:translate3d(501.00px,35.00px,-63.00px) rotateY(45.00deg);
        -ms-transform:translate3d(501.00px,35.00px,-63.00px) rotateY(45.00deg);
            transform:translate3d(501.00px,35.00px,-63.00px) rotateY(45.00deg);
    position:absolute;
    z-index:1000;
}

#top-left-back {
    width:22.0px;
    height:67px;
    background-color:rgb(255, 255, 255);
    -webkit-transform:translate3d(560px,35.00px,-92px) rotateY(-45.00deg);
       -moz-transform:translate3d(560px,35.00px,-92px) rotateY(-45.00deg);
         -o-transform:translate3d(560px,35.00px,-92px) rotateY(-45.00deg);
        -ms-transform:translate3d(560px,35.00px,-92px) rotateY(-45.00deg);
            transform:translate3d(560px,35.00px,-92px) rotateY(-45.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(right top, #ebebeb, #e7e7e7);
    background-image:-moz-linear-gradient(right top, #ebebeb, #e7e7e7);
    background-image:-o-linear-gradient(right top, #ebebeb, #e7e7e7);
    background-image:-ms-linear-gradient(right top, #ebebeb, #e7e7e7);
    background-image:linear-gradient(to left bottom, #ebebeb, #e7e7e7);
    z-index:1000;
}

#top-right-back {
    background-color:rgb(250, 250, 250);
    width:20.0px;
    height:67px;
    -webkit-transform:translate3d(577px,35.00px,-90.00px) rotateY(34.00deg);
       -moz-transform:translate3d(577px,35.00px,-90.00px) rotateY(34.00deg);
         -o-transform:translate3d(577px,35.00px,-90.00px) rotateY(34.00deg);
        -ms-transform:translate3d(577px,35.00px,-90.00px) rotateY(34.00deg);
            transform:translate3d(577px,35.00px,-90.00px) rotateY(34.00deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #ededed, #ffffff);
    background-image:-moz-linear-gradient(left, #ededed, #ffffff);
    background-image:-o-linear-gradient(left, #ededed, #ffffff);
    background-image:-ms-linear-gradient(left, #ededed, #ffffff);
    background-image:linear-gradient(to right, #ededed, #ffffff);
    z-index:1000;
}

#top-right-back2 {
    background-color:rgb(251, 251, 251);
    width:45.0px;
    height:67px;
    -webkit-transform:translate3d(602px,35.00px,-148px) rotateY(86deg);
       -moz-transform:translate3d(602px,35.00px,-148px) rotateY(86deg);
         -o-transform:translate3d(602px,35.00px,-148px) rotateY(86deg);
        -ms-transform:translate3d(602px,35.00px,-148px) rotateY(86deg);
            transform:translate3d(602px,35.00px,-148px) rotateY(86deg);
    position:absolute;
    background-image:-webkit-linear-gradient(left, #ffffff, #c7c7c7);
    background-image:-moz-linear-gradient(left, #ffffff, #c7c7c7);
    background-image:-o-linear-gradient(left, #ffffff, #c7c7c7);
    background-image:-ms-linear-gradient(left, #ffffff, #c7c7c7);
    background-image:linear-gradient(to right, #ffffff, #c7c7c7);
    z-index:1000;
}

#top-right-back3 {
    background-color:rgb(255, 255, 255);
    width:40px;
    height:67px;
    -webkit-transform:translate3d(589px,35.00px,-110.00px) rotateY(45.00deg);
       -moz-transform:translate3d(589px,35.00px,-110.00px) rotateY(45.00deg);
         -o-transform:translate3d(589px,35.00px,-110.00px) rotateY(45.00deg);
        -ms-transform:translate3d(589px,35.00px,-110.00px) rotateY(45.00deg);
            transform:translate3d(589px,35.00px,-110.00px) rotateY(45.00deg);
    position:absolute;
    border-radius:0 0 0 0;
    background-image:-webkit-linear-gradient(left, #ffffff, #ffffff);
    background-image:-moz-linear-gradient(left, #ffffff, #ffffff);
    background-image:-o-linear-gradient(left, #ffffff, #ffffff);
    background-image:-ms-linear-gradient(left, #ffffff, #ffffff);
    background-image:linear-gradient(to right, #ffffff, #ffffff);
    z-index:1000;
}

#tower {
    width:13.0px;
    height:76.0px;
    background-color:rgb(0, 81, 43);
    -webkit-transform:translate3d(406px,16px,2.00px) rotateY(0.00deg);
       -moz-transform:translate3d(406px,16px,2.00px) rotateY(0.00deg);
         -o-transform:translate3d(406px,16px,2.00px) rotateY(0.00deg);
        -ms-transform:translate3d(406px,16px,2.00px) rotateY(0.00deg);
            transform:translate3d(406px,16px,2.00px) rotateY(0.00deg);
    position:absolute;
    border-radius:4px;
    background-image:-webkit-linear-gradient(left, #c7c7c7, #ffffff 53%, #ffffff);
    background-image:-moz-linear-gradient(left, #c7c7c7, #ffffff 53%, #ffffff);
    background-image:-o-linear-gradient(left, #c7c7c7, #ffffff 53%, #ffffff);
    background-image:-ms-linear-gradient(left, #c7c7c7, #ffffff 53%, #ffffff);
    background-image:linear-gradient(to right, #c7c7c7, #ffffff 53%, #ffffff);
    z-index:2000;
}

#grasses {
    width:600px;
    height:600px;
    -webkit-transform:translate3d(78.00px,-20px,-132.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg);
       -moz-transform:translate3d(78.00px,-20px,-132.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg);
         -o-transform:translate3d(78.00px,-20px,-132.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg);
        -ms-transform:translate3d(78.00px,-20px,-132.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg);
            transform:translate3d(78.00px,-20px,-132.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg);
    position:absolute;
    border-radius:40.0px;
    background-image:-webkit-radial-gradient(#000000, rgba(128, 128, 128, 1.00) 38%, #ffffff 69%);
    background-image:-moz-radial-gradient(#000000, rgba(128, 128, 128, 1.00) 38%, #ffffff 69%);
    background-image:-o-radial-gradient(#000000, rgba(128, 128, 128, 1.00) 38%, #ffffff 69%);
    background-image:-ms-radial-gradient(#000000, rgba(128, 128, 128, 1.00) 38%, #ffffff 69%);
    background-image:radial-gradient(, #000000, rgba(128, 128, 128, 1.00) 38%, #ffffff 69%);
}

.pillar {
    width:6.0px;
    height:85.0px;
    background-color:white;
    position:absolute;
}

#pillar1 {
    -webkit-transform:translate3d(15px,200.00px,0.00px) rotateY(0.00deg);
       -moz-transform:translate3d(15px,200.00px,0.00px) rotateY(0.00deg);
         -o-transform:translate3d(15px,200.00px,0.00px) rotateY(0.00deg);
        -ms-transform:translate3d(15px,200.00px,0.00px) rotateY(0.00deg);
            transform:translate3d(15px,200.00px,0.00px) rotateY(0.00deg);
}

#right-pillars {
    -webkit-transform:translate3d(310px,-5.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
       -moz-transform:translate3d(310px,-5.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
         -o-transform:translate3d(310px,-5.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
        -ms-transform:translate3d(310px,-5.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
            transform:translate3d(310px,-5.00px,0px)  rotate(0.00deg) rotateY(45.00deg);
    position:absolute;
    width:440px;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
    z-index:1000;
}

#pillar2 {
    -webkit-transform:translate3d(115px,200.00px,0.00px);
       -moz-transform:translate3d(115px,200.00px,0.00px);
         -o-transform:translate3d(115px,200.00px,0.00px);
        -ms-transform:translate3d(115px,200.00px,0.00px);
            transform:translate3d(115px,200.00px,0.00px);
}

#pillar3 {
    -webkit-transform:translate3d(215px,200.00px,0.00px);
       -moz-transform:translate3d(215px,200.00px,0.00px);
         -o-transform:translate3d(215px,200.00px,0.00px);
        -ms-transform:translate3d(215px,200.00px,0.00px);
            transform:translate3d(215px,200.00px,0.00px);
}

#pillar4 {
    -webkit-transform:translate3d(315px,200.00px,0.00px);
       -moz-transform:translate3d(315px,200.00px,0.00px);
         -o-transform:translate3d(315px,200.00px,0.00px);
        -ms-transform:translate3d(315px,200.00px,0.00px);
            transform:translate3d(315px,200.00px,0.00px);
}

#pillar5 {
    -webkit-transform:translate3d(415.00px,200.00px,0.00px);
       -moz-transform:translate3d(415.00px,200.00px,0.00px);
         -o-transform:translate3d(415.00px,200.00px,0.00px);
        -ms-transform:translate3d(415.00px,200.00px,0.00px);
            transform:translate3d(415.00px,200.00px,0.00px);
}

#left-pillar {
    position:absolute;
    width:11.0px;
    -webkit-transform:translate3d(100px,195.00px,-130px)  rotate(0.00deg) rotateY(0.00deg);
       -moz-transform:translate3d(100px,195.00px,-130px)  rotate(0.00deg) rotateY(0.00deg);
         -o-transform:translate3d(100px,195.00px,-130px)  rotate(0.00deg) rotateY(0.00deg);
        -ms-transform:translate3d(100px,195.00px,-130px)  rotate(0.00deg) rotateY(0.00deg);
            transform:translate3d(100px,195.00px,-130px)  rotate(0.00deg) rotateY(0.00deg);
    height:85px;
    border-radius:1.0px;
    background-image:-webkit-linear-gradient(left, #d9d9d9, #a3a3a3 27%, #ffffff);
    background-image:-moz-linear-gradient(left, #d9d9d9, #a3a3a3 27%, #ffffff);
    background-image:-o-linear-gradient(left, #d9d9d9, #a3a3a3 27%, #ffffff);
    background-image:-ms-linear-gradient(left, #d9d9d9, #a3a3a3 27%, #ffffff);
    background-image:linear-gradient(to right, #d9d9d9, #a3a3a3 27%, #ffffff);
}

#secondfloor {
    width:440px;
    height:440px;
    background-color:#ffffff;
    -webkit-transform:translate3d(0.00px,-240px,0.00px)  rotate(0.00deg) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg)skew(0.00deg, 0.00deg);
       -moz-transform:translate3d(0.00px,-240px,0.00px)  rotate(0.00deg) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg)skew(0.00deg, 0.00deg);
         -o-transform:translate3d(0.00px,-240px,0.00px)  rotate(0.00deg) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg)skew(0.00deg, 0.00deg);
        -ms-transform:translate3d(0.00px,-240px,0.00px)  rotate(0.00deg) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg)skew(0.00deg, 0.00deg);
            transform:translate3d(0.00px,-240px,0.00px)  rotate(0.00deg) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg)skew(0.00deg, 0.00deg);
    position:absolute;
    -webkit-transform-origin:center bottom;
       -moz-transform-origin:center bottom;
         -o-transform-origin:center bottom;
        -ms-transform-origin:center bottom;
            transform-origin:center bottom;
}

#terrace {
    width:180.0px;
    height:440.0px;
    -webkit-transform:translate3d(376.00px,-120.00px,-58.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
       -moz-transform:translate3d(376.00px,-120.00px,-58.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
         -o-transform:translate3d(376.00px,-120.00px,-58.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
        -ms-transform:translate3d(376.00px,-120.00px,-58.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
            transform:translate3d(376.00px,-120.00px,-58.00px) rotateX(90.00deg) rotateY(0.00deg) rotateZ(45.00deg) skew(0.00deg, 0.00deg);
    position:absolute;
    background-color:#ffffff;
    z-index:1000;
}

#savoye-wrapper {
    width:100%;
    height:100%;
    display:block;
    position:fixed;
}

.centering {
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-150px;
    width:600px;
    height:300px;
    position:absolute;
}

@-webkit-keyframes savoye-anim {
    0% {
        -webkit-perspective-origin-x :100px;
        -webkit-perspective-origin-y :-1000px;
    }
    50% {
        -webkit-perspective-origin-x :1500px;
        -webkit-perspective-origin-y :-500px;
    }
    100% {
        -webkit-perspective-origin-x :100px;
        -webkit-perspective-origin-y :-1000px;
    }
}

@-moz-keyframes savoye-anim {
    0% {
        -moz-perspective-origin-x :100px;
        -moz-perspective-origin-y :-1000px;
    }
    50% {
        -moz-perspective-origin-x :1500px;
        -moz-perspective-origin-y :-500px;
    }
    100% {
        -moz-perspective-origin-x :100px;
        -moz-perspective-origin-y :-1000px;
    }
}

@-o-keyframes savoye-anim {
    0% {
        -o-perspective-origin-x :100px;
        -o-perspective-origin-y :-1000px;
    }
    50% {
        -o-perspective-origin-x :1500px;
        -o-perspective-origin-y :-500px;
    }
    100% {
        -o-perspective-origin-x :100px;
        -o-perspective-origin-y :-1000px;
    }
}

@-ms-keyframes savoye-anim {
    0% {
        -ms-perspective-origin-x :100px;
        -ms-perspective-origin-y :-1000px;
    }
    50% {
        -ms-perspective-origin-x :1500px;
        -ms-perspective-origin-y :-500px;
    }
    100% {
        -ms-perspective-origin-x :100px;
        -ms-perspective-origin-y :-1000px;
    }
}

@keyframes savoye-anim{
    0% {
        perspective-origin-x :100px;
        perspective-origin-y :-1000px;
    }
    50% {
        perspective-origin-x :1500px;
        perspective-origin-y :-500px;
    }
    100% {
        perspective-origin-x :100px;
        perspective-origin-y :-1000px;
    }
}

.savoye-anim {
    -webkit-animation-name:savoye-anim;
       -moz-animation-name:savoye-anim;
         -o-animation-name:savoye-anim;
        -ms-animation-name:savoye-anim;
            animation-name:savoye-anim;
    -webkit-animation-duration:4s;
       -moz-animation-duration:4s;
         -o-animation-duration:4s;
        -ms-animation-duration:4s;
            animation-duration:4s;
    -webkit-animation-iteration-count:infinite;
       -moz-animation-iteration-count:infinite;
         -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
       -moz-animation-fill-mode:forwards;
         -o-animation-fill-mode:forwards;
        -ms-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
}

              
            
!

JS

              
                
              
            
!
999px

Console