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

}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	font-size:14px;
	background: black;
	background: url('img/bg_body.png');
	padding-bottom: 65px;
}

img {border: none;}
a {outline: none;}
.hide {display: none;}

.container {
	max-width:760px; 
	margin:0 auto;
	position: relative;
}

.navbar-outer {
	border-bottom: 7px solid #d3d3d3;
	background: #d3d3d3 url('img/bg_nav.png') repeat-x center 0;
	font-family: 'harrybold', sans-serif;
}
.navbar-outer ul {
	height:66px;
	padding:0;
	margin: 0; 
	font-size: 14px;
}

.navbar-outer .brand {
	float: left;
	margin: 0;
}
.navbar-outer .brand img {
	display: block;
	position: relative;
	left: -10px;
}



.navbar-outer ul li {
	display: block;
	float: left;
	line-height:66px;
	width: 19%;
	padding: 0;
	margin: 0;
}


.navbar-outer ul li a {
	display: block;
	background: url('img/nav_off.png') repeat-x;
	text-align: center;
	color: #6b6b6b;
	text-decoration: none;

	border-left: 1px solid #9f9f9f;
	border-right: 1px solid #9f9f9f;
}

.navbar-outer ul li a:hover,
.navbar-outer ul li.active a {
	background: url('img/nav_flea.png') no-repeat center bottom,
				url('img/nav_on.png') repeat-x 0 0;
	color: #FFF;
	text-shadow: -2px 2px 4px rgba(150, 150, 150, 1);
	border-left: 1px solid #9f9f9f;
}









#main {
	background: #FFFFFF url('img/bg_content.png') repeat-x 0 bottom;
	clear: both;
	position: relative;
}



.arrow-left {
	width: 30px;
	height: 30px;
	background: url('img/arrows.png') no-repeat 0 0;
	text-indent: -999px;
	overflow: hidden;
	position: absolute;
	z-index: 999;
	top:300px;
	left: -45px;
}
.arrow-right {
	width: 30px;
	height: 30px;
	background: url('img/arrows.png') no-repeat 0 -30px;
	text-indent: -999px;
	overflow: hidden;
	position: absolute;
	z-index: 999;
	top:300px;
	right: -45px;
}

#lang {
	padding: 8px 0 0 0;
	border-top: 1px solid #e1e1e0;
	background: url('img/bg_lang.png') repeat-x;
	text-align: right;
	min-height: 10px;
}

#lang a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-decoration: none;
	color: #888888;
}
#lang a.active {
	color: #179097;
}
#lang img {
	vertical-align: middle;
}

#footer {
	position: fixed;
	left: 0;
	bottom: -1px;
	width: 100%;
	padding: 10px 0;
	background-color: #000;
	text-align: center;
	color: #296ea9;
	font-size:12px;
	border-top: 4px solid #296ea9;
}
#footer a {
	color: #296ea9;
}
#footer .facebook {
	vertical-align: middle;
	margin-left: 22px;
}





#slide-wrap {
	max-width: 760px;
	height: 585px;/*605px;*/
	overflow: hidden;
	padding-top: 20px;
}

#slide-wrap .slide-cont {
	position: relative;
}

#slide-wrap .frame {
	max-width: 760px;
	width: 100%;
	overflow: auto;
}

.frame > img {
  width: 100%;
    height: auto;
	display: block;
}


.frame ul {
	margin: 0;
	margin-right: 10px;
	padding: 0;
	list-style: none;
	width: 305px;
	float: right;
}
.frame ul li {
	margin: 0;
	padding: 0;
	width: 140px;
	height: 92px;
	float: left;
	overflow: hidden;
	margin: 0 10px 13px 0;
	cursor: pointer;
	position: relative;

}
.frame ul li span {
	position: absolute;
	z-index: 30;
	width: 128px;
	height: 80px;
	display: none;

}
.frame ul li.active span {
	display: block;
}
.frame ul span {
	border: 6px solid grey;
}
.frame ul.gris span {
	border-color: grey;
}
.frame ul.verde span {
	border-color: #316a70 !important;
}
.frame ul.burdeos span {
	border-color: #ab1563;
}
.frame ul.azul span {
	border-color: #1f5289;
}
.frame ul.azulgris span {
	border-color: #2a435f;
}

.frame ul li .one {
	display: block;
}
.frame ul li .two {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	display: none;
}


.frame .viewer  {
	float: left;
	margin-left: 20px;
	text-align: center;
}
.frame .pic {
	float: left;
	margin-left: 20px;
	width: 410px;
	text-align: center;
}
.frame .pic {
	padding-bottom: 35px;
}





@media only screen and (max-width : 855px) {

	#slide-wrap {
		padding-top: 50px;
	}
	.arrow-left {
		top:10px;
		left: 10px;
	}
	.arrow-right {
		top:10px;
		right: 10px;
	}

}



@media only screen and (max-width : 755px) {

	.frame ul {
		margin-right: 0;
		padding: 0;
		width: 100%;
		float: none;
	}

	.frame .viewer  {
		float: none;
		margin: 20px auto;
	}

	.frame .viewer  img {
		width: 100%;
	}


	.frame .pic {
		float: none;
		margin: 20px auto;
		width: 100%;
		text-align: center;
	}

	.frame .pic img {
		width: 100%;
	}


}




@media only screen and (max-width : 800px) {

	.navbar-outer {
		background: #d3d3d3 url('img/bg_nav.png') repeat-x left 0;
		border-bottom-width: 3px;
	}
	.navbar-outer .brand {
		float: none;
	}
	.navbar-outer .brand img {
		left: -0;
		margin: 0 auto;
	}
	.navbar-outer ul {
		height:33px;
		font-size: 12px;
	}
	.navbar-outer ul li {
		line-height:33px;
		width: 25%;
	}


	#main {
		padding-left: 15px;
		padding-right: 15px;
	}

	.navbar-outer{
		padding-left: 15px;
		padding-right: 15px;
	}
	.arrow-left {
		left: 0;
	}
	.arrow-right {
		right: 0;
	}


}