/* ============================================================
  NAVIGATION
============================================================ */
nav ul {
	list-style-type: none;
	margin: 0 0 30px 0;
	padding: 0;
	text-align: center;
}
nav ul li {
	display: inline-block;
	margin-bottom: 4px;
}
nav ul li a {
	display: block;
	padding: 5px 20px;
	color: #fff;
	background-color: #32c896;
}
nav ul li a:hover {
	color: #fff;
	background-color: #238b68;
}
nav ul li a.active {
	color: #fff;
	background-color: #238b68;
}
/* ============================================================
  GLOBAL
============================================================ */
.effects {
	padding-left: 15px;
}
.effects .img {
	position: relative;
	float: left;
	margin-bottom: 5px;
	width: 312px;
	overflow: hidden;
	border:solid 5px #8EC824;
	margin-bottom:60px;
}
.effects .img:nth-child(n) {
 margin-right: 50px;
}
.effects .img:first-child {
	margin-left: -15px;
}
.effects .img:last-child {
	margin-right: 0;
}
.effects .img img {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: auto;
}
.overlay {
	display: block;
	position: absolute;
	z-index: 20;
	background:url(../images/22.png) repeat;
	overflow: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
a.close-overlay {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
	width: 45px;
	height: 45px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 45px;
	text-align: center;
	background-color: #000;
	cursor: pointer;
}
a.close-overlay.hidden {
	display: none;
}
a.expand {
	display: block;
	position: absolute;
	z-index: 100;
	width: 157px;
	height: 157px;

	text-align: center;

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
}
/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
}
#effect-1 .overlay a.expand {
	left: 0;
	right: 0;
	bottom: 40%;
	margin: 0 auto -30px auto;
}
.img.hover .overlay {
	height: 100%;
}
/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
#effect-2 .overlay {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
}
#effect-2 .overlay a.expand {
	left: 0;
	right: 0;
	top: 50%;
	margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
	height: 100%;
}
/* ============================================================
  EFFECT 3 - SLIDE IN LEFT
============================================================ */
#effect-3 .overlay {
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	height: 100%;
}
#effect-3 .overlay a.expand {
	top: 0;
	bottom: 0;
	left: 50%;
	margin: auto 0 auto -30px;
}
#effect-3 .img.hover .overlay {
	width: 100%;
}
/* ============================================================
  EFFECT 4 - SLIDE IN RIGHT
============================================================ */
#effect-4 .overlay {
	top: 0;
	bottom: 0;
	right: 0;
	width: 0;
	height: 100%;
}
#effect-4 .overlay a.expand {
	top: 0;
	bottom: 0;
	right: 50%;
	margin: auto -30px auto 0;
}
#effect-4 .img {
	overflow: hidden;
}
#effect-4 .img.hover .overlay {
	width: 100%;
}
/* ============================================================
  EFFECT 5 - ICON BORDER ANIMATE
============================================================ */
#effect-5 .overlay {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
#effect-5 .overlay a.expand {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#effect-5 .img.hover .overlay {
	opacity: 1;
}
#effect-5 .img.hover .overlay a.expand {
	width: 60px;
	height: 60px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
}
/* ============================================================
  EFFECT 6 - ICON BOUNCE IN
============================================================ */
#effect-6 .overlay {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
#effect-6 .overlay a.expand {
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#effect-6 .img.hover .overlay {
	opacity: 1;
}
#effect-6 .img.hover .overlay a.expand {
	top: 50%;
	margin-top: -30px;
	opacity: 1;
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media only screen and (max-width: 1100px) {
 .effects {
 padding-left: 5px;
}
 .effects .img {
 width: 50%;
}
 .effects .img:nth-child(n) {
 margin-right: 5px;
}
 .effects .img:first-child {
 margin-left: 0;
}
 .effects .img:nth-child(2n-1) {
 margin-left: -5px;
}
 .effects .img:nth-child(2n) {
 margin-right: 0;
}
 .effects .img:last-child {
 margin-right: 0;
}
}
@media only screen and (max-width: 520px) {
 .effects .img {
 width: 100%;
}
 .effects .img:nth-child(n) {
 margin-right: 0;
}
 .effects .img:first-child {
 margin-left: 0;
}
 .effects .img:nth-child(2n-1) {
 margin-left: 0;
}
 .effects .img:nth-child(2n) {
 margin-right: 0;
}
 .effects .img:last-child {
 margin-right: 0;
}
 .effects .img img {
 margin: 0 auto;
}
}



#sc_drag_area_protector div{
  border-radius: 0px 0px;
  margin:0;
  /*max-width:100%;*/
  min-width: 1px;
}

#sc_drag_area {
  height:100px;
  left:150px;
  position: absolute;
  top:100px;
  width:250px;
  z-index: 9999;
}
#sc_drag_container {
  border: 1px solid #0000FF;
  
  cursor: crosshair ;
  
  height: 100% ;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative ;
  width: 100%;
  z-index:9997;
}
#sc_drag_area_protector {
  border-radius: 0px 0px;
  display: block;
  height:100%;
  left:0;
  top:0;
  position: fixed;
  width:100%;
  z-index:8500;
  margin: 0;
  
  min-width: 1px;
  overflow: hidden;
}
#sc_drag_size {
  background-color: rgba(44, 44, 44, 0.5);
  color:#ffffff;
  font-family: arial,san-serif;
  font-weight:bold;
  font-size:12px;
  height:18px;
  min-width:65px !important;
  left:0px;
  line-height:18px;
  position:absolute;
  padding-left:4px;
  padding-right:4px;
  text-align:center;
  top: -18px;
  white-space: nowrap;
  z-index:9998;
}
#sc_drag_cancel, #sc_drag_crop {
  background-color: rgba(0, 0, 0, 0.5);
  cursor:pointer;
  color:#ffffff;
  font-size:12px;
  font-family: arial,san-serif;
  font-weight:bold;
  height:38px;
  line-height:22px;
  position:absolute ;
  z-index:9998;
  text-indent: -10000;
  background-repeat: no-repeat;
}
#sc_drag_crop {
  bottom:-50px;
  text-align: center;
  right:0px;
  min-width: 86px !important;
  padding: 0 0px;
  background-position: bottom right;
}
#sc_drag_crop:hover{
  background-position: top right;
}
#sc_drag_cancel {
  bottom:-50px;
  text-align: center;
  right:86px;
  min-width: 59px !important;
  padding: 0 0px;
  background-position: top left;
}
#sc_drag_cancel:hover{
  background-position: bottom left;
}

#sc_drag_shadow_top, #sc_drag_shadow_bottom, #sc_drag_shadow_left, #sc_drag_shadow_right {
  background-color: #000000;
  opacity: 0.5;
  position: absolute;
  z-index:7000;
  border: 0;
  cursor: crosshair;
}
#sc_drag_shadow_top {
  left: 0;
  top: 0;
}
#sc_drag_shadow_bottom {
  bottom: 0;
  right: 0;
}
#sc_drag_shadow_left {
  bottom: 0;
  left: 0;
}
#sc_drag_shadow_right {
  right: 0;
  top: 0;
}
#sc_drag_north_east, #sc_drag_north_west, #sc_drag_south_east, #sc_drag_south_west  {
  border:1px solid #FFFFFF;
  background-color: #0000FF;
  height: 5px;
  position: absolute;
  width: 5px;
  z-index:9998;
}
#sc_drag_north_east {
  cursor: ne-resize ;
  right: -4px ;
  top: -3px;
}
#sc_drag_north_west {
  cursor: nw-resize ;
  left: -3px ;
  top: -3px;
}
#sc_drag_south_east {
  bottom: -4px;
  cursor: se-resize ;
  right: -4px ;
}
#sc_drag_south_west {
  bottom: -4px;
  cursor: sw-resize ;
  left: -3px ;
}

.sc_tip_save_status {
  position :fixed;
  border-radius: 4px 4px;
  height: 30px;
  line-height: 30px;
  text-indent: 1em;
  width: 200px;
  background: #fff1a8;
  color: #000000;
  top:5px;
  left:45%;
  font-size: 12px;
}

.sc_tip_save_status a{
  text-decoration: underline;
  color: #2A5DB0;
}
#shitu_progress_wrapper{
  position: fixed;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  background: rgba(0, 0, 0, 0.5);
  z-index:10000;
}
#shitu_progress_total{
  position: relative;
  top:50%;
  height:9px;
  width:140px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
}
#shitu_progress_complete{
  position: relative;
  height:100%;
  width:0%;
  background: #ef4c3c;
  border-radius: 3px;
  -webkit-transition-property:width;
  -webkit-transition-duration:0.3s;
}
#shitu_progress_num{
  position: absolute;
  white-space: nowrap;
  position: absolute;
  top:-20px;
  color: #fff;
  right: 0;
  font-weight: bold;
}
#shitu_progress_tip_txt{
  position: absolute;
  bottom: -28px;
  font-size: 17px;
  color: #fff;
  left: 47px;
  font-weight: bold;
}
#shitu_fake_page{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 8499;
  top:0;
  left:0;
}