/* http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
		*/
		*, *:after, *:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}



ul, li,section {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 5px;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}

		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		body{
			color: #666;
			font-family: Lato, sans-serif, helvetica, arial;
			font-size: 13px;
			line-height: 1;
			background:#f9f9f9
		}

		a {
			color: #36c;
			text-decoration: none;
		}

		a:focus {
			outline: thin dotted;
		}

		a:hover,
		a:active {
			outline: 0;
		}

		a:active,
		a:hover {
			color: #5c85d6;
		}

		h1 {
			clear: both;
			font-weight: 700;
			font-weight:normal;
			font-size: 28px;
			line-height: 40px;
			color:#000
		}
		h2{
			font-size:20px;
			margin-bottom:15px;
			color:#333;
		}
		.menu li{
			margin-bottom:5px;
		}
		p,li{
			line-height:17px;
		}
		p {
			margin-bottom: 15px;
		}
		
		.row{
			padding:20px 0;
		}
		
		.header,
		header{
			padding:15px 0 0 0;
		}
		.brand{
			font-size:24px;
			line-height:30px;
			font-weight:bold
		}
		input[type="text"]{
			width:100%;
			padding:5px 3px;
		}
		.btn{
			border-radius:4px;
			padding:0px 0px;
			font-weight:bold;
			display:block;
			text-align:center;
			color:#fff;
			background:#36c;
            font-size: 0.6em;
		}

		.btn:hover{
			background:#5c85d6;
			color:#fff;
		}

		.btn.primary{
			background:#ff8111;
		}
		.btn.primary:hover{
			background:#ff9333;
			color:#fff;
		}
		.large{
			border-radius:8px;
			font-size:20px;
			padding:5px 20px;
		}
    .photo{
     transition: 0.8s;
     	 opacity: 0.6;
			border-radius:2px;
			font-size:20px;
			width: 100%;
      border: 4px solid white;
		}
     .photo:hover{
      transition: 0.8s;
	 opacity: 1;
      border: 4px solid red;
      width: 120%;
      overflow: enabled;
      		}
		header{
			background:#fff;
			border:1px solid #ddd;
		}
		
		.photoGalleryBlock{
			//background:#000;
      //opacity: 0.8;
			text-align: left;  // center
      width: 100%;   // 100% to landscape
      overflow: hidden;
		}
		.largePic{
			padding:20px;
			min-height:320px;
			position:relative;
		}
		.largePic h3{
			position:absolute;
			width:90%;
			bottom:30px;
			left:0;
		}
		.largePic span{
			display:inline-block;
			overflow:hidden;
			text-overflow:ellipsis;
			text-align:center;
			font-size:16px;
			color:#fff;
			padding:5px 10px;
			border-radius:2px;
			background-color:rgba(0,0,0,.25)
		}
		.largePic a{
			height:44px;
			width:44px;
			position:absolute;
			display:block;
			top:50%;
			margin-top:-22px;
			overflow:hidden;
			text-indent:-100px;
		}
		.largePic .prev{
			left:10px;
			background:url(prev.png) no-repeat center center;
		}
		.largePic .next{
			right:10px;
			background:url(next.png) no-repeat center center;
		}
		.largePic img{
			max-width:100%;
		}
		.photoGalleryThumbs li{
			display:inline-block;  // inline-block;  ruby-base;
		//	margin:2px 2px 2px 2px;
      width: 60%;
		}
 
		.photoGalleryThumbs .thumb{
			display:block;
			border:1px solid #000;
		}
		.photoGalleryThumbs .thumb.active{
			border:1px solid #fff;
		}
		
		
		section{
			padding:0 10px;
		}
		section section{
			padding: 0;
		}
		.reset{
			list-style:none
		}
		.inline li{
			display:inline-block;
		}	
		
		footer{
			border-top:1px solid #ddd;
			padding:20px 0;
		}
@media only screen  and (min-width : 768px) {
		[class*='col-'] {
		float: left;
		padding-right: 20px; /* column-space */
	}

	.grid {
		width: 100%;
		//max-width: 1140px;
		//min-width: 320px;
		margin: auto auto;
		overflow: hidden;
	}

	.grid:after {
		content: "";
		display: table;
		clear: both;
	}

	.grid-pad {
		padding-top: 20px;
		padding-left: 20px; /* grid-space to left */
		padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
	}

	.push-right {
		float: right;
	}

	/* Content Columns */

	.col-1-1 {
		width: 100%;
	}
	.col-2-3, .col-8-12 {
		width: 66.66%;
	}

	.col-1-2, .col-6-12 {
		width: 50%;
	}

	.col-1-3, .col-4-12 {
		width: 33.33%;
	}

	.col-1-4, .col-3-12 {
		width: 25%;
	}

	.col-1-5 {
		width: 20%;
	}

	.col-1-6, .col-2-12 {
		width: 16.667%;
	}

	.col-1-7 {
		width: 14.28%;
	}

	.col-1-8 {
		width: 12.5%;
	}

	.col-1-9 {
		width: 11.1%;
	}

	.col-1-10 {
		width: 10%;
	}

	.col-1-11 {
		width: 9.09%;
	}

	.col-1-12 {
		width: 8.33%
	}

	/* Layout Columns */

	.col-11-12 {
		width: 91.66%
	}

	.col-10-12 {
		width: 83.333%;
	}

	.col-9-12 {
		width: 75%;
	}

	.col-5-12 {
		width: 41.66%;
	}

	.col-7-12 {
		width: 58.33%
	}



	/* Pushing blocks */

	.push-2-3, .push-8-12 {
		margin-left: 66.66%;
	}

	.push-1-2, .push-6-12 {
		margin-left: 50%;
	}

	.push-1-3, .push-4-12 {
		margin-left: 33.33%;
	}

	.push-1-4, .push-3-12 {
		margin-left: 25%;
	}

	.push-1-5 {
		margin-left: 20%;
	}

	.push-1-6, .push-2-12 {
		margin-left: 16.667%;
	}

	.push-1-7 {
		margin-left: 14.28%;
	}

	.push-1-8 {
		margin-left: 12.5%;
	}

	.push-1-9 {
		margin-left: 11.1%;
	}

	.push-1-10 {
		margin-left: 10%;
	}

	.push-1-11 {
		margin-left: 9.09%;
	}

	.push-1-12 {
		margin-left: 8.33%
	}
}
@media only screen  and (max-width : 768px) {
	section{
		padding:0;
	}
	.grid{
		padding:0 10px;
	}
	#overview{
		padding-top:0;
	}
	.header{
		text-align:center;
	}
	header p{
		display:none;
	}
	header h1{
		line-height:28px;
		margin-bottom:15px;
	}
	.photoGalleryBlock {
		margin-bottom:20px;
		margin-left:-10px;
		margin-right:-10px;
	}
}