@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;500&display=swap');
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;

}
#elastic_grid_demo {
	background-color: #eee;
}
#container {
	display: block;
	zoom: 1;
	position: relative;
	width: 100%;
	max-height:none;
	margin:0px auto 0px;
	z-index:10;
	text-align:left;
	/* reset box-sizing (to boostrap friendly) */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	font-family: 'Fira Sans', sans-serif;
	}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


.og-grid{
	list-style:none;
	padding:20px 0;
	margin:0 auto;
	text-align:center;
	width:100%;
}
.og-grid li{
	display:inline-block;
	margin:10px 5px 0 5px;
	vertical-align:top
}
.og-grid li.hidden {
	display: none;
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
	
}

.og-pointer{
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: relative;
	pointer-events: none;
	border-bottom-color: #42585e;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

.og-expander {
	position: absolute;
	background-image: url("../images/overlay.png"), linear-gradient(315deg, rgba(0, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
	background-size: 128px 128px, auto;
	background-color:#143c4a;
	color: #fff;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 0;
	text-align: left;
	height: 0;
	overflow: hidden
	
}
.og-expander-inner{
	padding:30px 30px;
	height:100%;
	
}
.og-close{
	position:absolute;
	width:40px;
	height:40px;
	top:5px;
	right:5px;
	cursor:pointer;
	z-index:1000;
	background-color:#1a4a5a;; 
}
.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top:50%;
	right:0px;
	height: 0.25em;
	background: #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.og-close::after{
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.og-close:hover::before,.og-close:hover::after{
	background:#333;
}
.og-fullimg,.og-details{
	width:50%;
	float:left;
	height:100%;
	overflow:hidden;
	position:relative;
}
.og-details,.infosep{
	/* box-shadow:0 1px #2a2a2a; */
	margin:15px 0;
}
.og-details{
	padding:0 20px;
}
.og-fullimg{
	text-align:center;
}
.og-fullimg img{
	display:inline-block;
	max-height:100%;
	max-width:100%
}

.og-details h3 {
	font-weight: 400;
	font-size: 1.5em;
	/*padding: 0px 0 10px;*/
	color: #4ebef2;
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 1em;
}

.og-details p {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 300;
	font-size: 1.5em!important;
	line-height: 1.2em!important;
	color: #dfdbdb;
	padding-bottom: 10px;
}
.og-details iframe{
	max-width:400px;
	max-height:250px;
	margin-bottom:0
}

.og-details a.link-button{
	font-weight: 500;
	font-size: 14px;
	color: #dfdbdb;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 12px;
	border: 3px solid #dfdbdb;
	display: inline-block;
	margin: 0 20px 40px 0;
	outline: none;
}

.og-details a.first{
	margin-left: 2em;
	
}

/*.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}*/

.og-details a:hover {
	/*border-color: #999;*/
	color: #fff;
	background-color: #4ebef2;
	background: -moz-linear-gradient(top,#454545 454545%,#303030);
	background: -webkit-gradient(linear, left top, left bottom,from(#454545),to(#303030));

}
	
.og-loading{
	width:20px;
	height:20px;
	border-radius:50%;
	background:#ddd;
	box-shadow:0 0 1px #ccc,15px 30px 1px #ccc,-15px 30px 1px #ccc;
	position:absolute;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
	-webkit-animation:loader .5s infinite ease-in-out both;
	-moz-animation:loader .5s infinite ease-in-out both;
	animation:loader .5s infinite ease-in-out both
}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

/* Work - filter by tag */
.wagwep-container{
	overflow:hidden;
	text-transform: none;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 40px;
}
.wagwep-container ul#portfolio-filter{
	float:left;
	font-size:1em;
	list-style:none;
	width:100%;
	border-bottom:1px solid #ddd;
	font-family: 'Fira Sans', sans-serif;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}
.wagwep-container ul#portfolio-filter li{
	float:left;
	line-height:1.4em;
	margin:0;
	padding:2px
}
.wagwep-container ul#portfolio-filter li:last-child{
	border-right:0;
	margin-right:0;
	padding-right:0
}
.wagwep-container ul#portfolio-filter a{
	color:#666666;
	text-decoration:none;
	border:0;
	background:0;
	margin-top: 0;
	margin-right: 0.5em;
	margin-bottom: 0.01em;
	margin-left: 0;
	padding-top: 0.01em;
	padding-right: 0.5em;
	padding-bottom: 0.01em;
	padding-left: 0.5em;
}
.wagwep-container ul#portfolio-filter li.current a,ul#portfolio-filter a:hover{
	text-decoration:none;
	color:#CCC;
	background-color: #666;
	border-radius:1px;
}
.wagwep-container ul#portfolio-filter li.current a{
	color: #fff;
	font-weight: normal;
	background-color: #666;
}
/* Clearfix */
.clearfix:before,
.clearfix:after{content:" ";
	display:table}
.clearfix:after{clear:both
}
.clearfix{*zoom:1}

/* Elastislide Style */
.elastislide-list{
	list-style-type:none;
	display:none
}
.no-js .elastislide-list{
	display:block
}
.elastislide-carousel ul li{
	min-width:20px;
	padding-left: 0.5em ;
}

.elastislide-wrapper{
	position:relative;
	background-color:transparent;
	margin:0 auto;
	min-height:60px;
}
.elastislide-wrapper.elastislide-loading{
	background-image:url(../../images/loading.gif);
	background-repeat:no-repeat;
	background-position:center center}

.elastislide-horizontal{
		padding:0px 0px}

.elastislide-vertical{
			padding:40px 10px}

.elastislide-carousel{
		overflow-x: auto; overflow-y: hidden;
			position:relative}

.elastislide-carousel ul{
	position:relative;
	display:block;
	list-style-type:none;
	padding:0;
	margin:0;
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
	transform:translateX(0)}

.elastislide-horizontal ul{
	white-space:nowrap}

.elastislide-carousel ul li{
	margin:0;
	-webkit-backface-visibility:hidden}

.elastislide-horizontal ul li{
	height:100%;
	display:inline-block}

.elastislide-vertical ul li{
	display:block;

}

.elastislide-carousel ul li a{
	display:inline-block;
	width:100%;
	padding:0;
	font-family: 'Fira Sans', sans-serif;
}
.elastislide-carousel ul li a img{
	display:block;
	/*border:2px solid #313131;*/
	max-height: 10em;
	max-width: 10em;}

.elastislide-carousel ul li a img.selected{
	border:2px solid #fff}

.elastislide-wrapper nav span {
	position: absolute;
	background: #1a4a5a url(../../images/nav.png) no-repeat 4px 3px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.8;
}
.elastislide-wrapper nav span:hover{
	opacity:1.0}

.elastislide-horizontal nav span{
	top:50%;
	left:10px;margin-top:-11px}

.elastislide-vertical nav span{
	top:10px;
	left:50%;margin-left:-11px;
	background-position:-17px 5px}

.elastislide-horizontal nav span.elastislide-next{
	opacity:0;right:10px;
	left:auto;
	background-position:4px -17px}

.elastislide-vertical nav span
.elastislide-next{bottom:10px;top:auto;background-position:-17px -18px
}

/* Custom scrollbar */
/* width */
.elastislide-carousel::-webkit-scrollbar {
  width: 10px;
  height: 0.8em;
}
/* Track */
.elastislide-carousel::-webkit-scrollbar-track {
  background: #ccc;
}
/* Handle */
/*.elastislide-carousel::-webkit-scrollbar-thumb {
  background: #888;
}*/
.scrollcolor1::-webkit-scrollbar-thumb {
  background: #427ba3;
}
.scrollcolor2::-webkit-scrollbar-thumb {
  background: #427ba3;
}
/* Handle on hover */
.elastislide-carousel::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/***********
*Hover
************/

.og-grid li a{
	overflow:hidden}

.og-grid li a.unhoverdir{
	overflow:visible}

.og-grid li a figure{
		position:absolute;
		background:#143c4a;
		background:rgba(20,60,74,0.7);
		width:100%;
		height:100%}

.og-grid li a figure span{
	display:block;
	padding:10px 0;
	margin:4em 1em 1em 1em;
	text-transform:uppercase;
	font-weight:400;
	color:#FFFFFF;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(255,255,255,0.5);
	font-size: 1.2em;
	font-family: 'Fira Sans', sans-serif;
	line-height: 1.1em;
	letter-spacing: 0.1em;
}
/***********
*Effect
************/
/* Effect 1: opacity */
.og-grid.effect-opacity li.animate{-webkit-animation:fadeIn .65s ease forwards;
	-moz-animation:fadeIn .65s ease forwards;animation:
		fadeIn .65s ease forwards}
@-webkit-keyframes fadeIn{to{opacity:1}
}
@-moz-keyframes fadeIn{to{opacity:1}
}
@keyframes fadeIn{to{opacity:1}
}
.og-grid.effect-moveup li.animate{-webkit-transform:translateY(200px);-moz-transform:translateY(200px);transform:translateY(200px);-webkit-animation:moveUp .65s ease forwards;-moz-animation:moveUp .65s ease forwards;animation:moveUp .65s ease forwards}@-webkit-keyframes moveUp{to{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes moveUp{to{-moz-transform:translateY(0);opacity:1}
}
@keyframes moveUp{to{transform:translateY(0);opacity:1}
}
.og-grid.effect-scaleup li.animate{-webkit-transform:scale(0.6);-moz-transform:scale(0.6);transform:scale(0.6);-webkit-animation:scaleUp .65s ease-in-out forwards;-moz-animation:scaleUp .65s ease-in-out forwards;
	animation:scaleUp .65s ease-in-out forwards}@-webkit-keyframes scaleUp{to{-webkit-transform:scale(1);
	opacity:1}
}
@-moz-keyframes scaleUp{to{-moz-transform:scale(1);opacity:1}}@keyframes scaleUp{to{transform:scale(1);opacity:1}
}
.og-grid.effect-fallperspective{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.og-grid.effect-fallperspective li.animate{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg);-moz-transform:translateZ(400px) translateY(300px) rotateX(-90deg);transform:translateZ(400px) translateY(300px) rotateX(-90deg);-webkit-animation:fallPerspective .8s ease-in-out forwards;-moz-animation:fallPerspective .8s ease-in-out forwards;animation:fallPerspective .8s ease-in-out forwards}
@-webkit-keyframes fallPerspective{100%{-webkit-transform:translateZ(0) translateY(0) rotateX(0);opacity:1}
}
@-moz-keyframes fallPerspective{100%{-moz-transform:translateZ(0) translateY(0) rotateX(0);opacity:1}
}
@keyframes fallPerspective{100%{transform:translateZ(0) translateY(0) rotateX(0);opacity:1}
}
.og-grid.effect-fly{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.og-grid.effect-fly li.animate{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:50% 50% -300px;-moz-transform-origin:50% 50% -300px;transform-origin:50% 50% -300px;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-animation:fly .8s ease-in-out forwards;-moz-animation:fly .8s ease-in-out forwards;animation:fly .8s ease-in-out forwards}
@-webkit-keyframes fly{100%{-webkit-transform:rotateX(0);opacity:1}
}
@-moz-keyframes fly{100%{-moz-transform:rotateX(0);opacity:1}
}
@keyframes fly{100%{transform:rotateX(0);opacity:1}
}
.og-grid.effect-flip{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.og-grid.effect-flip li.animate{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotateX(-80deg);-moz-transform:rotateX(-80deg);transform:rotateX(-80deg);-webkit-animation:flip .8s ease-in-out forwards;-moz-animation:flip .8s ease-in-out forwards;animation:flip .8s ease-in-out forwards}
@-webkit-keyframes flip{100%{-webkit-transform:rotateX(0);opacity:1}
}
@-moz-keyframes flip{100%{-moz-transform:rotateX(0);opacity:1}
}
@keyframes flip{100%{transform:rotateX(0);opacity:1}
}
.og-grid.effect-helix{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.og-grid.effect-helix li.animate{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-animation:helix .8s ease-in-out forwards;-moz-animation:helix .8s ease-in-out forwards;animation:helix .8s ease-in-out forwards}
@-webkit-keyframes helix{100%{-webkit-transform:rotateY(0);opacity:1}
}
@-moz-keyframes helix{100%{-moz-transform:rotateY(0);opacity:1}
}
@keyframes helix{100%{transform:rotateY(0);opacity:1}
}
.og-grid.effect-popup{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.og-grid.effect-popup li.animate{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(0.4);-moz-transform:scale(0.4);transform:scale(0.4);-webkit-animation:popUp .8s ease-in forwards;-moz-animation:popUp .8s ease-in forwards;animation:popUp .8s ease-in forwards}

@-webkit-keyframes popUp{70%{-webkit-transform:scale(1.1);opacity:.8;-webkit-animation-timing-function:ease-out}100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes popUp{70%{-moz-transform:scale(1.1);opacity:.8;-moz-animation-timing-function:ease-out}100%{-moz-transform:scale(1);opacity:1}
}
@keyframes popUp{70%{transform:scale(1.1);opacity:.8;animation-timing-function:ease-out}100%{transform:scale(1);opacity:1}
}
/**************
* Responsive
**************/
/* Basic Styles */



nav#porfolio-nav{
	width:100%;position:relative}nav#porfolio-nav ul{
		padding:0;
		margin:0 auto}
nav#porfolio-nav li{
			display:inline;float:left}
nav#porfolio-nav li a{
				border-right:1px solid #576979;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
nav#porfolio-nav li:last-child a{border-right:0}

@media screen and (max-width:600px){
	nav#porfolio-nav{height:auto}
	nav#porfolio-nav ul{width:100%;display:block;height:auto}
	nav#porfolio-nav li{width:50%;float:left;position:relative}
	nav#porfolio-nav li a{border-bottom:1px solid #576979;border-right:1px solid #576979}
	nav#porfolio-nav a{text-align:left;width:100%;text-indent:25px}
}
@media only screen and (max-width :480px){
	nav#porfolio-nav{
		border-bottom:0}
	nav#porfolio-nav ul{
		height:auto}
	
	
	.og-expander 
	h3{
		font-size:18px}
	.og-expander 
	p{
		font-size:12px}
	.og-expander 
	a{
		font-size:11px}
	
	.og-expander-inner{
		padding:10px}
	.og-grid .sep{display:none}
	.og-fullimg{height:30%;width:100%}
	.og-details{width:100%;margin-top:5px}
	.og-details 
	h3{font-size:18px;margin-bottom:0}
	.og-details 
	p{padding-bottom:10px}
	
	.og-details .infosep{margin:10px 0}
	.elastislide-wrapper{max-width:300px}
	
.og-details a.link-button{
	font-weight: 500;
	font-size: 8px;
	color: #7a7775;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 8px;
	border: 2px solid #7a7775;
	/*display: inline-block;*/
	margin: 10px 10px 0 0;
	outline: none;
}
.og-details a:hover{
	background-color:#4ebef2;	
	border-color: #eee;
	color: #eee!important;
	text-decoration:none;
}
}
@media only screen and (max-width :320px){
	nav#porfolio-nav li{
		display:block;
		float:none;
		width:100%}
	nav#porfolio-nav li a{
		border-bottom:1px solid #576979}
		
	.og-details 
	h3{font-size:18px;margin-bottom:0}
	
	.og-details 
	p{padding-bottom:10px}
	
	.og-details .infosep{margin:10px 0}
.og-details a.link-button{
	font-weight: 500;
	font-size: 8px;
	color: #7a7775;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 8px;
	border: 2px solid #7a7775;
	/*display: inline-block;*/
	margin: 10px 10px 0 0;
	outline: none;
}
.og-details a:hover{
	background-color:#4ebef2;	
	border-color: #eee;
	color: #eee!important;
	text-decoration:none;
}
}
@media(min-width:1200px){.og-expander 
	h3{font-size:35px}.og-expander 
	p{font-size:18px}.og-expander a{font-size:12px}
}
@media(min-width:768px) and (max-width:979px){.og-expander 
	h3{font-size:32px}.og-expander 
	p{font-size:12px}.og-expander a{font-size:11px}.og-grid .sep{margin:20px 10px;height:80%}
	
.og-details a.link-button{
	font-weight: 500;
	font-size: 10px;
	color: #7a7775;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 8px;
	border: 2px solid #7a7775;
	/*display: inline-block;*/
	margin: 15px 15px 0 0;
	outline: none;
}
.og-details a:hover{
	background-color:#4ebef2;	
	border-color: #eee;
	color: #eee!important;
	text-decoration:none;
}
}
@media(max-width:767px){
	.og-expander h3{
	
	font-size:20px;
	margin-top: 10px}
	
	.og-expander p{font-size:1.1em!important}
	.og-expander a{font-size:11px}.og-grid .sep{display:none}
	.og-fullimg{height:40%;width:100%}
	.og-details{width:100%;margin-top:5px}
	.og-details p{padding-bottom:10px}
	.og-details .infosep{margin:12px 0}
	
	.elastislide-wrapper{
		max-width:100%;
		padding: 1em 0 1em 0}
	
.og-details a.link-button{
	font-weight: 500;
	font-size: 10px;
	color: #7a7775;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 8px;
	border: 2px solid #7a7775;
	display: inline; 
	margin: 1em 0 2em 1em;
	outline: none;
}
	

.og-details a.first{
	margin-left: 2em;
	margin-bottom: 2em;
}
.og-details a:hover{
	background-color:#4ebef2;	
	border-color: #eee;
	color: #eee!important;
	text-decoration:none;
}
}