/* Portfolio Style */
.portfolio_title {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	position: relative;
	top: -45%;
	width: 100%;
	z-index: 9999;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: normal;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.642857143;
	border-radius: 4px;
	letter-spacing: 2px;
	font-weight: 400;
	text-transform: uppercase;
	border: 2px solid #0c0c0c;
	border-radius: 0;
	padding: 12px 20px 11px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0);
	border-color: #fff;
}

.portfolio_overlay {
	display: inline-block;
	float: left;
	position: absolute;
	background: rgba(81, 94, 108, 0.9);
	height: 100%;
	width: 100%;
	z-index: 9999;
	top: -100%;
	display: none;
}

.zp-grid-wrapper .element a:hover h4{
	top: 45%;	
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.zp-grid-wrapper .element a:hover .portfolio_overlay {
	top: 0;	
	display: block;
}
.related_container .element a:hover .portfolio_overlay {
	top: 0;	
	display: block;
}
.related_container .element a:hover h4{
	top: 40%;	
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;	
}

.footer-widgets{
	display: none;
}


/* Portofolio Effect */

*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.zp-grid {
	position: relative;
	margin:0 auto 20px;
	padding: 0;
	list-style: none;
}

.zp-grid:before,
.zp-grid:after {
	display: table;
	content: ' ';
}

.zp-grid:after {
	clear: both;
}

.zp-grid div {
	position: relative;
	display: inline-block;
	margin: 10px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zp-grid div a,
.zp-grid div a img {
	display: block;
	margin: 0 auto;
	border: none;
}

.zp-grid div a {
	position: absolute;
	top: 0;
	left: 0;
}

.zp-grid div a:nth-child(2) {
	z-index: 1;
	visibility: hidden;
}

/* Navigation */
.zp-grid-wrapper nav {
	text-align: center;
}

.zp-grid-wrapper nav a {
	display: inline-block;
	margin: 0 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #eee;
	cursor: pointer;
	opacity: 0.7;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.touch .zp-grid-wrapper nav a {
	width: 30px;
	height: 30px;
}

.zp-grid-wrapper nav a:hover {
	opacity: 1;
}

.zp-grid-wrapper nav a.zp-current {
	opacity: 1;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.4);
}

.zp-grid.zp-effect-active div a {
	pointer-events: none;
}

/* Individual grid effects */

/* Fall down / scale up */
.zp-effect-fall.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: fallDown 0.6s forwards;
	animation: fallDown 0.6s forwards;
}

.zp-effect-fall.zp-effect-active div a:nth-child(2),
.zp-effect-fall.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: scaleUpFadeIn 0.6s forwards;
	animation: scaleUpFadeIn 0.6s forwards;
}

/* Slide and reveal */
.zp-effect-slide.zp-effect-active div:not(.zp-empty) a:first-child {
	z-index: 100;
	overflow: hidden;
	margin: 0;
	-webkit-animation: slideOut 0.5s forwards;
	animation: slideOut 0.5s forwards;
}

.zp-effect-slide.zp-effect-active a:nth-child(2) {
	visibility: visible;
}

.zp-effect-slide.zp-effect-active div:not(.zp-empty) a:only-child {
	-webkit-animation: fadeOut 0.5s forwards;
	animation: fadeOut 0.5s forwards;
}

.zp-effect-slide.zp-effect-active div.zp-empty a {
	-webkit-animation: fadeIn 0.5s forwards;
	animation: fadeIn 0.5s forwards;
}

/* Fall and rotate */
.zp-effect-fallrotate.zp-effect-active div:not(.zp-empty) a:first-child {
	z-index: 10;
	-webkit-animation: fallRotate 0.6s ease-in forwards;
	animation: fallRotate 0.6s ease-in forwards;
}

.zp-effect-fallrotate.zp-effect-active div a:nth-child(2),
.zp-effect-fallrotate.zp-effect-active div.zp-empty a {
	visibility: visible;
}

.zp-effect-fallrotate.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: fadeIn 0.6s forwards;
	animation: fadeIn 0.6s forwards;
}

.zp-effect-fallrotate div:nth-child(4) { z-index: 1; } /* order for correct overlapping */
.zp-effect-fallrotate div:nth-child(5) { z-index: 2; }
.zp-effect-fallrotate div:nth-child(6) { z-index: 3; }
.zp-effect-fallrotate div:first-child { z-index: 4; }
.zp-effect-fallrotate div:nth-child(2) { z-index: 5; }
.zp-effect-fallrotate div:nth-child(3) { z-index: 6; }

/* Scale and rotate */
.zp-effect-scalerotate.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: scaleRotateOut 0.6s forwards;
	animation: scaleRotateOut 0.6s forwards;
}

.zp-effect-scalerotate.zp-effect-active div a:nth-child(2),
.zp-effect-scalerotate.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: scaleRotateIn 0.6s forwards;
	animation: scaleRotateIn 0.6s forwards;
}

.zp-effect-scalerotate.zp-effect-active div:not(.zp-empty) a:only-child {
	-webkit-animation: fadeOut 0.6s forwards;
	animation: fadeOut 0.6s forwards;
}

.zp-effect-scalerotate div:nth-child(-n+3) { z-index: 2; } /* order for correct overlapping */
.zp-effect-scalerotate div:nth-last-child(-n+3) { z-index: 1; }

/* Stack back 3D */
.zp-effect-stackback div {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.zp-effect-stackback div a {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zp-effect-stackback.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: moveLeft 0.8s forwards;
	animation: moveLeft 0.8s forwards;
}

.zp-effect-stackback.zp-effect-active div a:nth-child(2),
.zp-effect-stackback.zp-effect-active div.zp-empty a {
	z-index: -1;
	-webkit-animation: popUp 0.8s ease-in forwards;
	animation: popUp 0.8s ease-in forwards;
}

.zp-effect-stackback.zp-effect-active div:not(.zp-empty) a:only-child {
	-webkit-animation: fadeOut 0.8s forwards;
	animation: fadeOut 0.8s forwards;
}

.zp-effect-stackback.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: fadeIn 0.8s forwards;
	animation: fadeIn 0.8s forwards;
}

/* 3d flip */
.zp-effect-3dflip div {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.zp-effect-3dflip div a {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zp-effect-3dflip.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateOutLeft 0.6s forwards;
	animation: rotateOutLeft 0.6s forwards;
}

.zp-effect-3dflip.zp-effect-active div a:nth-child(2),
.zp-effect-3dflip.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateInRight 0.6s ease-in forwards;
	animation: rotateInRight 0.6s ease-in forwards;
}

/* Bring back */
/* From https://github.com/hakimel/kontext by Hakim El Hattab, http://hakim.se */
.zp-effect-bringback div {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.zp-effect-bringback div a {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zp-effect-bringback.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: hideLeft 0.8s forwards;
	animation: hideLeft 0.8s forwards;
}

.zp-effect-bringback.zp-effect-active div a:nth-child(2) {
	z-index: -1;
	-webkit-animation: showRight 0.8s forwards;
	animation: showRight 0.8s forwards;
}

.zp-effect-bringback.zp-effect-active div:not(.zp-empty) a:only-child {
	-webkit-animation: fadeOut 0.8s forwards;
	animation: fadeOut 0.8s forwards;
}

.zp-effect-bringback.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: fadeIn 0.8s forwards;
	animation: fadeIn 0.8s forwards;
}

/* Superscale */
.zp-effect-superscale.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: scaleDown 0.6s ease-in-out forwards;
	animation: scaleDown 0.6s ease-in-out forwards;
}

.zp-effect-superscale.zp-effect-active div a:nth-child(2),
.zp-effect-superscale.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: scaleIn 0.6s ease-in-out forwards;
	animation: scaleIn 0.6s ease-in-out forwards;
}

/* Center flip */
.zp-effect-flip div {
	-webkit-perspective: 1500px;
	perspective: 1500px;
}

.zp-effect-flip div a {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zp-effect-flip.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: flipOut 0.8s ease-in forwards;
	animation: flipOut 0.8s ease-in forwards;
}

.zp-effect-flip.zp-effect-active div a:nth-child(2),
.zp-effect-flip.zp-effect-active div.zp-empty a {
	opacity: 0;
	-webkit-animation: flipIn 0.8s ease-in forwards;
	animation: flipIn 0.8s ease-in forwards;
}

/* Front row */
.zp-effect-frontrow div {
	overflow: hidden;
}

.zp-effect-frontrow.zp-effect-active div:not(.zp-empty) a:first-child {
	-webkit-animation: moveToBack 0.8s forwards;
	animation: moveToBack 0.8s forwards;
}

.zp-effect-frontrow.zp-effect-active div a:nth-child(2),
.zp-effect-frontrow.zp-effect-active div.zp-empty a {
	-webkit-animation: moveToFront 0.8s forwards;
	animation: moveToFront 0.8s forwards;
}

.zp-effect-frontrow.zp-effect-active div.zp-empty a {
	opacity: 0;
}

.zp-effect-frontrow.zp-effect-active div:not(.zp-empty) a:only-child {
	-webkit-animation: fadeOut 0.5s forwards;
	animation: fadeOut 0.5s forwards;
}

/* Animation delays */
.zp-grid-wrapper .zp-effect-delay.zp-effect-active div:nth-child(2) a {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.zp-grid-wrapper .zp-effect-delay.zp-effect-active div:nth-child(3) a {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.zp-grid-wrapper .zp-effect-delay.zp-effect-active div:nth-child(4) a {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.zp-grid-wrapper .zp-effect-delay.zp-effect-active div:nth-child(5) a {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.zp-grid-wrapper .zp-effect-delay.zp-effect-active div:nth-child(6) a {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

/* Reverse delays */
.zp-grid-wrapper .zp-effect-delay-reversed.zp-effect-active div:nth-child(5) a {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.zp-grid-wrapper .zp-effect-delay-reversed.zp-effect-active div:nth-child(4) a {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.zp-grid-wrapper .zp-effect-delay-reversed.zp-effect-active div:nth-child(3) a {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.zp-grid-wrapper .zp-effect-delay-reversed.zp-effect-active div:nth-child(2) a {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.zp-grid-wrapper .zp-effect-delay-reversed.zp-effect-active div:nth-child(1) a {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

/* Animations */
@-webkit-keyframes fallDown { 
	to { opacity: 0; -webkit-transform: translateY(70%); }
}

@keyframes fallDown { 
	to { opacity: 0; transform: translateY(70%); }
}

@-webkit-keyframes scaleUpFadeIn { 
	from { opacity: 0; -webkit-transform: scale(0.8); }
	to { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}

@keyframes scaleUpFadeIn { 
	from { opacity: 0; transform: scale(0.8); }
	to { visibility: visible; opacity: 1; transform: scale(1); }
}

@-webkit-keyframes slideOut { 
	from { width: 100%; }
	to { width: 0%; }
}

@keyframes slideOut { 
	from { width: 100%; }
	to { width: 0%; }
}

@-webkit-keyframes fadeOut { 
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes fadeOut { 
	from { opacity: 1; }
	to { opacity: 0; }
}

@-webkit-keyframes fadeIn { 
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeIn { 
	from { opacity: 0; }
	to { opacity: 1; }
}

@-webkit-keyframes fallRotate { 
	0% { -webkit-transform: translateY(0%) rotate(0deg); -webkit-animation-timing-function: ease-in; -webkit-transform-origin: 0 0;}
	40% { -webkit-transform: translateY(0%) rotate(20deg); -webkit-animation-timing-function: ease-out;-webkit-transform-origin: 0 0;}
	60% { -webkit-transform: translateY(0%) rotate(15deg); opacity: 1;-webkit-transform-origin: 0 0;}
	100% { -webkit-transform: translateY(150%) rotate(17deg); opacity: 0; -webkit-transform-origin: 0 0;}
}

@keyframes fallRotate { 
	0% { transform: translateY(0%) rotate(0deg); animation-timing-function: ease-in; transform-origin: 0 0;}
	40% { transform: translateY(0%) rotate(20deg); animation-timing-function: ease-out;transform-origin: 0 0;}
	60% { transform: translateY(0%) rotate(15deg); opacity: 1;transform-origin: 0 0;}
	100% { transform: translateY(150%) rotate(17deg); opacity: 0; transform-origin: 0 0;}
}

@-webkit-keyframes scaleRotateOut { 
	100% { opacity: 0; -webkit-transform: scale(0); }
}

@keyframes scaleRotateOut { 
	100% { opacity: 0; transform: scale(0); }
}

@-webkit-keyframes scaleRotateIn { 
	0% { opacity: 0; -webkit-transform: translateX(50%) translateY(100%) rotate(25deg); }
	100% { visibility: visible; opacity: 1; -webkit-transform: translateX(0%) translateY(0%) rotate(0deg); }
}

@keyframes scaleRotateIn { 
	0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); }
	100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); }
}

@-webkit-keyframes moveLeft { 
	50% { opacity: 1; -webkit-transform: translateX(-100%) rotateY(35deg) rotateX(10deg); }
	100% { opacity: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
}

@keyframes moveLeft {
	50% { opacity: 1; transform: translateX(-100%) rotateY(35deg) rotateX(10deg); }
	100% { opacity: 1; transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
}

@-webkit-keyframes popUp { 
	0% { -webkit-transform: translateZ(-200px); }
	50% { z-index: -1; }
	51% { z-index: 1; }
	70% { z-index: 1; visibility: visible; -webkit-transform: translateZ(50px); -webkit-animation-timing-function: ease-out; }
	100% { z-index: 1; visibility: visible; -webkit-transform: translateZ(0px); }
}

@keyframes popUp { 
	0% { transform: translateZ(-200px); }
	50% { z-index: -1; }
	51% { z-index: 1; }
	70% { z-index: 1; visibility: visible; transform: translateZ(50px); animation-timing-function: ease-out; }
	100% { z-index: 1; visibility: visible; transform: translateZ(0px); }
}

@-webkit-keyframes rotateOutLeft { 
	100% { opacity: 0; -webkit-transform: rotateY(90deg); }
}

@keyframes rotateOutLeft { 
	100% { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotateInRight { 
	0% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	100% { visibility: visible; opacity: 1; -webkit-transform: rotateY(0deg); }
}

@keyframes rotateInRight { 
	0% { opacity: 0; transform: rotateY(-90deg); }
	100% { visibility: visible; opacity: 1; transform: rotateY(0deg); }
}

@-webkit-keyframes hideLeft { 
	0% { -webkit-transform: translateZ(0px); }
	40% { -webkit-transform: translate(-40%, 0) scale(0.8) rotateY(20deg); }
	100% { opacity: 1; -webkit-transform: translateZ(-400px); }
}

@keyframes hideLeft { 
	0% { transform: translateZ(0px); }
	40% { transform: translate(-40%, 0) scale(0.8) rotateY(20deg); }
	100% { transform: translateZ(-400px); }
}

@-webkit-keyframes showRight { 
	0% { -webkit-transform: translateZ(-400px); }
	40% {  z-index: -1; -webkit-transform: translate(40%, 0) scale(0.8) rotateY(-20deg); }
	41% {  z-index: 1; }
	100% { z-index: 1; visibility: visible; -webkit-transform: translateZ(0px); }
}

@keyframes showRight { 
	0% { transform: translateZ(-400px); }
	40% {  z-index: -1; transform: translate(40%, 0) scale(0.8) rotateY(-20deg); }
	41% {  z-index: 1; }
	100% { z-index: 1; visibility: visible; transform: translateZ(0px); }
}

@-webkit-keyframes scaleDown { 
	100% { opacity: 0; -webkit-transform: scale(0); }
}

@keyframes scaleDown { 
	100% { opacity: 0; transform: scale(0); }
}

@-webkit-keyframes scaleIn { 
	0% { opacity: 0; -webkit-transform: scale(1.2); }
	100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}

@keyframes scaleIn { 
	0% { opacity: 0; transform: scale(1.2); }
	100% { visibility: visible; opacity: 1; transform: scale(1); }
}

@-webkit-keyframes flipOut { 
	50% { opacity: 0; -webkit-transform: rotateY(90deg); }
	100% { opacity: 0; -webkit-transform: rotateY(90deg); }
}

@keyframes flipOut { 
	50% { opacity: 0; transform: rotateY(90deg); }
	100% { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes flipIn { 
	0% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	50% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	75% { visibility: visible; opacity: 1; -webkit-transform: rotateY(15deg); -webkit-animation-timing-function: ease-in; }
	100% { visibility: visible; opacity: 1; -webkit-transform: rotateY(0deg); }
}

@keyframes flipIn { 
	0% { opacity: 0; transform: rotateY(-90deg); }
	50% { opacity: 0; transform: rotateY(-90deg); }
	75% { visibility: visible; opacity: 1; transform: rotateY(15deg); animation-timing-function: ease-in; }
	100% { visibility: visible; opacity: 1; transform: rotateY(0deg); }
}

@-webkit-keyframes moveToBack { 
	100% { -webkit-transform: translateX(-60%) scale(.8); }
}

@keyframes moveToBack { 
	100% { transform: translateX(-60%) scale(.8); }
}

@-webkit-keyframes moveToBack { 
	100% { -webkit-transform: translateX(-60%) scale(.8); }
}

@-webkit-keyframes moveToFront { 
	0% { -webkit-transform: translateX(100%) scale(.8); }
	100% { visibility: visible; opacity: 1; -webkit-transform: translateX(0%) scale(1); }
}

@keyframes moveToFront { 
	0% { transform: translateX(100%) scale(.8); }
	100% { visibility: visible; opacity: 1; transform: translateX(0%) scale(1); }
}


/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}

.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.md-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.md-content > div p {
	margin: 0;
	padding: 10px 0;
}

.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-content > div ul li {
	padding: 5px 0;
}

.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}

/* Individual modal styles with animations/transitions */

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
	-webkit-transform: translateX(20%);
	-moz-transform: translateX(20%);
	-ms-transform: translateX(20%);
	transform: translateX(20%);
	opacity: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.md-show.md-effect-2 .md-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

/* Effect 4: Newspaper */
.md-effect-4 .md-content {
	-webkit-transform: scale(0) rotate(720deg);
	-moz-transform: scale(0) rotate(720deg);
	-ms-transform: scale(0) rotate(720deg);
	transform: scale(0) rotate(720deg);
	opacity: 0;
}

.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-4 .md-content {
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

/* Effect 5: fall */
.md-effect-5.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-5 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(600px) rotateX(20deg); 
	-moz-transform: translateZ(600px) rotateX(20deg); 
	-ms-transform: translateZ(600px) rotateX(20deg); 
	transform: translateZ(600px) rotateX(20deg); 
	opacity: 0;
}

.md-show.md-effect-5 .md-content {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-webkit-transform: translateZ(0px) rotateX(0deg);
	-moz-transform: translateZ(0px) rotateX(0deg);
	-ms-transform: translateZ(0px) rotateX(0deg);
	transform: translateZ(0px) rotateX(0deg); 
	opacity: 1;
}

/* Effect 6: side fall */
.md-effect-6.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-6 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate(30%) translateZ(600px) rotate(10deg); 
	-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
	-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
	transform: translate(30%) translateZ(600px) rotate(10deg); 
	opacity: 0;
}

.md-show.md-effect-6 .md-content {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
	-moz-transform: translate(0%) translateZ(0) rotate(0deg);
	-ms-transform: translate(0%) translateZ(0) rotate(0deg);
	transform: translate(0%) translateZ(0) rotate(0deg);
	opacity: 1;
}

/* Effect 7:  slide and stick to top */
.md-effect-7{
	top: 0;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.md-effect-7 .md-content {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	opacity: 0;
}

.md-show.md-effect-7 .md-content {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
	border-radius: 0 0 3px 3px;
	opacity: 1;
}

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-8 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-70deg);
	-moz-transform: rotateY(-70deg);
	-ms-transform: rotateY(-70deg);
	transform: rotateY(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-show.md-effect-8 .md-content {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1;
}

/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-9 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-70deg);
	-moz-transform: rotateX(-70deg);
	-ms-transform: rotateX(-70deg);
	transform: rotateX(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-show.md-effect-9 .md-content {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
}

/* Effect 10: 3D sign */
.md-effect-10.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-10 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-60deg);
	-moz-transform: rotateX(-60deg);
	-ms-transform: rotateX(-60deg);
	transform: rotateX(-60deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-10 .md-content {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
}

/* Effect 11: Super scaled */
.md-effect-11 .md-content {
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-11 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 12:  Just me */
.md-effect-12 .md-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
	background: #e74c3c;
} 

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
	background: transparent;
}

.md-show.md-effect-12 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 13: 3D slit */
.md-effect-13.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-13 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-3000px) rotateY(90deg);
	-moz-transform: translateZ(-3000px) rotateY(90deg);
	-ms-transform: translateZ(-3000px) rotateY(90deg);
	transform: translateZ(-3000px) rotateY(90deg);
	opacity: 0;
}

.md-show.md-effect-13 .md-content {
	-webkit-animation: slit .7s forwards ease-out;
	-moz-animation: slit .7s forwards ease-out;
	animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
	50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

/* Effect 14:  3D Rotate from bottom */
.md-effect-14.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-14 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateY(100%) rotateX(90deg);
	-moz-transform: translateY(100%) rotateX(90deg);
	-ms-transform: translateY(100%) rotateX(90deg);
	transform: translateY(100%) rotateX(90deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	transform-origin: 0 100%;
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.md-show.md-effect-14 .md-content {
	-webkit-transform: translateY(0%) rotateX(0deg);
	-moz-transform: translateY(0%) rotateX(0deg);
	-ms-transform: translateY(0%) rotateX(0deg);
	transform: translateY(0%) rotateX(0deg);
	opacity: 1;
}

/* Effect 15:  3D Rotate in from left */
.md-effect-15.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-15 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
	-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
	-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
	transform: translateZ(100px) translateX(-30%) rotateY(90deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	transform-origin: 0 100%;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-15 .md-content {
	-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
	-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
	-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
	transform: translateZ(0px) translateX(0%) rotateY(0deg);
	opacity: 1;
}

/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
	background: rgba(180,46,32,0.5);
}

.md-show.md-effect-16 ~ .container {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	filter: blur(3px);
}

.md-effect-16 .md-content {
	-webkit-transform: translateY(-5%);
	-moz-transform: translateY(-5%);
	-ms-transform: translateY(-5%);
	transform: translateY(-5%);
	opacity: 0;
}

.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-16 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

/* Effect 17:  Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
	height: 100%;
	overflow: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}	

.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay  {
	-webkit-transform: rotateX(-2deg);
	-moz-transform: rotateX(-2deg);
	-ms-transform: rotateX(-2deg);
	transform: rotateX(-2deg);
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.md-effect-17 .md-content {
	opacity: 0;
	-webkit-transform: translateY(200%);
	-moz-transform: translateY(200%);
	-ms-transform: translateY(200%);
	transform: translateY(200%);
}

.md-show.md-effect-17 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 0.3s 0.2s;
	-moz-transition: all 0.3s 0.2s;
	transition: all 0.3s 0.2s;
}

/* Effect 18:  Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
	height: 100%;
	overflow: hidden;
}

.md-show.md-effect-18 ~ .md-overlay {
	background: rgba(143,27,15,0.8);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
	transform-style: preserve-3d;
	transform-origin: 0% 50%;
	animation: rotateRightSideFirst 0.5s forwards ease-in;
}

@-webkit-keyframes rotateRightSideFirst {
	50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
	50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
	50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
	100% { transform: translateZ(-200px); }
}

.md-effect-18 .md-content {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
	opacity: 0;
}

.md-show.md-effect-18 .md-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}

/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
	height: 100%;
	overflow: hidden;
}

.md-show.md-effect-19 ~ .md-overlay {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: OpenTop 0.5s forwards ease-in;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: 50% 100%;
	-moz-animation: OpenTop 0.5s forwards ease-in;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	animation: OpenTop 0.5s forwards ease-in;
}

@-webkit-keyframes OpenTop {
	50% { 
		-webkit-transform: rotateX(10deg); 
		-webkit-animation-timing-function: ease-out; 
	}
}

@-moz-keyframes OpenTop {
	50% { 
		-moz-transform: rotateX(10deg); 
		-moz-animation-timing-function: ease-out; 
	}
}

@keyframes OpenTop {
	50% { 
		transform: rotateX(10deg); 
		animation-timing-function: ease-out; 
	}
}

.md-effect-19 .md-content {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
	opacity: 0;
}

.md-show.md-effect-19 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}

/* Added animation */
.team,
.special-services-box, .columns{
	opacity: 0;	
}

.zp_start_animation.team,
.zp_start_animation.special-services-box,
.zp_start_animation.columns{
	-webkit-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity:1;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}
.portfolio_shortcode,
.zp-grid-wrapper{
	opacity: 0;	
}
.zp_start_animation.portfolio_shortcode,
.zp_start_animation.zp-grid-wrapper{
	-webkit-animation:zp_fadeUp 1s 1 ;
	-moz-animation:zp_fadeUp 1s 1;
	-o-animation:zp_fadeUp 1s 1;
	animation:zp_fadeUp 1s 1;
	opacity: 1;		
}

.zp_show{
	-webkit-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity:1;
	display: block;	
}
.zp_hide{
	-webkit-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	animation:zp_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 1;	
	display: none;	
}


@-webkit-keyframes zp_appear{
	0%{-webkit-transform:scale(0.5);opacity:0.1}
	100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes zp_appear{
	0%{-moz-transform:scale(0.5);opacity:0.1}
	100%{-moz-transform:scale(1);opacity:1}
}
@-o-keyframes zp_appear{
	0%{-o-transform:scale(0.5);opacity:0.1}
	100%{-o-transform:scale(1);opacity:1}
}
@keyframes zp_appear{
	0%{transform:scale(0.5);opacity:0.1}
	100%{transform:scale(1);opacity:1}
}


@-webkit-keyframes zp_fadeUp{
	0%{-webkit-transform: translateY(100%);opacity:0.1}
	100%{-webkit-transform:translateY(0);opacity:1}
}
@-moz-keyframes zp_fadeUp{
	0%{-moz-transform: translateY(100%);opacity:0.1}
	100%{-moz-transform:translateY(0);opacity:1}
}
@-o-keyframes zp_fadeUp{
	0%{-o-transform: translateY(100%);opacity:0.1}
	100%{-o-transform:translateY(0);opacity:1}
}
@keyframes zp_fadeUp{
	0%{transform: translateY(100%);opacity:0.1}
	100%{transform:translateY(0);opacity:1}
}

@-webkit-keyframes zp_fadeOut{
	0%{-webkit-transform: translateY(0);opacity:0.1}
	100%{-webkit-transform:translateY(100%);opacity:1}
}
@-moz-keyframes zp_fadeOut{
	0%{-webkit-transform: translateY(0);opacity:0.1}
	100%{-webkit-transform:translateY(100%);opacity:1}
}
@-o-keyframes zp_fadeOut{
	0%{-webkit-transform: translateY(0);opacity:0.1}
	100%{-webkit-transform:translateY(100%);opacity:1}
}
@keyframes zp_fadeOut{
	0%{-webkit-transform: translateY(0);opacity:0.1}
	100%{-webkit-transform:translateY(100%);opacity:1}
}