/* Change media query min-width to min-device-width and max-width to max-device-width after testing,
/*   therefore the CSS will be device-dependent, i.e., not change if browser resizes.

/* Regular */
body {
  min-width: 980px;
  min-height:935px;
  /*background-color: #fefbd8;*/
}
#menu>li>a>span {
  width: 950px;
}
footer>div {
  width: 950px;
}
header .upPart > div {
  width:950px;
}
header .center {
  width: 950px;
}
.container_24 {
  width: 960px;
}
.container_24 .grid_16 {
  width:630px;
}
header {
  height: 356px;
}
header .center p {
  margin-top: 153px;
}

/* Tablet Screen Sizes */
@media only screen and (min-width: 768px) and (max-width: 979px) {
/* Resize the body */
body {
  min-width:767px;
  min-height:935px;
  /*background-color: #80ced6;*/
}
#menu>li>a>span {
  width: 737px;
}
footer>div {
  width: 737px;
}
header .upPart > div {
  width:737px;
}
header .center {
  width: 737px;
}
.container_24 {
  width: 747px;
}
.container_24 .grid_16 {
  width:630px;
}
header {
  height: 296px;
}
header .center p {
  margin-top: 100px;
}
h1 {
  margin-top:100px;
}
h1>a {
	background-size: 90% 90%;
	/*background-color: #fefbd8;*/
}
#content>ul {
	position: absolute;
	width: 100%;
	top: 106px;
	left: 0px;
	z-index: 100;
}
}

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Resize the body */
body {
  min-width: 479px;
  min-height:935px;
  /*background-color: #d5f4e6;*/
}
#menu>li>a>span {
  width: 449px;
}
footer>div {
  width: 449px;
}
header .upPart > div {
  width:449px;
}
header .center {
  width: 449px;
}
.container_24 {
  width: 459px;
}
.container_24 .grid_16 {
  width:428px;
}
header {
  height: 200px;
}
header .center p {
  margin-top: 52px;
}
h1 {
  margin-top:52px;
}
h1>a {
	background-size: 80% 80%;
}

#content>ul {
	position: absolute;
	width: 100%;
	top: 6px;
	left: 0px;
	z-index: 100;
}
#form1 input, #form1 textarea {
	width: 250px;
}
#form1 .success {
	width:229px;
}
}

/* Mobile Portrate Screen Sizes */
@media only screen and (max-width: 479px) {
/* Resize the body */
body {
  min-width: 320px;
  min-height:935px;
  /*background-color: #f18973;*/
}
#menu>li>a>span {
  width: 290px;
}
footer>div {
  width: 290px;
}
header .upPart > div {
  width:290px;
}
header .center {
  width: 290px;
}
.container_24 {
  width: 300px;
}
.container_24 .grid_16 {
  width:280px;
}
header {
  height: 200px;
}
header .center p {
  margin-top: 52px;
}
h1 {
  margin-top:52px;
}
h1>a {
	background-size: 70% 70%;
}
#form1 {
	height:270px;
}
fieldset {
	height: 270px;
}
#form1 input, #form1 textarea {
	width: 160px;
}
#form1 .success {
	width:138px;
}
}

/* Mobile Landscape or Portrate Screen Sizes */
@media only screen and (max-width: 767px) {


#content>ul {
	position: absolute;
	width: 100%;
	top: 6px;
	left: 0px;
	z-index: 100;
}
#menu>li {
  height:46px;
  background:url( "../images/menu_btn_small.png") repeat-x;
}
#menu>li>a>span {
  font:bold 14px/46px 'Lora', serif;
}
#menu>li>span {
  height: 46px;
  background:url( "../images/menu_btn_act_small.png") repeat-x;
}
.menu {
  margin-bottom: 50px;
}
#menu>li:first-child+li > a > span > strong {
	top:-15px;
}
#content>ul>li:first-child+li {
	top:189px;
	margin-top:46px;
	backgrounds: none;
}
#content>ul>li:first-child+li+li {
	top:235px;
	margin-top:46px;
	background: none;
}
#content>ul>li:first-child+li+li+li {
	top:281px;
	margin-top:46px;
	background: none;
}
#content>ul>li:first-child+li+li+li+li {
	top:327px;
	margin-top:46px;
	background: none;
}
#content>ul>li:first-child+li+li+li+li+li {
	top:373px;
	margin-top:46px;
	background: none;
}
#content>ul>li:first-child+li+li+li+li+li+li {
	margin-top:-23px;
	background: none;
	margin-bottom:65px;
}
#content>ul>li:first-child+li+li+li+li+li+li+li {
	margin-top:-23px;
	background: none;
	margin-bottom:85px;
}
}

/* Additional Styles */
.imgStretch {
  max-width: 100%;
  height: auto;
}

.login-panel {
  position: absolute;
  top: 20px;
  right: 0;
  width: 146px;
  height: auto;
  border: none;
  background-color:#CCC;
  background:url( "../images/menu_btn.png") repeat-x;
  border-radius:0 0 4px 4px;
  opacity: 0;
  z-index: 0;
	border-radius:0 0 4px 4px;
	background: #494949;
	background: -moz-linear-gradient(top, #494949 0%, #1c1c1c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #1c1c1c));
	background: -webkit-linear-gradient(top, #494949 0%, #1c1c1c 100%);
	background: -o-linear-gradient(top, #494949 0%, #1c1c1c 100%);
	background: -ms-linear-gradient(top, #494949 0%, #1c1c1c 100%);
	background: linear-gradient(to bottom, #494949 0%, #1c1c1c 100%);
	-webkit-box-shadow: 0.5px 1.5px 1px 0px rgba(0, 0, 0, 0.35);
	box-shadow:  0.5px 1.5px 1px 0px rgba(0, 0, 0, 0.35);
  text-align: left;
	padding-top: 8px;
	padding-left: 10px;
	}


header .follow-icon ul li label {
	font: 10px 'Arial', serif;
	color: #fff;
	text-transform:uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	z-index:12;
}
header .follow-icon ul li label:hover {
	color:#aaaaaa;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	z-index:13;
}

#login-toggle {
  display: none;
}
#login-toggle:checked ~ .login-panel {
  top: 0px;
  opacity: 1;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  cursor: auto;
  z-index: 999;
  transform: translateX(0%);
}

#login-toggle:checked ~ .follow-icon {
  opacity: 0;
  display: none;
  visibility: hidden;
  }

.login-close-btn {
  position: relative;
  font-family:sans-serif;
  display: inline;
  cursor: pointer;
  margin-top:0px;
  margin-left: 92px;
  width: 16px;
  height: 16px;
}
header .login-close-btn:hover {
	color:#aaaaaa;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#login-form {
  position: relative;
  margin-top:0px;
  margin-bottom:10px;
  margin-left: 0px;
  height: auto;
}

.login-input {
  width: 100px;
}