@charset "UTF-8";
/* CSS Document */

body {
	margin: 0px;
	background-color: #111;
}

.mark{
	position: absolute;
	top: 20px;
	left: 30px;
	width: 165px;
	z-index: 5000;
}
.container {
	margin: 0px;
	padding: 0px auto 0px auto;
}

.content {
	width: 1024px;
	height: 768px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	background-color: #000;
}

.slideshow {
	width: 100%;
	height: 425px;
	margin: 0px;
}

.archive {
	width: 100%;
	height: 343px;
}

#past {
	width: 100%;
	height: 100%;
	list-style: none;
	display: inline;
	padding: 0px;
	margin: 0px;
}

#past li {
	float: left;
	text-decoration: none;
	width: 256px;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

.footer {
	width:1024px;
	height:50px;
	background-color:#000000;
	position: absolute;
	margin-top: -50px;	
	text-align: center;
	padding-top: 10px;
}

/* ARCHIVE STYLING
Thumbnail scroller jQuery plugin
scrollers styling
*/

.archive_thumb_desktop {
	width: 256px;
}



#thumbnail-scroller {
  width: 1024px;	
  height:343px;
  position:relative;
  margin:0px;
  overflow:hidden;
}

/* Create shadow effect on the left and right of container */
#thumbnail-scroller:before,
#thumbnail-scroller:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:-4px;
  width:4px;
  height:100%;
  box-shadow:0 0 4px black;
  z-index:10;
}

#thumbnail-scroller:after {
  left:auto;
  right:-4px;
}

#thumbnail-scroller #container_archive {
  position:absolute;
  top:0;
  left:0;
  margin:0px;
  width:1024px;
  height:343px;
}

#thumbnail-scroller figure {
  display:block;
  float:left;
  width:256px;
  height:343px;
  margin:0px;
  position:relative;
  overflow:hidden;
}

#thumbnail-scroller figcaption {
  display:block;
  position:absolute;
  height:25px;
  right:0;
  bottom:20px;
  left:0;
  background-color:black;
  font:italic normal 20px Arial,Sans-Serif;
  color:white;
  padding:2px;
  text-align:center;
  opacity:.8;
}

#thumbnail-scroller figure img {
  display:block;
  border:none;
  margin:0 0;
}

/* SLIDER - provided from http://www.slidesjs.com/ */

/*
	Slideshow
*/

#frame {
	position:relative;
	z-index:0;
	width:1024px;
	height:425px;
	top:0;
	left:0;
}


#slides {
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:1024px;
	overflow:hidden;
	position:relative;
	display:none;
}

.slide img {
	width: 1024px;
}

.slides_container {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.slides_container li {
	display: inline;
	margin: 0px;
}
/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:1024px;
	height:425px;
	display:block;
}

#container_archive {
	list-style: none;
	margin: 0px;
	padding: 0px;
	top: 0px;
}

#container_archive li{
	display: inline;
	margin: 0px;
}

/*
	Next/prev buttons
*/

#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:1035px;
	position:absolute;
	top:107px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}


/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	bottom:-35px;
	left:0;
	height:35px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:100%;
	font-size:1.7em;
	line-height:1.33;
	font: normal 11px Arial,Sans-Serif;
    color:white;
	border-top:1px solid #000;
	text-shadow:none;
}

.caption p{
	margin: 5px 0 0 15px;
}
.pagination {
	display: none !important;
}

.swipe{
	display: none;
}

@media only screen and (orientation: landscape) and (max-device-width: 1024px) {

body {
	margin: 0px;
	background-color: #000;
}

.archive_thumb_mobile {
	width: 1024px;
}

/**SWIPE**/

.swipe-wrap {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.swipe-wrap li {
	display: block;
	margin: 0px;
}

.caption_mobile {
	position: absolute;
	float: left;
	top: 160px;
	width: 100%;
	height: 40px;
	background:#000;
	background:rgba(0,0,0,.5);
	border-top:1px solid #000;
	color: #fff;
	opacity: .8;
	z-index: 500;
	font-size: 14px;
}

.caption_mobile p {
	font-family: Ariel, Sans-Serif;
	margin-left: 25px;
	margin-top: 10px;
}

.swipe {
  overflow: hidden;
  display: block;
  position: relative;
  height: 250px;
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:50%;
  position: relative;
}
.swipe-wrap img{
	width: 100%;
}

.swipe-wrap p {
	position: absolute;
}

/*******/

.archive {
	display: none;
}



.content {
	width: 1024px !important;
	height: 643px;
	margin-top: 0px;
}


#frame {
	position:relative;
	z-index:0;
	width:1024px;
	height:394px;
	top:0;
	left:0;
}

.slides_container div.slide {
	width:1024px;
	height:394px;
	display:block;
}

.slide img {
	height: 100%;
}

.slide {
	overflow: hidden;
}

#slides .prev {
	position:absolute;
	top:107px;
	left:10px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:985px;
	position:absolute;
	top:107px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

.caption {
	z-index:500;
	position:absolute;
	bottom:-80px;
	left:0;
	height:80px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:100%;
	font-size:1.7em;
	line-height:1.33;
    color:white;
	border-top:1px solid #000;
	text-shadow:none;
}

.caption p{
	margin:10px 0 0 25px;
}



}


@media only screen and (orientation: portrait) and (max-device-width: 768px) {

body {
	margin: 0px;
	background-color: #000;
}

.archive_thumb_mobile {
	width: 768px;
}

.container{
	width: 768px !important;
}

.content {
	width: 768px !important;
	height: 899px;
	margin: 0px;
}

/**SWIPE**/

.swipe-wrap {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.swipe-wrap li {
	display: block;
	margin: 0px;
}

.caption_mobile {
	position: absolute;
	float: left;
	top: 300px;
	width: 100%;
	height: 60px;
	background:#000;
	background:rgba(0,0,0,.5);
	border-top:1px solid #000;
	color: #fff;
	opacity: .8;
	z-index: 500;
	font-size: 16px;
}

.caption_mobile p {
	font-family: Ariel, Sans-Serif;
	margin-left: 25px;
	margin-top: 10px;
}

.swipe {
  overflow: hidden;
  display: block;
  position: relative;
  height: 399px;
  width: 768px;
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
.swipe-wrap img{
	width: 768px;
}

/*******/

.archive {
	display: none;
}

.footer {
	width: 768px;
}

#frame {
	position:relative;
	z-index:0;
	width:768px !important;
	max-width: 768px !important;
	height:500px;
	top:0;
	left:0;
}



.slide img {
	height: 100%;
}


.slides_container div.slide {
	width:768px !important;
	height:500px;
	display:block;
}

.slides_container {
	width: 768px;
}

#slides .prev {
	position:absolute;
	top:190px;
	left:35px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:700px;
	position:absolute;
	top:190px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

.caption {
	z-index:500;
	position:absolute;
	bottom:-80px;
	left:0;
	height:80px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:100%;
	font-size:1.7em;
	line-height:1.33;
    color:white;
	border-top:1px solid #000;
	text-shadow:none;
}

.caption p{
	margin:10px 0 0 25px;
}



}


@media only screen and (orientation: landscape) and (max-device-width: 480px) {

body {
	margin: 0px;
	background-color: #000;
}


.content {
	width: 480px;
	height: 320px;
	margin-top: 0px;
}



}


@media only screen and (orientation: portrait) and (max-device-width: 320px) {

body {
	margin: 0px;
	background-color: #000;
}


.content {
	width: 320px;
	height: 480px;
	margin-top: 0px;
}



}