body, html {
  /*take up all available height*/
  height: 100%;
}	
	
	/* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('img/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }
		
		h1 {
			font-family:'Roboto';
			font-weight:500;
			font-size: 2em;
			text-align:left;
			overflow:hidden;
			margin:0 auto;
		}
		
		h2 {
			font-family:'Roboto';
			font-weight:500;
			font-size: 1.2em;
			text-align:left;
			overflow:hidden;
			margin:0 auto;
		}
		
		p {
			font-family:'Roboto';
			font-weight:500;
			font-size: 0.8em;
			overflow:hidden;
			margin:0 auto;
		}
		
		a {text-decoration: none;}
		
		a:link {color: #000;}

		a:visited {color: #000;}

		a:hover {color: #000;}

		a:active {color: #000;}
		
		.hashtag {
			position:absolute;
			left: 0;
			top: 0;
			padding-top:75px;
			padding-left:13px;
			margin:0 auto;
			overflow:hidden;
		}
		
		.nav{
			position:fixed;
			bottom: 0;
			right:0;
			padding-bottom:10px;
			padding-right:10px;
			margin:0 auto;
		}
		
		.logo{
			position:absolute;
			top: 0;
			left:0;
			overflow:hidden;
			padding-top:15px;
			padding-left:5px;
			margin:0 auto;
			z-index:1;
		}

		
		img {
   		max-width: 100%;
    	min-width: 300px;
    	height: auto;
		}
	
	hr {border:1px solid black;}
	
.screenshot {
  float: left;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.screenshot > * {
  display: block;
}

.screenshot-caption {
  position: absolute;
  width: 90%;
  height: 100%;
  background: rgba(255,255,255,100);
  color: #000;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  font-family:'Roboto';
  font-weight:500;
  padding-top:30px;
  padding-left:35px;
  padding-right:60px;
  margin:0 auto;
}
.screenshot-caption h1 {
  color: white;
  font-family:'Roboto';
  font-weight:300;
  
}
.screenshot-caption a {
  display: table;
  margin: 0 auto;
  text-align: left;
  padding: 30px;
  color: white;
  text-decoration: none;
  font-family:'Roboto';
  font-weight:300;
}

.screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}

.screenshot-caption_top {
  top: -100%;
  left: 0;
}

.screenshot-caption_topRight {
  top: -100%;
  left: 100%;
}

.screenshot-caption_right {
  top: 0;
  left: 100%;
}

.screenshot-caption_bottomRight {
  top: 100%;
  left: 100%;
}

.screenshot-caption_bottom {
  top: 100%;
  left: 0;
}

.screenshot-caption_bottomLeft {
  top: 100%;
  left: -100%;
}

.screenshot-caption_left {
  top: 0;
  left: -100%;
}

.screenshot-caption_topLeft {
  top: -100%;
  left: -100%;
}

.screenshot:hover .screenshot-caption {
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.screenshot:hover .screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 1;
}
		
		@media only screen and (max-device-width: 480px) and (orientation: portrait) {
		
		.nav{
			position:absolute;
			bottom: 0;
			left:0;
			overflow:hidden;
			padding-bottom:10px;
			padding-left:10px;
			margin:0 auto;
		}
		
		.hashtag {
			position:absolute;
			left: 0;
			top: 0;
			padding-top:60px;
			padding-left:13px;
			margin:0 auto;
			overflow:hidden;
		}
		
		}
	
		@media screen and (max-device-width: 640px) and (orientation: landscape){
  		.nav{
			position:absolute;
			top:0;
			left:0;
			overflow:hidden;
			padding-top:100px;
			margin:0 auto;
		}
	
		}