@font-face {
    font-family: 'FlamaBoldRegular';
    src: url('../fonts/flama-bold-webfont.eot');
    src: url('../fonts/flama-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-bold-webfont.woff') format('woff'),
         url('../fonts/flama-bold-webfont.ttf') format('truetype'),
         url('../fonts/flama-bold-webfont.svg#FlamaBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FlamaBookRegular';
    src: url('../fonts/flama-book-webfont.eot');
    src: url('../fonts/flama-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-book-webfont.woff') format('woff'),
         url('../fonts/flama-book-webfont.ttf') format('truetype'),
         url('../fonts/flama-book-webfont.svg#FlamaBookRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FlamaBookItalicRegular';
    src: url('../fonts/flama-bookitalic-webfont.eot');
    src: url('../fonts/flama-bookitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-bookitalic-webfont.woff') format('woff'),
         url('../fonts/flama-bookitalic-webfont.ttf') format('truetype'),
         url('../fonts/flama-bookitalic-webfont.svg#FlamaBookItalicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
	font-family: 'FlamaBookRegular', Arial, Helvetica, sans-serif;
	color: #ffffff;
}

body {
	background-color: #F8931D;
	width:100%;
	height:100%;
}

div.clear {
	clear: both;
	height: 1px;
}

#background {
	background-image: url('../images/background980.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	width:100%;
	height:100%;
}

#contents {
	width:840px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

#slogan {
	font-family: 'FlamaBookRegular', Arial, Helvetica, sans-serif;
	font-size: 28px;
	height: 94px;
}

#slogan b {
	font-family: 'FlamaBoldRegular', Arial, Helvetica, sans-serif;
	font-size: 34px;
}

.sitetext {
	font-family: 'FlamaBookRegular', Arial, Helvetica, sans-serif;
	font-size: 15px;
}

.sitetext a {
	text-decoration: none;
}

.sitetext a:hover {
	text-decoration: none;
	color: #684b1c;
}

.sitetextbold {
	font-family: 'FlamaBoldRegular', Arial, Helvetica, sans-serif;
	font-size: 15px;
}

.sitelink {
	font-family: 'FlamaBoldRegular', Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-decoration: none;
}

.sitelink:hover {
	text-decoration: none;
	color: #684b1c;
}

.footer {
	font-family: 'FlamaBoldRegular', Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	height: 50px;
}

.footer b {
	font-family: 'FlamaBoldRegular', Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
}

#logo {
	width: 324px;
	padding-top: 50px;
	height: 190px;
}

#details {
	height: 500px;
	overflow: hidden;
}

#details-left {
	float: left;
}

#details-right {
	float: right;
	position: relative; 
	width: 500px;
	height:480px;
	margin-right: 20px;
	overflow: hidden;
}

.slideshow-image {
	position:absolute;
	top:0x;
	left:0px; 
	width: 500px;
	height: 480px;
}

.slideshow-image img {
	width: 100%;
	height: 100%;
}

.slideshow-mask {
	position:absolute; 
	top:0px; 
	left:0px; 
	z-index:100;
	width: 500px;
	height: 480px;
	background-image: url('../images/imagemask980.png');
	background-position: top center;
	background-repeat: no-repeat;
}

#details-description {
	margin-top:105px;
	height:140px;
}

#detail-links {
	height: 120px;
}

.link-item {
	height: 25px;
}

@media screen and (max-width: 900px) {
	#background {
		background-image: url('../images/background980mobile3.jpg');
		background-size: 900px 1160px;
		background-position: 50% 58px;
	}
	
	#contents {
		width: 100%;
		text-align: center;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 10px;
		box-shadow: 0px 4px 5px rgba(0,0,0,0.2);
	}
	
	#logo {
		height: 160px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 25px;
	}
	
	#slogan {
		height: 108px;
	}
	
	#details {
		height: auto;
		overflow: visible;
	}
	
	#details-right {
		float: none;
		margin: auto;
        width: 400px;
		height: 400px;
	}

	#details-left {
		float: none;
	}
	
	#details-description {
		margin-top: 20px;
		height: auto;
	}
	
	#detail-links {
		margin-top: 20px;
		height: auto;
	}
	
	#detail-contacts {
		margin-top: 20px;
	}
	
	.link-item {
		height: auto;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	
	.slideshow-mask {
        width: 400px;
		height: 400px;
		background-image: url('../images/imagemask980mobile.png');
		background-size: 400px 400px;
	}
	
	.slideshow-image {
		position:absolute;
		top:0px;
		left:0px; 
		bottom:0px;
		right:0px; 
		margin:auto;
		width: 100%;
		height: 100%;
	}

	.footer {
		margin-top: 20px;
		padding-bottom: 15px;
		height: auto;
	}
}

@media screen and (max-width: 600px) {
	#background {
		background-size: 787px 1015px;
		background-position: 50% 88px;
	}
	
	#details-right {
		width: 350px;
		height: 350px;
	}

	.slideshow-mask {
		width: 350px;
		height: 350px;
		background-size: 350px 350px;
	}
}

@media screen and (max-width: 450px) {
	#logo {
		padding-top: 20px;
		height: 128px;
	}

	#logo img {
		width: 280px;
		height: 113px;
	}	
	
	#slogan {
		font-size: 24px;
	}
	
	#slogan b {
		font-size: 30px;
	}

	#background {
		background-size: 720px 928px;
		background-position: 50% 68px;
	}
	
	#details-right {
		width: 320px;
		height: 320px;
	}

	.slideshow-mask {
		width: 320px;
		height: 320px;
		background-size: 320px 320px;
	}
	
	.footer, .footer b {
		font-size: 12px;
	}
}

@media screen and (max-width: 350px) {
	#logo {
		width: 260px;
		padding-top: 20px;
		height: 120px;
	}

	#logo img {
		width: 260px;
		height: 105px;
	}	
	
	#slogan {
		font-size: 22px;
		height: 92px;
	}
	
	#slogan b {
		font-size: 27px;
	}

	#background {
		background-size: 630px 812px;
		background-position: 50% 68px;
	}
	
	#details-right {
		width: 280px;
		height: 280px;
	}

	.slideshow-mask {
		width: 280px;
		height: 280px;
		background-size: 280px 280px;
	}
}