/* Portfolio Massonry Grid */

/* -------------------------------------------------------------------
   Base                               
   ------------------------ /
 * 01.Base
 * 02.Typography
 * 03.Helper Class
 * 04.Buttons
 * 05.Portfolio (Gallery)
 * 07.Footer      
 * 08.Intro

------------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* 01.Base                               
/* ---------------------------------------------------------------- */
body, html {
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	color: #555;
	margin: 0;
	padding: 0;
  }
  
  body {
	overflow-x: hidden;
  }
  
  ::-moz-selection {
	background: #114084;
	color: #fff;
  }
  
  ::selection {
	background: #114084;
	color: #fff;
  }
  
  a:link, a:hover, a:active, a:visited {
	text-decoration: none;
  }
  
  ul, ol {
	list-style-type: none;
	padding: 0;
	margin: 0;
  }
  
  textarea, textarea:focus, input, input:focus, button, button:focus {
	outline: none;
	resize: inherit;
  }
  
  /* ---------------------------------------------------------------- */
  /* 02.Typography                               
  /* ---------------------------------------------------------------- 
  h1, h2, h3, h4, h5, h6 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	color: #000;
	text-transform: capitalize;
	margin: 0;
	line-height: 1.5;
  }
  
  h1, .h1 {
	font-size: 3rem;
  }
  
  h2, .h2 {
	font-size: 36px;
  }
  
  h3, .h3 {
	font-size: 30px;
  }
  
  h4, .h4 {
	font-size: 22px;
  }
  
  h5, .h5 {
	font-size: 20px;
  }
  
  h6, .h6 {
	font-size: 18px;
  }
  
  p {
	line-height: 28px;
	margin: 0;
  }
  */
  /* ---------------------------------------------------------------- */
  /* 03.Helper Class                              
  /* ---------------------------------------------------------------- */
  .page-wrapper {
	overflow: hidden;
	position: relative;
  }
  
  .section {
	padding: 0px 0 30px 0;
	overflow: hidden;
  }
  
  .section .heading-mb {
	margin-bottom: 10px;
  }
  
  .section .section-heading .section-title {
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 15px;
  }
  
  .section .section-heading .section-title span {
	margin-left: 15px;
	color: #114084;
  }
  
  .section .section-heading .section-title:after, .section .section-heading .section-title:before {
	content: "";
	position: absolute;
	left: 0;
	border-radius: 100px;
  }
  
  .section .section-heading .section-title:after {
	width: 100px;
	height: 2px;
	background: #eee;
	bottom: 0;
  }
  
  .section .section-heading .section-title:before {
	width: 40px;
	height: 6px;
	background: #114084;
	z-index: 5;
	bottom: -2px;
  }
  
  #portfolio-wrapper-dark {
	background: #1b1b1b;
  }
  
  #portfolio-wrapper-dark .section .section-heading .section-title {
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 15px;
	color: #fff;
  }
  
  #portfolio-wrapper-dark .section .section-heading .section-title span {
	margin-left: 15px;
	color: #114084;
  }
  
  #portfolio-wrapper-dark .section .section-heading .section-title:after, #portfolio-wrapper-dark .section .section-heading .section-title:before {
	content: "";
	left: 0;
	position: absolute;
	border-radius: 100px;
  }
  
  #portfolio-wrapper-dark .section .section-heading .section-title:after {
	width: 100px;
	height: 2px;
	background: #f5f5f5;
	bottom: 0;
  }
  
  #portfolio-wrapper-dark .section .section-heading .section-title:before {
	width: 40px;
	height: 6px;
	background: #114084;
	z-index: 5;
	bottom: -2px;
  }
  
  #portfolio-wrapper-dark .section .section-heading p {
	color: rgba(255, 255, 255, 0.7);
  }
  
  .read-more-btn {
	text-align: right;
  }
  
  .pb-minus-70 {
	padding-bottom: 70px;
  }
  
  .bg-light-grey {
	background: #f5f5f5;
  }
  
  /* ---------------------------------------------------------------- */
  /* Responsive Media Query
   * Small devices (tablets, less than 768px)
  /* ---------------------------------------------------------------- */
  @media only screen and (max-width: 767.98px) {
	.read-more-btn {
	  margin-top: 30px;
	  text-align: left;
	}
  }
  
  /* ---------------------------------------------------------------- */
  /* Responsive Media Query
   * Extra small devices (portrait phones, less than 576px)
  /* ---------------------------------------------------------------- */
  @media only screen and (max-width: 575.98px) {
	.section .section-heading .section-title {
	  font-size: 2rem;
	}
  }
  
  /* ---------------------------------------------------------------- */
  /* 04.Buttons                            
  /* ---------------------------------------------------------------- */
  .default-dark-button {
	display: inline-block;
	background: transparent;
	color: #fff !important;
	border: 2px solid #114084;
	padding: 17px 50px;
	border-radius: 3px;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
  }
  
  .default-dark-button:hover {
	background: #114084;
	color: #fff !important;
  }
  
  .default-button {
	display: inline-block;
	background: transparent;
	color: #114084 !important;
	border: 2px solid #114084;
	padding: 17px 50px;
	border-radius: 3px;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
  }
  
  .default-button:hover {
	background: #114084;
	color: #fff !important;
  }
  
  /* ---------------------------------------------------------------- */
  /* 05.Portfolio (Gallery)                          
  /* ---------------------------------------------------------------- */
  .portfolio-filter-light {
	text-align: left;
	margin-bottom: 50px;
  }
  
  .portfolio-filter-light a {
	display: inline-block;

	padding: 11px 22px;
	margin-bottom: 22px;
	background: transparent;
	color: #114084;
	margin-right: 10px;
	border-radius: 3px;
	border: 2px solid #114084;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
  }
  
  .portfolio-filter-light a:last-child {
	margin-right: 0;
  }
  
  .portfolio-filter-light a.current {
	background: #114084;
	color: #fff;
  }
  
  .portfolio-filter-light a:hover {
	background: #114084;
	color: #fff;
  }
  
  .portfolio-filter-dark {
	text-align: left;
	margin-bottom: 50px;
  }
  
  .portfolio-filter-dark a {
	display: inline-block;
	padding: 11px 22px;
	background: transparent;
	color: #fff;
	margin-right: 10px;
	border-radius: 3px;
	border: 2px solid #114084;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
  }
  
  .portfolio-filter-dark a:last-child {
	margin-right: 0;
  }
  
  .portfolio-filter-dark a.current {
	background: #114084;
	color: #fff;
  }
  
  .portfolio-filter-dark a:hover {
	background: #114084;
	color: #fff;
  }
  
  .portfolio-item {
	margin-bottom: 30px;
  }
  
  .portfolio-item .portfolio-item-inner {
	position: relative;
	overflow: hidden;
	border-radius: 3px;
	-webkit-box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.2);
			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.2);
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-item-img {
	border-radius: 3px;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-item-img img {
	border-radius: 3px;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-item-img:after {
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.9;
	position: absolute;
	background: #1b1b1b;
	pointer-events: none;
	-webkit-transform: scaleY(0);
			transform: scaleY(0);
	border-radius: 3px;
	-webkit-transform-origin: bottom;
			transform-origin: bottom;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1), -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details {
	left: 30px;
	z-index: 15;
	bottom: 20px;
	opacity: 0;
	border-radius: 4px;
	position: absolute;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	color: #fff !important;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details h5 {
	display: block;
	margin-bottom: 5px;
	position: relative;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details h5 a {
	color: #fff;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details h5 a:hover {
	color: #114084 !important;
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details h5:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: #fff;
	pointer-events: none;
	border-radius: 5px;
	-webkit-transform: scale(1);
			transform: scale(1);
	-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1), -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details span {
	position: relative;
	color: rgba(255, 255, 255, 0.75);
  }
  
  .portfolio-item .portfolio-item-inner .portfolio-details span:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: #fff;
	pointer-events: none;
	border-radius: 4px;
	-webkit-transform: scale(1);
			transform: scale(1);
	-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
	transition: transform 0.5s cubic-bezier(1, 0.2, 0.5, 1), -webkit-transform 0.5s cubic-bezier(1, 0.2, 0.5, 1);
  }
  
  .portfolio-item:hover .portfolio-item-inner .portfolio-item-img:after {
	opacity: 0.9;
	-webkit-transform: scale(1);
			transform: scale(1);
	-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
  }
  
  .portfolio-item:hover .portfolio-item-inner .portfolio-details {
	opacity: 1;
	bottom: 30px;
  }
  
  .portfolio-item:hover .portfolio-item-inner .portfolio-details h5:after, .portfolio-item:hover .portfolio-item-inner .portfolio-details span:after {
	opacity: 1;
	-webkit-transform: scaleX(0);
			transform: scaleX(0);
	-webkit-transform-origin: 100% 0;
			transform-origin: 100% 0;
  }
  
  /* ---------------------------------------------------------------- */
  /* Responsive Media Query
   * Extra small devices (portrait phones, less than 450px)
  /* ---------------------------------------------------------------- */
  @media only screen and (max-width: 450.98px) {
	.portfolio-filter-dark a:last-child, .portfolio-filter-light a:last-child {
	  margin-top: 12px;
	}
  }
  

/* Background Effects */

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:-1;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: fill;
}