/* preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
}
.prtf-smooth-transition-loader.prtf-hide-spinner .prtf-st-loader { display:none}
.prtf-st-loader1 {
 position:relative;
 height:100%
}
/*---MainCube----*/
.prtf-outline .prtf-line-1 {
 top:0;
 left:0;
 height:0;
 width:0;
 border-right:4px solid #ddd;
 -webkit-animation-name:animateHeight;
 animation-name:animateHeight;
 animation-duration:1.5s;
 animation-iteration-count:infinite;
 animation-timing-function:ease;
 animation-delay:0s;
 animation-fill-mode:forwards
}
.prtf-outline .prtf-line-2 {
 bottom:0;
 right:0;
 border-top:4px solid #ddd;
 -webkit-animation-name:animateWidth;
 animation-name:animateWidth;
 animation-duration:1.5s;
 animation-iteration-count:infinite;
 animation-timing-function:ease;
 animation-delay:0s;
 animation-fill-mode:forwards
}
.prtf-outline .prtf-line-3 {
 top:0;
 left:0;
 border-bottom:4px solid #ddd;
 -webkit-animation-name:animateWidth;
 animation-name:animateWidth;
 animation-duration:1.5s;
 animation-iteration-count:infinite;
 animation-timing-function:ease;
 animation-delay:0s;
 animation-fill-mode:forwards
}
.prtf-outline .prtf-line-4 {
 bottom:0;
 right:0;
 height:0;
 width:0;
 border-left:4px solid #ddd;
 -webkit-animation-name:animateHeight;
 -webkit-animation-duration:1.5s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease;
 -webkit-animation-delay:0s;
 -webkit-animation-fill-mode:forwards;
 animation-name:animateHeight;
 animation-duration:1.5s;
 animation-iteration-count:infinite;
 animation-timing-function:ease;
 animation-delay:0s;
 animation-fill-mode:forwards
}
.prtf-outline .prtf-line-1,.prtf-outline:after {
 -webkit-animation-duration:1.5s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease;
 -webkit-animation-delay:0s;
 -webkit-animation-fill-mode:forwards
}
.prtf-outline .prtf-line-2,.prtf-outline .prtf-line-3 {
 -webkit-animation-duration:1.5s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease;
 -webkit-animation-delay:0s;
 -webkit-animation-fill-mode:forwards;
 height:0;
 width:0
}
.prtf-outline .prtf-line-1,.prtf-outline .prtf-line-2,.prtf-outline .prtf-line-3,.prtf-outline .prtf-line-4,.prtf-outline .prtf-outline .prtf-portfolio-list-holder-outer.prtf-line-4,.prtf- portfolio-list-holder-outer {
 position:absolute;
 border-color:#555;
 opacity:0
}
/*---SecondCube. You can set cube size)---*/
.prtf-outline {
 position:absolute;
 top:calc(50% - 25px);
 left:calc(50% - 25px);
 width:50px;
 height:50px;
 background-color:#fff
}
/* preloader animation */
@-webkit-keyframes animateWidth {
 0% {opacity:1;width:0}
 40%,80% {width:30%;opacity:1}
 100% { opacity:0;width:100%}
}
@keyframes animateWidth {
 0% {opacity:1;width:0}
 40%,80% {width:30%;opacity:1}
 100% {opacity:0;width:100%}
}
@-webkit-keyframes animateHeight {
 0% {opacity:1;height:0}
 40%,80% {height:30%;opacity:1}
 100% {height:100%; opacity:0}
}
@keyframes animateHeight {
 0% {opacity:1;height:0}
 40%,80% {height:30%;opacity:1 }
 100% { height:100%;opacity:0}
}
.bg-preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 99999;
}
.bg-preloader-white {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 999999;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.bg-preloader-white-bot {
    position: fixed;
    width: 50%;
    height: 100%;
    bottom: 0px;
    right: 0px;
    background: #fff;
    z-index: 999999;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.bg-hide{
    height: 0% !important;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
/* end preloader */





#imghome{
    width: 100%;
    height: auto;
    position: relative;
}
#imghome::before{
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    background: url(../images/dot.png);
    left: -33px;
    top:39px;
    opacity: 0.8;
}

/* gallery home */
.gal-home {
  position: relative;
  letter-spacing: 1px;
  overflow: hidden;
  margin:0 auto 40px auto;
  z-index: 0;
}
.gal-home:hover img {
  width: 100%;
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
.gal-home img {
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
.gal-home .hovereffect {
  width: 100%;
  height: auto;
  max-height: 420px;
  overflow: hidden;
  float: left;
  position: relative;
  text-align: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.gal-home .hovereffect a{
    display: block;
    cursor: zoom-in;
    position: relative;
    z-index: 999;
}
.gal-home h3, .gal-home h4{
    margin-bottom: 0px;
}
.hovereffect-color::before, .hovereffect-color::after, .hovereffect::before, .hovereffect::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.gal-home .hovereffect .overlay {
  width: 90%;
  height: 90%;
  position: absolute;
  color: #fff;
  background-color: rgba(9, 12, 13, .6);
  border:1px solid rgba(200,177,111,.8);
  margin: 5%;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.gal-home .hovereffect:hover .overlay {
  bottom: 0;
  left: 0;
  opacity: 1;
}
.overlay.start-align  p {
  font-weight: 300;
  line-height: normal;
  letter-spacing: 3px;
}
.gal-home .hovereffect .overlay .devider {
  display: block;
  margin: 8px auto;
  width: 188px;
  border-top: 1px solid rgba(200,177,111,.8);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.gal-home .hovereffect:hover .overlay .devider {
  display: block;
  margin: 10px auto;
  width: 138px;
  border-top: 1px solid rgba(200,177,111,.8);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.projects-grid {
  position: relative;
  letter-spacing: 1pt;
  text-transform: uppercase;
  overflow: hidden;
}
.projects-grid:hover img {
  width: 100%;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.projects-grid img  {
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.projects-grid .hovereffect-color {
  width: 100%;
  height:100%;
  float: left;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.projects-grid .hovereffect-color .overlay {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
}
.start-align h3 {
    color: #fff;
    font-size: 24pt;
    font-weight: 600;
    position: relative;
    margin-bottom: 10px;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.projects-grid .hovereffect-color .overlay div{
  padding:10%;
  height: auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: rgba(255,255,255,1);
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.projects-grid .hovereffect-color .overlay div p{
    position: relative;
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
.projects-grid .hovereffect-color:hover .overlay {
  height: auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.projects-grid .hovereffect-color:hover .overlay .start-align h3, .projects-grid .hovereffect-color:hover .overlay a.shin{ 
    position: relative;
    bottom: 0;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.projects-grid .hovereffect-color:hover .overlay div p{
    opacity: 1;
    margin-top: 0;
    position: relative;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}