XXXdiv {
	background-color: red;
}



/*
Box
--------------------------------------------------------------------------------*/
.acbox-container {
	display: block;
	width: 75%;
	margin: 0 auto;
	
	-webkit-perspective-origin: 50% 5%;
	perspective-origin: 50% 5%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}
 
.acbox {
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    transition: 0.75s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 125px 0;
    -moz-transform-origin: 125px 0;
    transform-origin: 125px 0;
}
.acbox:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	width: 7px;
	background: url('/images/archicad/19/ac19-box-ridge.png') repeat-y;
	z-index: 20;
    -webkit-transform: translateZ(1px); /* Fix for flickering in Chrome  */
}
.XXXacbox:hover,
.acbox.perspective {
    -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
}
 
/* Box cover and spine
--------------------------------------------------------------------------------*/
.acbox-cover {
	position: relative;
	z-index: 10;
}
.acbox-cover img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
 
.acbox-spine {
	position: absolute;
	color: #fff;
	position: absolute;
	bottom: 0;
	top: 0;
	width: 50px;
	z-index: 5;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	background: url('/images/archicad/19/ac19-box-spine.jpg') -64px 0 no-repeat;
	background-size: auto 100%;
    -webkit-transform: rotateY(-90deg) translateX(-49px);
    -moz-transform: rotateY(-90deg) translateX(-49px);
    transform: rotateY(-90deg) translateX(-49px);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}
.acbox-spine:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}
.acbox-spine h1 {
	display: block;
	position: absolute;
	top: 0;
	left: 39px;
	XXXwidth: 325px;
	text-align: left;
	color: #fff;
	text-indent: 43px;
	text-transform: uppercase;
	font-size: 2em;
	opacity: 0.75;
	font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}



.test {
	position: relative;
	font-size: 5em;
	XXXfloat: left;
	XXXfont-size: 12em;
	XXXline-height: 1.5;
	XXXmax-height: 290px;
	text-align: center;
	XXXwidth: 16.6666667%;
	/* Fallback */
	XXXwidth: -webkit-calc(100% / 6);
	XXXwidth: calc(100% / 6);
}

.test span {
	display: inline-block;
	font-weight: 900;
	line-height: 1;
	position: relative;
	XXXcolor: hsla(0, 0%, 0%, 0.6);
	color: white;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 550px;
	-ms-perspective: 550px;
	perspective: 550px;
	z-index: 1;
}
.test span:before,
.test span:after {
	position: absolute;
	content: attr(data-letter);
	line-height: inherit;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.test span:before {
	text-shadow: none;
	color: hsla(0, 0%, 0%, 0.12);
}

.ot-letter-left { XXXbackground: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #82244d, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #82244d; }
.ot-letter-left span:after { color: #82244d; }
.ot-letter-left:hover span:after { color: #a83163; }

.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }

.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }

.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }



/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after {
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.ot-letter-left span:before {
	-webkit-transform: scale(1.08,1) skew(0deg,1deg);
	-ms-transform: scale(1.08,1) skew(0deg,1deg);
	transform: scale(1.08,1) skew(0deg,1deg);
}

.ot-letter-left span:after {
	text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateY(-15deg);
	-ms-transform: rotateY(-15deg);
	transform: rotateY(-15deg);
}

.ot-letter-left:hover span:before {
	-webkit-transform: scale(0.85,1) skew(0deg,20deg);
	-ms-transform: scale(0.85,1) skew(0deg,20deg);
	transform: scale(0.85,1) skew(0deg,20deg);
}

.ot-letter-left:hover span:after {
	-webkit-transform: rotateY(-40deg);
	-ms-transform: rotateY(-40deg);
	transform: rotateY(-40deg);
}

/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.ot-letter-top span:before {
	-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
	-ms-transform: scale(1,0.95) skew(-4deg,0deg);
	transform: scale(1,0.95) skew(-4deg,0deg);
}

.ot-letter-top span:after {
	text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateX(-15deg);
	-ms-transform: rotateX(-15deg);
	transform: rotateX(-15deg);
}

.ot-letter-top:hover span:before {
	-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
	-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
	transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}

.ot-letter-top:hover span:after {
	-webkit-transform: translateY(-0.035em) rotateX(-40deg);
	-ms-transform: translateY(-0.035em) rotateX(-40deg);
	transform: translateY(-0.035em) rotateX(-40deg);
}











/* General
--------------------------------------------------------------------------------*/
h3 .weight-normal {
	font-weight: normal;
}

#maincontent {
	padding-top: 0 !important;
}

.wildBanner {
	XXXheight: 300px;
}

.wildBanner .banner {
	position: absolute;
	left: 0;
	width: 100%;
	background: url() top center no-repeat transparent;
}

.wildBanner .placeholder {
	position: relative;
}

.wildBanner .placeholder .banner-video {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 3.75%;
	width: 72.5%;
	height: 100%;
	XXXbackground-color: #fcce03;
}

#yt {
    position: absolute;
    top: 50%;
    height: 130%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.wildBanner .placeholder img {
	position: relative;
	z-index: 2;
}


@media screen and (max-width: 979px) {
	/* WIDEBANNER */
	.wildBanner .banner { display: none; }
	.wildBanner .placeholder { height: auto !important }
}






/* Slide
--------------------------------------------------------------------------------*/
XXXbody { overflow-x: hidden; }

.slide {}

.slide.slide-min {
	max-height: 50% !important;
}

.slide .slide-bg {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	XXXopacity: 0.5;
	
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

.slide .slide-bg > div {
	position: absolute;
	top: -35px;
	right: -35px;
	bottom: -35px;
	left: -35px;
	width: calc(100% + 70px);
	height: calc(100% + 70px);
	
	background-position: center center;
	background-size: cover;
	
	-webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    transition: 0.75s;
	
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform: translateZ(-35px);
    -moz-transform: translateZ(-35px);
    transform: translateZ(-35px);
}

.slide:hover .slide-bg > div {
    -webkit-transform: translateZ(0px);
    -moz-transform: translateZ(0px);
    transform: translateZ(0px);
}

.slide-1 .slide-bg { background-color: #efefef; }
.slide-2 .slide-bg { background-color: #ffffff; }

.slide .slide-content {
	position: relative;
	height: 100%;
	z-index: 2;
	
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px
}
.slide .slide-content > div {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1 !important;
}

#overview-faster-than-ever .slide-content > div {
	width: 30%;
	left: 70%;
	top: 30%;
}

#overview-intuitiveness .slide-content > div {
	width: 40%;
	left: 60%;
	top: 40%;
}

#overview-architecture .slide-content > div {
	width: 40%;
	left: 0%;
	top: 50%;
}

#overview-performance .slide-content > div {
	width: 40%;
	left: 60%;
	top: 50%;
}

#overview-open-bim .slide-content > div {
	width: 40%;
	left: 0%;
	top: 40%;
	
	color: white !important;
}

@media (min-width:768px) and (max-width:979px) {}
@media (max-width: 767px) {
	.slide .slide-content {
		XXXbackground-color: rgba(255,255,255,0.75);
	}
	
	.slide .slide-content > div {
	}
	
	#overview-faster-than-ever .slide-content > div {
		width: 70%;
		left: 30%;
		top: 0%;
		-webkit-transform: scale(.85,.85);
		-ms-transform: scale(.85,.85);
		transform: scale(.85,.85);
	}
	
	#overview-performance .slide-content > div {
		width: 60%;
		left: 40%;
		top: 50%;
		-webkit-transform: translateY(-50%) scale(.85,.85);
		-ms-transform: translateY(-50%) scale(.85,.85);
		transform: translateY(-50%) scale(.85,.85);
	}
	
	#overview-architecture .slide-content > div {
		width: 60%;
		left: 0%;
		top: 70%;
		-webkit-transform: translateY(-50%) scale(.85,.85);
		-ms-transform: translateY(-50%) scale(.85,.85);
		transform: translateY(-50%) scale(.85,.85);
	}
	
	#overview-intuitiveness .slide-content > div {
		width: 60%;
		left: 40%;
		top: 10%;
		-webkit-transform: scale(.85,.85);
		-ms-transform: scale(.85,.85);
		transform: scale(.85,.85);
	}
	
	#overview-open-bim .slide-content > div {
		width: 100%;
		left: 0%;
		top: 0%;
		-webkit-transform: scale(.85,.85);
		-ms-transform: scale(.85,.85);
		transform: scale(.85,.85);
	}
}

/**/






/* Slider
--------------------------------------------------------------------------------*/
.slider {
	overflow: hidden;
	min-height: 500px;
	XXXbackground-color: rgba(255,0,0,0.05);
}

.slider > div {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	XXXopacity: 0.5;
	
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
	
	XXXbackground-color: rgba(0,0,255,0.05);
}

.slider .slide-bg,
.slider .slide-fg {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	
	XXXopacity: 0.5;
	
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

.slider .slide-bg { z-index: 1; }
.slider .slide-fg { z-index: 10; }

.slider .slide-bg > div,
.slider .slide-fg > div {
	width: 100%;
	height: 100%;
	
	background-position: center center;
	background-size: cover;
	
	-webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    transition: 0.75s;
	
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.slider:hover .slide-bg > div,
.slider:hover .slide-fg > div {
    -webkit-transform: translateZ(35px);
    -moz-transform: translateZ(35px);
    transform: translateZ(35px);
}

.slider .slide-content {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}
.slider .slide-content > div {
	position: absolute;
	width: 30%;
	height: 30%;
	top: 50%;
	left: 50%;
	
	-webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    transition: 0.75s;
	
    -webkit-transform: translate(-50%,-50%) rotateY(-10deg);
    -moz-transform: translate(-50%,-50%) rotateY(-10deg);
	transform: translate(-50%,-50%) rotateY(-10deg);
}

.slider:hover .slide-content > div {
	position: absolute;
	
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#test .slide-content > div {
	width: 20%;
	left: 80%;
	top: 20%;
}
/**/








.bannerStripe {
	XXXheight: 300px;
}

.bannerStripe .bannerStripe-banner {
	position: absolute;
	left: 0;
	width: 100%;
	background: url() top center no-repeat transparent;
}

.bannerStripe .bannerStripe-placeholder {
	position: relative;
}

.bannerStripe .bannerStripe-placeholder .banner-video {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 3.75%;
	width: 72.5%;
	height: 100%;
	XXXbackground-color: #fcce03;
}

@media (max-width:979px) {
	.bannerStripe .bannerStripe-banner {
		background-image: none !important;
	}
}












/*
--------------------------------------------------------------------------------*/
.play { display: block  !important; }
.pos_a_t { position: absolute  !important; }


.videos {
	position: relative;
	margin: 0 auto;
	
	XXXbackground-image: url('http://img.youtube.com/vi/fCT2aohTycw/maxresdefault.jpg');
	background-image: url('/images/archicad/19/panels.svg');
	background-position: top left;
	XXXbackground-size: contain;
	background-size: 1800px 450px;
	XXXbackground-repeat: no-repeat;
	
	box-sizing: border-box;
}




/* Feature Clips
--------------------------------------------------------------------------------*/
.feature-clips {}

.XXXfeature-clips li {
	min-height: 220px;
}


.clip {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	background: url("/img/video_play.png") no-repeat scroll center center rgba(0, 0, 0, 0);
	
	z-index: 2;
}


.feature-clip {
	position: absolute;
	XXXwidth: 100%;
}

.feature-clip canvas {
	width: 100%;
	*height: 100%;
}


.new-feature-clips .feature-clip .pos_r {
	height: 100%;
}

.new-feature-clips .feature-clip {
	XXXwidth: 23%;
	height: 250px;
	margin: 0;
	text-align: center;
	
	*border: 1px solid grey;
	*box-sizing: border-box;
	
	perspective: 500px;
	-webkit-perspective: 500px;
	
	*transition: all 0.3s;
	*-webkit-transition: all 0.3s;
}

.new-feature-clips .feature-clip a {
	box-shadow: inset 10px 10px 10px rgba(16,0,32,0.334), inset -10px -10px 10px rgba(16,0,32,0.334);
}
.new-feature-clips .feature-clip a:hover {
	box-shadow: none;
}

.new-feature-clips .feature-clip h5 {
	position: absolute;
	top: 60%;
	
	width: 80%;
	left: 10%;
	
	opacity: 1;
	
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	
	z-index: 1;
	
    text-shadow:
		-1px -1px 0 #ffffff,
		1px -1px 0 #ffffff,
		-1px 1px 0 #ffffff,
		1px 1px 0 #ffffff; 
}

.new-feature-clips .feature-clip h5.comingsoon {
	top: 35%;
	
	color: #ffffff;
	text-shadow: none; 
}


@media (min-width:768px) and (max-width:979px) {
	.new-feature-clips .feature-clip {
		width: 225px;
		height: 225px;
	}
	
	.new-feature-clips .feature-clip h5 {
		display: none;
	}
}
@media (max-width: 767px) {
	.new-feature-clips .feature-clip {
		width: 145px;
		height: 145px;
	}
	
	.new-feature-clips .feature-clip h5 {
		display: none;
	}
}






.shape-hover {
	display: inline-block;
	
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	
	transition-property: transform;
	-webkit-transition-property: transform;
	
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	
	z-index: 1;
}
.shape-hover:hover, .shape-hover:focus, .shape-hover:active {
	XXX-webkit-transform: scale(1.25);
	XXXtransform: scale(1.25);
	z-index: 2;
}
.shape-hover:hover h5, .shape-hover:focus h5, .shape-hover:active h5 {
	opacity: 0;
	z-index: 1;
}

/* grey filter */
.shape-hover canvas {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.shape-hover:hover canvas, .shape-hover:focus canvas, .shape-hover:active canvas {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
}







