html,body {
    min-height:100%;
    overflow-x:hidden;
}
body {
	background-color:#ffffff;
    position:relative;
}
img{
    max-height:580px;
}

/* Paragraph Styles*/

p{
	/*Defaults*/
	color:#686868; /*text colour*/
	font-family:Arial,Helvetica,sans-serif;
}
ul li span { 
	/*display: inline-block;
	width: 250px;*/
}
li{
	/*Defaults*/
	color:#686868; /*text colour*/
	font-family:Arial,Helvetica,sans-serif;
}
p.left{
	text-align:left;
}
p.main{
	border-style:solid;
	border-color:#E8E8E8;
	border-width:1px;
	border-radius:5px;
	color:#686868;
	margin:3px;
	/*display:inline;*/
	width:800px;
	/*height:600px;*/
	text-align:center;
	padding:6px
}
p.small{
	font-size:11px;
	color:#686868;
	text-align:center;
}
p.bott{
	font-size:11px;
	color:#686868;
	text-align:right;
}

p.title{
	font-size:18px;
	color:#686868;
	text-align:center;
}
p.top{
	border-style:none;
	border-color:#A0A0A0;
	color:#686868;
	border-width:1.5px;
	font-size:40px;
	margin-top:5px;
	margin-bottom:100px;
	padding:3px;
	width:auto;
	display:inline;
	letter-spacing:2px; /*letter spacing diff*/
}
#cont {
	border-style:solid;
	border-color:#E8E8E8;
	border-width:1px;
	border-radius:5px;
	color:#686868;
	margin:3px auto;
	/*display:inline;*/
	width:1000px;
	max-height:100%;
	text-align:center;
	padding:6px
    overflow-y:hidden;
}

/* Link Styles */

a:link {
	/* unvisited link */
	text-decoration:none;
	color:#686868;
}
a:visited {
	/* visited link */
	text-decoration:none;
	color:#686868;
} 
a:hover {
	/* mouse over link */
	color:#484848;
	text-decoration:underline;
}  
a:active {
	/* selected link */
	text-decoration:none; 
	color:#686868;
}

/* Image Gallery */

.img {
	text-decoration:none;
	padding:8px;
	border-radius:10px;
	list-style:none;
	border:1px solid #E8E8E8;
	display:block;
	margin:5px 0 5px;
	text-align:center;
	width:177px;
    height:177px;
	-moz-transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
	-moz-transform:scale(0.9);
	-webkit-transform:scale(0.9);
	-o-transform:scale(0.9);
	transform:scale(0.9);
}
.imgw {
    position:relative;
    top:50%;
    transform:translateY(-50%);
	text-align:center;
	max-height:177px;
	max-width:177px;
    width:auto;
    height:auto;
}

.img:hover {
	opacity:0.9;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

#gall{
	width:100%;
	overflow:hidden;
	max-width:800px;
	border-style:none;
	border-color:#E8E8E8;
	border-width:1px;
	border-radius:5px;
	color:#686868;
	margin:0px auto;
	width:800px;
	padding:0px;
	text-align:center;
}
#gall ul {
	width:1000%; /* No. of images * 100% */
	max-height:260px;
	overflow:hidden;
	position:relative;
	list-style:none;
	padding-left:0;
	text-align:center;
}
#gall ul li {
	float:left;
	width:10%;
	-moz-transform:scale(0.1);
	-webkit-transform:scale(0.1); /* translate(100%, 0) */
	-o-transform:scale(0.1);
	transform:scale(0.1);/*
	-moz-transition:all 1s ease;
	-webkit-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;*/
	opacity:0;
}
#gall ul li img {
    max-width:100%;
    height:250px;
}

#gall ul li a {
	position:absolute;
	left:3%;
	top:45%;
	background:rgba(255, 255, 255, 0.5);
	padding:10px 13px 10px 7px;
	border-radius:50%;
}

#gall ul li a:first-child {
	position:relative;
	left:auto;
	top:auto;
	background:auto;
	padding:0;
}
#gall ul li a:last-child {
	right:3%;
	left:auto;
	padding:10px 7px 10px 13px;
}

#gall ul li a:last-child span {
	border-top:15px solid transparent;
	border-left:30px solid rgba(0, 0, 0, 0.3);
	border-bottom:15px solid transparent;
	border-right:none;
}

#gall ul li a span {
	display:block;
	position:absolute;
	width:0;
	height:0;
	border-top:15px solid transparent;
	border-right:30px solid rgba(0, 0, 0, 0.3);
	border-bottom:15px solid transparent;
}
#gall li .medium{
    color:#484848;
	text-align:center;
    font-size:15px;
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	border-radius:3px;
	background:#ffffff;
	padding:5px;
    display: inline-block;
    position:relative;
    bottom:25px;
    z-index:2;
	font-weight:bold;
	text-decoration:none;
}

.docScroller {
	text-align:center;
	margin:0;
	max-width:800px;
	padding: 0;
	height:240px;;
  white-space: nowrap;
  overflow-y: hidden;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: mandatory;
  /* older spec implementation */
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);
}

.inside {
  border: 0px solid #f4ccbf;
  opacity: 0.95;
  width: 100%;
  margin: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.page {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  font-size: initial;
}


.docScroller ul {
	margin:0;
	list-style:none;
	padding:0;
} 
.docScroller li {
	float:left;
    position:relative;
	display:inline;
	height:190px;
}
.docScroller .orig {
    z-index:1;
} 
.docScroller .extra { 
    display: none;
	width:165px;
  white-space:normal;
}
.docScroller  li:hover .extra {
    border-style:solid;
    border-width:2px;
    border-color:#000000;
	color:#484848;
	background:#ffffff;
	padding:5px;
    display: inline-block;
    position:absolute;
    margin-top:-60px;
    margin-left:-89px;
	width:165px;
    z-index:5;
	text-decoration:none;
} 
/* Nav Bar */

#nav{
	font-family:Arial,Helvetica,sans-serif;
	text-align:center;
	font-weight:bold;
	list-style:none;
	width:660px;
	padding:0px;
	padding-top:13px;
	margin:0 auto;
}
#nav ul {
	margin:0;
	list-style:none;
	background:rgba(255,255,255,0);
	padding:0;
	position:absolute;
	left:-9999px;
} 
#nav li {
	float:left;
	position:relative;
	margin-right:10px; /*gap*/
}
#nav ul li{
	padding-top:0px;
	padding-bottom:0px;
	font-weight:normal;
	text-decoration:none;
	margin-bottom:0px;
	font-size:14px;
	z-index:99;
}
#nav a{
	text-decoration:none;
	color:#686868 ;
	background-color:#ffffff ;
	display:block;
	height:21px;
	width:120px;
	white-space:nowrap;
}
#nav a:link {
	/* unvisited link */
	background-color:#ffffff;
}
#nav a:hover {
	/* mouse over link */
	color:#484848 ;
	text-decoration:underline;
	background-color:#E8E8E8 ;
}  
#nav a:active {
	/* selected link */
	text-decoration:underline; 
	background-color:#ffff00;
}
#nav li:hover ul{
	left:0px;
}
#nav li:hover a{
	background:#E8E8E8 ;/*underline*/
}
/* Current page */
#nav a.main{
	background-color:#F0F0F0  ;
}
#nav li:hover a.main{
	background:#E8E8E8;
}
/* popups*/


.modal {
    position:absolute;
    top:80px;
    margin-left:-25px;
    display:block;
    width,height:auto;
}
iframe{
    border:0;
}
a.scroller{
	font-family:Arial,Helvetica,sans-serif;
	text-align:center;
	font-weight:bold;
    float:left;
	padding:0px;
	padding-top:5px;
	padding-bottom:3px;
	margin-bottom:3px;
    margin-left:19%;
    margin-right:19%;
	width:12%;
    margin-top:2px;
	text-decoration:none;
	color:#686868 ;
	background-color:#ffffff ;
	display:block;
	height:21px;
    border-radius:5px;
}
a.scroller:hover {
	/* mouse over link */
	color:#484848 ;
	text-decoration:underline;
	background-color:#E8E8E8 ;
}