@charset "UTF-8";

@media only screen and (min-width: 320px) {
	
#wrap,
#main {
	background-color:#191919;
}
#header {
	background-image:url(../graphics/ht_jsp_23_photo_indx_mob.png);
	background-size:82%;
}
#mainBlock h1 {
	font-size:1.05em;
	line-height:1.5em;
	letter-spacing:0.01em;
	color:#f6ce7f;
}
#mainBlock h1.nonComp {
	margin-bottom:1.6em;
}
#mainBlock p {
	color:#c9c9c9;
}
#mainBlock .intro p {
	text-align:center;
	margin-left:4%;
	margin-right:4%;
}
#mainBlock .here {
	margin-left:calc(4% + 1.25em);
}
#lightbox {
	width:92%;
	margin-left:4%;
}
#lightbox .gcell {
	position:relative;
	width:100%;
	text-align:center;
	margin-bottom: 1.75em;
	padding-bottom: 0;
}
#lightbox .revBack {
	background-color:#eee;
	display:inline-block;
	width:100%;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
#lightbox #trav.revBack {
	margin-top:1.75em;
}
#lightbox .heading {
	width:100%;
	text-align:center;
	display:inline-block;
	color:#f6ce7f;
}
#lightbox .heading p {
	font-size:1.6em;
	font-weight:bold;
	color:inherit;
	display:inline-block;
	margin-top:1em;
	margin-bottom:0.9em;
	font-style:italic;
	letter-spacing:0.05em;
}
#lightbox .heading.timeLine p {
	font-weight:normal;
	letter-spacing:0.1em;
	color:#ffd074;
}
#lightbox .heading.timeLine p::before,
#lightbox .heading.timeLine p::after {
	content:"...";
	margin-left:0.2em;
	margin-right:0.2em;
	vertical-align:1px;
}
#lightbox .revBack .heading p {
	color:#080808;
}
#lightbox .gcell .glink {
	position:absolute;
	bottom:0;
	padding-top:0.3em;
	padding-bottom:0.4em;
	background-color:rgba(0,0,0,0.5);
	border-bottom: 1px solid #444;
	width:calc(100% - 4px);
}
#lightbox .revBack .gcell {
	padding-left:4px;
	padding-right:4px;
}
#lightbox .revBack .gcell .glink {
	width:calc(100% - 8px);
}
#lightbox .revBack .gcell.sq .glink {
	width:calc(82% - 8px);
}

#lightbox .gcell .glink a {
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
}

#lightbox .gcell.sq div {
	width:82%;
	margin-left:9%;
}
#lightbox .gcell.sq .glink {
	width:calc(82% - 4px);
}
#lightbox .gcell div:first-child {
	background-size:cover;
}
#lightbox .gcell div:first-child::before {
	padding-top: 67%;
}
#lightbox .gcell.sq div:first-child::before {
	padding-top: 100%;
}

#foot {
	background-color:#222;
}
#mainBlock {
	border-bottom:1px solid #555;
}
#menuButt {
	border-color:#666;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

}


@media only screen and (min-width: 360px) {

#mainBlock h1 {
	font-size:1.1em;
}
#lightbox .gcell .glink a {
	font-size:1.3em;
}

}


@media only screen and (min-width: 414px) {

#mainBlock h1 {
	font-size:1.2em;
}
#mainBlock .intro p {
	margin-left:3.5%;
	margin-right:3.5%;
}
#lightbox .gcell .glink a {
	font-size:1.4em;
}

}


@media only screen and (min-width: 481px) {


}


@media only screen and (min-width: 640px) {

#header {
	background-image:url(../graphics/ht_jsp_23_photo_indx.png);
}
#mainBlock .intro p,
#mainBlock h1.nonComp {
	margin-left:8%;
	margin-right:8%;
}
#lightbox .revBack {
	width:96%;
	margin-left:2%;
}
#lightbox .gcell {
	width:50%;
}
#lightbox .gcell div {
	width:80%;
}
#lightbox .gcell.sq div {
	width:64%;
	margin-left:18%;
}
#lightbox .gcell .glink,
#lightbox .gcell.sq .glink {
  width: 100%;
	margin-left:10%;
	margin-left:0;
	padding-top: 9px;
	background: transparent;
	border: 0;
	position: relative;
}
#lightbox .revBack .gcell {
	padding-left:2px;
	padding-right:2px;
}
#lightbox .revBack .gcell .glink,
#lightbox .revBack .gcell.sq .glink {
	width:100%;
}
#lightbox .gcell .glink a {
	font-size:1.2em;
	color:#ddd;
}
#lightbox .revBack .gcell .glink a {
	color:#111;
}
#mainBlock .here {
	margin-left:10%;
}
#menuButt {
	background-color:#444;
	border-top:none;
	border-bottom:none;
}

}


@media only screen and (min-width: 732px) {
	

}


@media only screen and (min-width: 768px) {

#main {
	margin-top:12px;
}
#mainBlock {
	border-bottom:none;
}
#mainBlock h1 {
	font-size:1.4em;
	line-height:1.4em;
	letter-spacing:0.05em;
	margin-top:-0.5em;
}
#mainBlock .intro p {
	text-align:justify;
	margin-left:6%;
	margin-right:6%;
}
#lightbox {
		border-bottom: 1px solid #444;
	margin-bottom:1.5em;
}
#lightbox .gcell {
	width:25%;
	margin-bottom:0;
}
#lightbox .gcell.sq {
	margin-top:-5px;
}
#lightbox .gcell div {
	width:84%;
}
#lightbox .gcell div:first-child::before {
	padding-top: 70%;
}
#lightbox .gcell .glink {
	width:100%;
	padding-top:9px;
	padding-bottom:9px;
	margin-left:0;
	background:transparent;
	position:relative;
}
#lightbox .gcell.sq div:first-child {
	width:67%;
	margin-left:16%;
}
#lightbox .gcell.sq .glink {
	width:100%;
	margin-left:initial;
}
#lightbox .gcell .glink a {
	font-size:1em;
}
#lightbox .revBack .gcell .glink a {
	color:#ddd;
}
#lightbox .revBack {
	width:100%;
	margin-left:0;
	background:transparent;
}
#lightbox #trav.revBack {
	margin-top:initial;
}
#lightbox .heading {
	width:96%;
	margin-left:2%;
	border-top: 1px solid #404040;
}
#lightbox .heading p {
	font-size:1.4em;
	margin-bottom:0.4em;
}
#lightbox .heading.timeLine p {
	font-weight:bold;
	color:inherit;
}
#lightbox .revBack .heading p {
	color:inherit;
}
#nav {
	top:144px;
}

}


@media only screen and (min-width: 961px) {

#header {
	background-size:initial;
}
#mainBlock h1.nonComp {
	margin-left:5%;
	margin-right:7.5%;
}
#mainBlock .intro p {
	margin-left:calc(6% - 14px);
	margin-right:4.3%;
	margin-bottom:1.5em;
	border-left-color:#555;
}
#lightbox .heading p {
	margin-top:0.8em;
}
#nav .container {
	background:transparent;
}
#nav li.button a,
#nav li.buttonB a,
#nav li.buttonH a {
	color:#aab;
}
#nav .dropdown {
	border-left-color: #777;
}
#nav .dropdown li a {
	color:#999;
}

}


@media only screen and (min-width: 1025px) {

#header {
	background-size:50%;
}

}


@media only screen and (min-width: 1081px) {
	
#header {
	background-position-x:50%;
}
#mainBlock {
	margin-left:13%;
	margin-right:10%;
}
#mainBlock h1.nonComp {
	margin-left:4%;
	font-size:1.4em;
}
#mainBlock .intro p {
	margin-left:calc(6% - 19px);
}
#lightbox .gcell.sq {
	margin-top:-6px;
}

}


@media only screen and (min-width: 1201px) {
	
#lightbox .gcell.sq {
	margin-top:-9px;
}

}


@media only screen and (min-width: 1281px) {

#mainBlock h1.nonComp {
	/* [disabled]font-size:1.4em; */
}
#nav {
	top:206px;
	top:192px;
}
#lightbox .gcell.sq {
	margin-top:-11px;
}

}


@media only screen and (min-width: 320px) and (max-width: 568px) and (orientation: landscape) {

#header {
	background-image:url(../graphics/ht_jsp_23_photo_indx.png);
}
#mainBlock .intro p,
#mainBlock h1.nonComp {
	margin-left:7%;
	margin-right:7%;
}
#lightbox {
	width:96%;
	margin-left:2%;
}
#lightbox .revBack {
	width:96%;
	margin-left:2%;
}
#lightbox .gcell {
	width:50%;
}
#lightbox .gcell div {
	width:80%;
}
#lightbox .gcell.sq div {
	width:64%;
	margin-left:18%;
}
#lightbox .gcell .glink,
#lightbox .gcell.sq .glink {
	width:calc(80% - 4px);
  width: 100%;
	margin-left:10%;
	margin-left:0;
	padding-top: 9px;
	background: transparent;
	border: 0;
	position: relative;
}
#lightbox .gcell .glink a {
	font-size:1.2em;
	color:#ddd;
}
#lightbox .revBack .gcell .glink a {
	color:#111;
}
#mainBlock .here {
	margin-left:10%;
}
#menuButt {
	background-color:#444;
	border-top:none;
	border-bottom:none;
}

}

@media screen and (-webkit-min-device-pixel-ratio:0) { 

}