@font-face {
    font-family: 'OpenSans-Light';
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('fonts/OpenSans-Semibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Italic';
    src: url('fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* xmas */
/*
@keyframes snow {
    0% { background-position: 0px 0px, 300px 0px, 0px 0px }
    50% {}
    100% { background-position: 500px 1000px, 200px 300px, 300px 300px; }
}
*/

* { 
	padding: 0;
	margin: 0;
}
html, body { 
	height: 100%;
	font: normal 100% "OpenSans-Regular", arial, sans-serif; 
	color: #333;	
}
h1 {
	font: normal 200% "OpenSans-Regular", arial, sans-serif; 
	color: #333;
	margin-bottom: 0.75em;
}
h2 {
	font: normal 125% "OpenSans-Regular", arial, sans-serif; 
	color: #333;
	margin: 1em 0 0.5em;
}
h3 {
	font: normal 100% "OpenSans-Semibold", arial, sans-serif; 
	color: #333;
	margin: 0.5em 0 0 0;
}

p {
	margin-bottom: 1em;
	line-height: 1.5em;
}
p.map {
	font-size: 120%;
	margin-bottom: 1.5em;
}
p.map > a {
	padding-left: 20px;
	background: transparent url(images/icon_maps.png) left 4px no-repeat;	
}
p span.masse {
	padding-left: 24px;
	background: transparent url(images/icon_masse.png) left 7px no-repeat;	
}
p.map a::after,
p span.masse::after {
	content: "     ";
	white-space: pre;	
}
p span.teile {
	padding-left: 22px;
	background: transparent url(images/icon_teile.png) left 6px no-repeat;	
}
p span.micro {
	margin-right: 24px;
}
p span.web a {
	padding-left: 20px;
	background: transparent url(images/icon_web.png) left 8px no-repeat;	
}


p.de, p.en {
	width: 46%;
	margin-top: 1em;
	margin-bottom: 1.5em;
}
p.de {
	clear: both;
	float: left;
	
	padding-right: 3.5%;
	border-right: 1px solid #999;
	margin-right: 3.5%;
}
p.en {
	float: right;
}

a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #c00;
}

#site  { 
	width: 100%;
	height: auto !important;	
	height: 100%;
	min-height: 100%;
	overflow: hidden !important; 
	margin: 0 auto;
	background: #fff;

/* xmas */
/*
    background-color: #6b92b9;
    background-image: url("images/snowflakes1.png"), 
		url("images/snowflakes2.png"), 
		url("images/snowflakes3.png");
    -webkit-animation: snow 25s linear infinite;
    -moz-animation: snow 25s linear infinite;
    -ms-animation: snow 25s linear infinite;
    animation: snow 25s linear infinite;
*/
}

#banner {
	clear: both;
	float: left;	
	width: 100%;
	background: #fff url(images/banner-nationalbank-small.jpg) left center no-repeat;	
	background: #fff url(images/banner-wien-museum.jpg) left center no-repeat;	
	background: #fff url(images/banner-azw.jpg) left center no-repeat;	

	background-size: cover;	
	text-align: center;
}
.site-intro #banner {
	opacity: 0;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;	
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;		
	-webkit-animation-name: fadeIn;		
	-moz-animation-name: fadeIn;			
	animation-name: fadeIn;			
}
#banner h1 {
	font: normal 400% "OpenSans-Light", arial, sans-serif; 
	color: #fff;
	text-shadow: 2px 2px 2px #333;
	
	margin: 0;
	padding: 2em 0;	
	padding: 1em 0;	
}
#banner hr {
	width: 50%;
	margin: 16px auto 8px auto;
	border : 0;
	height: 1px; 
	background-image: linear-gradient(to left, transparent, #ccc, transparent);
}

#header {
	clear: both;
	float: left;
	width: 100%;
	padding: 2em 0;
	background-color: #333;
}

#logo {
	float: left;
	padding-left: 40px;
}
#logo p {
	font: normal 110% "OpenSans-Semibold", arial, sans-serif; 
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 0;
}
#navi {
	float: right;
	padding-right: 40px;
	padding-top: 2px;
}
ul#menu li {
	float: left;
	list-style: none;	
	margin-left: 0;
}
ul#menu li a {
	font: normal 85% "OpenSans-Semibold", arial, sans-serif; 
	color: #fff;	
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-left: 40px;
	padding: 0;
}

ul#menu li a.vienna:hover,
ul#menu li a.world:hover,
ul#menu li a.hochzeit:hover,
ul#menu li a.skulpturen:hover,
ul#menu li a.wall-art:hover,
ul#menu li a.specials:hover,
ul#menu li a.artwork:hover,
ul#menu li a.about:hover,
#site.page_buildings_vienna a.vienna,
#site.page_buildings_world a.world,
#site.page_buildings_world a.vienna,		/* für Bauwerke != vienna */
#site.page_hochzeit a.hochzeit,
#site.page_skulpturen a.skulpturen,
#site.page_wall-art a.wall-art,
#site.page_specials a.specials,
#site.page_artwork a.artwork,
#site.page_about a.about,
#site.page_presse a.presse,
#site.page_impressum a.impressum {
	color: #c00;
}

#suche {
	margin: 0 0 0 40px;
	text-align: right;
}
#suche input[type=text] {
	width: 100px;
	border: 0;
	border-bottom: 1px solid #ccc;
	background: transparent;
	font: normal 90% "OpenSans-Regular", arial, sans-serif; 	
	color: #fff;
	padding: 0 0 2px 0;
}
#suche input[type=submit] {
	width: 20px;
	height: 20px;
	border: 0;
	background: transparent url(images/icon-suche.png) no-repeat center center;
}


#content {
	clear: both;
	width: 800px;
	margin: 0 auto;
	padding-top: 40px;
}
#content a.pfeil {
	padding-left: 20px;
	background: transparent url(images/icon-link2.png) left 6px no-repeat;	
}
#content a.video {
	padding-left: 20px;
	background: transparent url(images/icon-video.png) left 6px no-repeat;	
	margin-bottom: 4px;
}

#content a.xs {
	padding-left: 24px;
	background: transparent url(images/icon-xs-modell.png) 4px 2px no-repeat;	
}
/*
#content a.email {
	padding-left: 24px;
	background: transparent url(images/icon-email.png) left 6px no-repeat;	
}
*/
#content a.email {
	display: inline-block;
	font: normal 100% "OpenSans-Regular", arial, sans-serif; 	
	color: #333;
	background: #f1f1f1;
	
	float: left;
	margin: 0;	
	padding: 1em;

	text-align: center;	
	
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;	
}
#content a.email:hover {
	cursor: pointer;
	color: #fff;
	background: #666;
}


#content span.checkbox {
	padding-left: 24px;
	background: transparent url(images/icon-checkbox.png) left 3px no-repeat;	
}
#content span.checkbox-checked {
	padding-left: 24px;
	background: transparent url(images/icon-checkbox-checked.png) left 3px no-repeat;	
}

hr.language {
	width: 75%;
	margin: 1.5em auto;
	border : 0;
	height: 1px; 
	background-image: linear-gradient(to left, #eee, #999, #eee);
}

#content ol {
	margin-left: 16px;
	padding-bottom: 1em;
}
#content ol li {
	color: #333;
	line-height: 1.5em;	
	margin-bottom: 8px;
}
#content ol li a {
	text-decoration: underline;
}

#buildings,
#buildings2 {
	clear: both;
	float: left;
	width: 100%;
	margin: 0;	
}
#buildings p,
#buildings2 p {
	font: normal 90% "OpenSans-Regular", arial, sans-serif; 
	margin-bottom: 0.5em;

	padding-left: 20px;
	background: transparent url(images/icon-link2.png) left 6px no-repeat;	
}
#buildings dl {
	float: left;
	width: 30%;
	margin: 0 3% 20px 0;
	background-color: #f1f1f1;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;	
}

#buildings2 dl {
	float: left;
	width: 47%;
	margin: 0 3% 20px 0;
	background-color: #f1f1f1;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;	
}


#buildings dl:hover,
#buildings2 dl:hover {
	background: #666;
	color: #fff;
}
#buildings dl a:hover,
#buildings2 dl a:hover {
	color: #fff;
}
#buildings dt,
#buildings2 dt {
	padding: 8px 8px 4px 8px;
}
#buildings dd,
#buildings2 dd {
	font-size: 100%;
	height: 2em;	
	padding-bottom: 2px;
	text-align: center;
}
#buildings dt img,
#buildings2 dt img {
	width: 100%;
}

#buildings dl.sparte {
	width: 47%;
	margin: 0 3% 20px 0;
}

#reports {
	clear: both;
	float: left;
	width: 100%;
	margin: 0;	
}
#reports dl {
	clear: both;
	float: left;
	width: 98%;
	margin: 0 0 1.5em 0;
	padding: 10px 1% 5px 1%;
	background: #f1f1f1;
		
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;	
}
#reports dl:hover {
	background: #ccc;
}
#reports dl a:hover {
	color: #333;
	background: #61b4c7;
	background: rgba(97,180,199,0.4);	
}
/* bei zwei Links */
#reports dl a.pfeil:hover {
	padding-left: 24px;
	background: transparent url(images/icon-link.png) left 4px no-repeat;	

	padding-left: 20px;
	background: transparent url(images/icon-link2.png) left 6px no-repeat;	
}
#reports dt {
	float: left;
	width: 15%;
	margin-right: 3%;
}
#reports dt img {
	width: 100%;
}
#reports dd {
	float: left;
	width: 80%;
}
#reports dd h2 {
	margin: 0 0 0.5em 0;
}
#reports dd p.link {
	padding-left: 20px;
	background: transparent url(images/icon-link2.png) left 6px no-repeat;	
	margin-bottom: 4px;
}
#reports dd p.video {
	padding-left: 20px;
	background: transparent url(images/icon-video.png) left 7px no-repeat;	
	margin-bottom: 4px;
}

span.limited-edition {
	float: left;
	margin-top: 1.5em;
	font: normal 90% "OpenSans-Regular", arial, sans-serif; 
	color: #333;
}
span.limited-edition:before {
    content: "";
    display: block;
    width: 25%;
    padding-top: 2px;
	border-top: 1px solid #999;
}

.objekt-bilder {
	clear: both;
	float: left;
	width: 45%;
	margin-right: 5%;	
}
.objekt-text {
	float: left;
	width: 50%;
}

dl.image {
	display: inline;
}
dl.left {
	float: left;
	margin-right: 2em;
	margin-bottom: 1em;
}
dl.image dt img {
	width: 250px;
}
dl.image dd {
	float: right;
	font-size: 75%;
	margin-bottom: 1em;
}

#twobuttons, #credits {
	clear: both;
	float: left;
	width: 100%;
	margin: 1em 0;	
}

#twobuttons a {
	display: inline-block;
	font: normal 100% "OpenSans-Regular", arial, sans-serif; 	
	color: #333;
	background: #f1f1f1;
	
/*	
	margin: 1em 1.5em 0 0;
	padding: 1em 2em;
*/	
	float: left;
	width: 30%;
	margin: 1em 3% 0 0;	
	padding: 1em 0;

	text-align: center;	
	
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;	
}
#twobuttons a:hover {
	cursor: pointer;
	color: #fff;
	background: #666;
}

#credits p {
	padding-top: 0.5em;
	border-top: 1px solid #999;
}

#footer {
	clear: both;
	float: left;
	width: 100%;
	height: 24px;
	margin-top: 2em;
	padding: 20px 0 24px 0;
	background-color: #333;
	text-align: center;
}

ul#menu li a {
	font: normal 85% "OpenSans-Semibold", arial, sans-serif; 
	color: #fff;	
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-left: 40px;
	padding: 0;
}


#footer a {
	font: normal 85% "OpenSans-Semibold", arial, sans-serif; 
	color: #fff;	
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 20px;
}
#footer a:hover {
	color: #c00;
}

/* architecture */
#pictures {
	clear: both;
	float: left;
}

a.large {
	float: left;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
}
a.large img {
	width: 100%;
}
a.small img {
	float: left;
	height: 80px;
	margin: 0 16px 20px 0;
}

/* wall-art & skulpturen */
a.object {
	clear: both;
	float: left;
	width: 45%;
	margin-top: 2em;
	margin-right: 5%;	
	margin-bottom: 1em;
}
a.object img {
	width: 100%;
}

#objects {
	width: 45%;
	
	float: left;
	margin-top: 2em;
}

@media screen and (max-width: 959px) {
	#banner h1 {
		font-size: 300%;
	}	

	#content {
		width: 90%;
	}	
	
/*
	.objekt-bilder {
		width: 100%;
		margin-right: 0;	
	}
	.objekt-text {
		width: 100%;
	}	
*/
		
	p.de, p.en {
		width: 100%;
		padding-right: 0;
		margin-right: 0;
		border-right: none;
	}
	p.de {
		padding-bottom: 1.5em; 
		border-bottom: 1px solid #999;
		margin-bottom: 1.5em;
	}
	p.en {	
		float: left;
		margin-top: 0;
	}
	
	#buildings dl {
		width: 47%;
		margin: 0 3% 20px 0;
	}	
	
	#twobuttons a {	
		width: 47%;
	}
}

@media screen and (max-width: 800px) {
	#logo {
		margin-bottom: 1em;
	}	
	ul#menu li {
		margin-bottom: 0.75em;
	}	
	ul#menu li:last-of-type {
		margin-bottom: 0;
	}	
}

@media screen and (max-width: 767px) {
	#banner h1 {
		font-size: 200%;
	}	
	
	dl.image dt img {
		width: 100%;
	}
	dl.image dd {
		float: left;
	}	
	
	a.object {
		width: 100%;
		margin-top: 2em;
		margin-bottom: 1em;
	}	
	#objects {
		width: 100%;
		margin-top: 1em;
	}	
}

@media screen and (max-width: 479px) {
	#banner h1 {
		font-size: 150%;
	}	
	
	#buildings dl,
	#buildings dl.sparte,
	#buildings2 dl {
		width: 100%;
		margin: 0 0 20px 0;
	}
	
	#twobuttons a {	
		width: 100%;
		margin-right: 0;			
	}	
}