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

html, body { margin:0; padding:0; font:"Merriweather",serif }
body { -webkit-animation:androidbugfix infinite 1s } /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack */
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
.page-content { padding:0 1em 1em; max-width:64em; margin:auto; clear: both; }
.breadcrumbs { font-size:.75em; border-bottom:7px solid #eee; margin:0 -1.25em 1.5em; padding:1em 1.25em }
.breadcrumbs span { display:none }
@media(min-width:30em) { .breadcrumbs { line-height:3.75; padding:0 1.25em } }
@media(min-width:60em) { .breadcrumbs span { display:inline-block } }
a, a:active, a:visited { color:#000 }
a:visited { color:#c90 }
a:hover, a:focus { color:#666; text-decoration:none }

/* #### - slider css below - #### */

#slider-outer { max-width:54em; margin:auto; position:relative; line-height:1.75em; padding:1.25em } /* change padding to move arrows */
#slider { display:block; overflow:hidden;}
#slider-outer .slide-check { position:absolute; left:-9999px }

#slider .slides { width:500% } /* #### (slides x 100) #### */
#slider .slides > div { width:20%; /* #### (100 / slides) #### */
	float:left; overflow:hidden; position:relative; 
	-webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
	-webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out
	}
.test-p{font-family: "Merriweather",serif; font-size:18px; color:#fff; padding-top:15px; text-align:center;}


#slider-outer .arrows { font:1em/2em Arial; text-indent:0.1875em; text-align:center; position:absolute; display:none; z-index:9999; 
	/*bottom:111px;*/ bottom:455px; color:#fff; /*background:#222;*/ width:2em; /*border-radius:2em; border:3px solid #fff;*/ cursor:pointer; /*box-shadow:0 0 0 1px rgb(153,153,153)*/
	}
#slider-outer .arrows:hover { /*background:#666;*/ color:#1fc055; }

/* #### - define ids of checked buttons/arrows here - #### */
#btn-goto-first:checked ~ #arrow-1, 
#btn-1:checked ~ #arrow-2, 
#btn-2:checked ~ #arrow-3,
#btn-3:checked ~ #arrow-4, 
#btn-4:checked ~ #arrow-5, 
#btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
right:-25px; display:block;
	}

/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
#btn-2:checked ~ #arrow-1, 
#btn-3:checked ~ #arrow-2,
#btn-4:checked ~ #arrow-3, 
#btn-5:checked ~ #arrow-4, 
#btn-1:checked ~ #arrow-5 { /* #btn-1 always goes to last arrow */
	left:-25px; display:block; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1)
	}

/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */
#slider-outer #btn-1:checked ~ #slider .slides > div, #slider #btn-goto-first:checked ~ #slider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
#slider-outer #btn-2:checked ~ #slider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }
#slider-outer #btn-3:checked ~ #slider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }
#slider-outer #btn-4:checked ~ #slider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }
#slider-outer #btn-5:checked ~ #slider .slides > div, #slider #btn-goto-last:checked ~ #slider .slides > div { -webkit-transform:translate(-400%,0); -ms-transform:translate(-400%,0); transform:translate(-400%,0) }


/* - #### custom styles for slide content - #### */
#slider .slides > div > div { font-size:0.875em; padding:1.25em 2em }
#slider .slides img { float:left; margin-top:0.25em; margin-right:1em }
#slider .slides .title { display:inline-block; margin-bottom:0.75em }
#slider .slides .num { float:right; font-size:0.625em; color:#999 }
#slider .slides .more { text-align:center; font-family: "Merriweather",serif; font-size:18px; color:#7d9db6;}



@media ( max-width:30em ) { /* #### - make better use of space at 480px (480/16=30 - 16px being default browser font-size) - #### */
	#slider-outer { font-size:0.9375em; line-height:1.5em; padding:0 0 1.125em 0 }
	#slider .slides > div > div { padding:1em 0.75em 1.25em }
	#slider .slides .more { text-align:center }
}






/*css*/
@import url(http://web.archive.org/web/20211224064921cs_/http://fonts.googleapis.com/css?family=Varela+Round);
html,
body {
  /*background: #333 url("http://web.archive.org/web/20211224064921im_/http://codepen.io/images/classy_fabric.png");*/
}

.slides {
  padding: 0;
  width: 609px;
  height: 540px;
  display: block;
  margin: 0 auto;
  position: relative;
}

.slides * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slides input {
  display: none;
}

.slide-container {
  display: block;
}

.slide1 {
  top: 0;
  opacity: 0;
  width: 609px;
  height: 420px;
  display: block;
  position: absolute;
  transform: scale(0);
  transition: none;
 
  
}

.slide1 img {
  width: 100%;
  height: 100%;
}

.nav label {
  width: 200px;
  height: 100%;
  display: none;
  position: absolute;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #000;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family:"Merriweather",serif;
  /*background-color: rgba(255, 255, 255, .3);*/
  text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide1:hover + .nav label {
  opacity: 0.5;
}

.nav label:hover {
  opacity: 1;
}

.nav .next {
  right: 0;
}

input:checked + .slide-container .slide1 {
  opacity: 1;
  transform: scale(1);
  transition: none;
}

input:checked + .slide-container .nav label {
  display: block;
}

.nav-dots {
  width: 100%;
  bottom: 9px;
  height: 11px;
  display: block;
  position: absolute;
  text-align: center;
}

.nav-dots .nav-dot {
  top: -5px;
  width: 11px;
  height: 11px;
  margin: 0 4px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
  background: rgba(0, 0, 0, 0.8);
}



/**/

.slides1{
  padding: 0;
  width: 609px;
  height: 540px;
  display: block;
  margin: 0 auto;
  position: relative;
}

.slides1 * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slides1 input {
  display: none;
}



/*
     FILE ARCHIVED ON 06:49:21 Dec 24, 2021 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 09:17:08 Sep 12, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.562
  exclusion.robots: 0.02
  exclusion.robots.policy: 0.011
  esindex: 0.01
  cdx.remote: 6.44
  LoadShardBlock: 1255.56 (3)
  PetaboxLoader3.datanode: 54.465 (4)
  load_resource: 84.029
  PetaboxLoader3.resolve: 61.062
*/