/*------------------------------------------------------------------
[Table of contents]

1. Body
  1. Main Container / .main-container
  2. Header / <header>
    2.1 Logo / #logo
    2.2. Navigation / <nav>
      2.2.1. Socail Icons Link / .socials
      2.2.2. Main Nav / .main-nav
  3. Main Content / <main>
    3.1. Main Slider / .main-slider
      3.1.1 Slider Navigation / .slider-nav
    3.2. Thumb Slider / .thumb-slider
    3.3. Page Loader / #pageloader
    3.4. Mask Loader / .mask
    3.5. Contact Page / #contactus
      3.5.1. Contact Form / #contact-form
    3.6. Gallery Pages/ #gallery
    3.7. Blog Page / .blog-posts
     3.7.1 Post Single / .post-single
     3.7.2 Post Meta / .post-meta
     3.7.3 Blog Sidebar / <aside>
  4. Footer / <footer>
-------------------------------------------------------------------*/
body{
   font-family: 'Lato', sans-serif;
   font-size: 16px;

}

/*-- Main Container --*/
.main-container{
   padding: 20px;
   width: 100%;
   float: left;
   right:0;
   position: relative;
   transition: color 0.4s ease-in-out;
   -webkit-transition: color 0.4s ease-in-out;
   -moz-transition: color 0.4s ease-in-out;
   -o-transition: color 0.4s ease-in-out;
   -ms-transition: color 0.4s ease-in-out;
}
.main-container.move{
   /*right: 250px;*/
}

/*-- Header --*/
header{ 
   float: left;
   width: 100%;
   padding: 20px 20px 0 20px; 
   position: absolute;
   top: 0;
   left: 0;
}

/*-- Header > Logo --*/
h1#logo{
   float: left;
   padding: 20px;
   margin-top: 20px;
   position: fixed;
   top: 20px;
   left: 20px;
   border-radius: 0;
}
h1#logo img{
  float: left;
}

/*-- Header > Nav > Socials --*/
header nav{ 
   float: right;
   margin-top: 20px; 
}

header .socials{ 
   float: left; 
}
header .socials li{ 
   float: right; 
   margin-right: 2px;
   width: 50px;
   height: 32px;
   perspective: 800px;
  -webkit-perspective: 800px; 
  -moz-perspective: 800px; 
  -o-perspective: 800px; 
  -ms-perspective: 800px; 
}
/* with Main Nav toggle btn */
header .socials li a,
header .toggle a{
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
}
/* with Main Nav toggle btn */
header .socials li a i,
header .toggle a i{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

/*-- Header > Nav > Main Nav --*/
header .main-nav{ 
   float: right;
   perspective: 800px;
  -webkit-perspective: 800px; 
  -moz-perspective: 800px; 
  -o-perspective: 800px; 
  -ms-perspective: 800px;
}
header .main-nav .toggle{
   width: 50px;
   height: 32px;
   perspective: 800px;
  -webkit-perspective: 800px; 
  -moz-perspective: 800px; 
  -o-perspective: 800px; 
  -ms-perspective: 800px; 
}
.main-nav .scrollbar{
   position: absolute;
   top: -20px;
   right: -322px;
   background: #25304e;
   width: 250px;
   height: 100%;
   z-index: 500;
   transition: color 0.5s ease-in-out;
   -webkit-transition: color 0.5s ease-in-out;
   -moz-transition: color 0.5s ease-in-out;
   -o-transition: color 0.5s ease-in-out;
   -ms-transition: color 0.5s ease-in-out;
   transform-origin: 125px 125px;
   transform: rotateY( 45deg ) ;
   -webkit-transform: rotateY( 45deg )  translateZ( -125px );
   -moz-transform: rotateY( 45deg )  translateZ( -125px );
   -o-transform: rotateY( 45deg )  translateZ( -125px );
   -ms-transform: rotateY( 45deg )  translateZ( -125px );
   display: none;
}
.main-nav.visible .scrollbar{
   right: -252px;
   -webkit-transform: rotateY( 0 );
   -moz-transform: rotateY( 0 );
   -o-transform: rotateY( 0 );
   -ms-transform: rotateY( 0 );
}
.main-nav .scrollbar ul:first-child{
   margin-top: 10px;
}
.main-nav .scrollbar ul li ul{
   display: none;
}
.main-nav .scrollbar ul li ul a{
   font-size: 12px;
}
.main-nav .scrollbar ul li ul ul a{
   font-size: 11px;
}
.main-nav .scrollbar ul li{
   padding: 0 10px;
}
.main-nav .scrollbar ul li a{
   color: #e5e5e5;
   text-decoration: none;
   padding: 18px 10px;
   display: block;
   text-transform: uppercase;
   border-bottom: #333 1px dotted;
   font-size: 13px;
   transition: color 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   
}
.main-nav .scrollbar ul li a i{
   padding-left: 3px;
   font-size: 11px;
   opacity: 0.6;
}
.main-nav .scrollbar ul li a:hover,
.main-nav .scrollbar ul li.active>a{
   background: #e5e5e5;
   color: #25304e;
   border-bottom: #25304e 1px solid;
}
.main-nav .scrollbar ul li.active.has-sub>a{
   background: #c5c5c5;
}
.main-nav .scrollbar ul li.active.has-sub li.active.has-sub>a{
   background: #a5a5a5;
}

/*-- Main Content --*/
main{
   float: left;
   width: 100%;
}

/*-- Main Content > Main Slider --*/
.main-slider{ 
   width: 100%; 
   float: left; 
   position: relative;
   overflow: hidden;
   margin-bottom: 2px;
   background: #25304e;
}
.main-slider ul{
  margin-bottom: 0;
}
.main-slider li.item{
   height: 100%;
   width: 100%;
   position: relative;
   overflow: hidden;
}
.main-slider li .slide-mask{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 3000;
  background: #25304e;
  top: 0;
  left: 0;
}
.main-slider .caption{
   -o-transition: color 0.8s ease-in;
   -moz-transition: color 0.8s ease-in;
   -ms-transition: color 0.8s ease-in;
   transition: color 0.8s ease-in;
}
.main-slider .caption.bigcenter{
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) scale(0);
   -webkit-transform: translate(-50%, -50%) scale(0);
   -o-transform: translate(-50%, -50%) scale(0);
   -moz-transform: translate(-50%, -50%) scale(0);
   -ms-0transform: translate(-50%, -50%) scale(0);
   -webkit-transition: color 0.8s ease-in;
   text-align: center;
   color: #f5f5f5;
   z-index: 1900;
}
.main-slider .caption.compact{
   opacity: 0;
   position: absolute;
   bottom: 40px;
   left: 40px;
   transform: translate(-150%,0);
   -webkit-transform: translate(-150%,0);
   -o-transform: translate(-150%,0);
   -moz-transform: translate(-150%,0);
   -ms-0transform: translate(-150%,0);
   color: #f5f5f5;
   z-index: 1900;
}
.main-slider .caption.compact.animate{
   opacity: 1;
   transform: translate(0,0);
   -webkit-transform: translate(0,0);
   -o-transform: translate(0,0);
   -moz-transform: translate(0,0);
   -ms-0transform: translate(0,0);
}
.main-slider .caption.bigcenter.animate{
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
   -webkit-transform: translate(-50%, -50%) scale(1);
   -o-transform: translate(-50%, -50%) scale(1);
   -moz-transform: translate(-50%, -50%) scale(1);
   -ms-0transform: translate(-50%, -50%) scale(1);
}
.main-slider .caption p{
   text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.main-slider .caption p.small{
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.05em;
   margin-bottom: 8px;
   color: #f5f5f5;
}
.main-slider .caption span{ font-size: 12px; }
.main-slider .caption p.big{
   font-size: 34px;
   line-height: 40px;
   font-weight: 700;
   text-transform: uppercase;
   font-family: "Bitter", serif;
   letter-spacing: 0.05em;
   margin-top: 14px;
   color: #f5f5f5;
}
.main-slider .caption p.medium{
   font-size: 30px;
   line-height: 32px;
   font-weight: 700;
   text-transform: uppercase;
   font-family: "Bitter", serif;
   letter-spacing: 0.05em;
   margin-top: 0px;
   color: #f5f5f5;
}
.main-slider iframe{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   z-index: 1800;
}
.main-slider iframe:-webkit-full-screen{
  top: auto;
   left: auto;
  transform: none;
   -webkit-transform: none;
   -o-transform: none;
   -moz-transform: none;
   -ms-transform: none;
}
.main-slider iframe:-moz-full-screen{
  top: auto;
   left: auto;
  transform: none;
   -webkit-transform: none;
   -o-transform: none;
   -moz-transform: none;
   -ms-transform: none;
}
.main-slider iframe:fullscreen{
  top: auto;
   left: auto;
  transform: none;
   -webkit-transform: none;
   -o-transform: none;
   -moz-transform: none;
   -ms-transform: none;
}
.main-slider *[data-vimeo] div[id]{
   width: 100%;
   height: 100%;
}
.main-slider li .pattern{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1800;

}

/*-- Main Content > Main Slider > Slider Navigation --*/
.main-slider .slider-nav{
   position: absolute;
   bottom: 40px;
   right: 20px;
   z-index: 1900;
}
.slider-nav ul{
   float: right;
   margin-bottom: 0;
}
.slider-nav ul li{
   float: left;
}
.slider-nav li.play{
   display: none;
}
.slider-nav li a{
   display: block;
   color: #25304e;
   background: #fff;
   width: 35px;
   height: 23px;
   position: relative;
   margin-left: 2px;
   font-size: 10px;
   opacity: 0.3;
   transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
}
.slider-nav li a:hover{
   background: #25304e;
   color: #fff;
}
.slider-nav ul:hover a{
   opacity: 0.8;
}
.slider-nav li a i{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

/*-- Thumb Slider --*/
.thumb-slider{
   float: left;
   height: 86px;
   width: 100%;
}
.thumb-slider ul{
   float: right;
   position: relative;
}
.thumb-slider ul li{
   margin-right: 2px;
   border-bottom: #999 4px solid;
   padding-bottom: 2px;
   font: normal normal normal 13px/1 FontAwesome;
}
.thumb-slider li a{ 
   display: block;
   height: 80px;
   width: 100%;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   -webkit-transition: color 0.5s ease;
   -o-transition: color 0.3s ease;
   transition: color 0.3s ease;   
   -ms-transition: color 0.3s ease;   
   -moz-transition: color 0.3s ease;
}
.thumb-slider ul{
  margin-bottom: 0;
}
.thumb-slider ul li{
   border-bottom-color: #999;
}
.thumb-slider li:hover a,
.thumb-slider .synced li a{
   opacity: 0.6;
}
.thumb-slider .synced li{
   border-bottom-color: #25304e;
}
.thumb-slider li:before{
   opacity: 0;
   content: "\f03d";
   position: absolute;
   right: -12px;
   bottom: 6px;
   z-index: 100;
   color: #25304e;
   padding: 3px 4px;
   -webkit-transition: color 0.5s ease;
   -o-transition: color 0.3s ease;
   transition: color 0.3s ease;   
   -ms-transition: color 0.3s ease;   
   -moz-transition: color 0.3s ease;
}
.thumb-slider li.video:before{
   content: "\f03d";
}
.thumb-slider li:hover:before,
.thumb-slider .synced li:before{
   opacity: 1;
   right: 2px;
}
.thumb-slider li a img{
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%,0);
   -webkit-transform: translate(-50%,0);
   -o-transform: translate(-50%,0);
   -moz-transform: translate(-50%,0);
   -ms-transform: translate(-50%,0);
   -webkit-transition: color 1s ease;
   -o-transition: color 1s ease;
   transition: color 1s ease;   
   -ms-transition: color 1s ease;   
   -moz-transition: color 1s ease;
}
.thumb-slider li:hover a img{
   top: -20px;
}
.thumb-slider .owl-item.loading{
   min-height: 50px;
}

/*-- Page Loader --*/
#pageloader{
   position: absolute;
   width: 55%;
   height: 400px;
   top: 0px;
   right: 20px;
   z-index: 1900;
   padding: 20px 20px 20px 20px;
   display: none;
   margin-bottom: 20px;
   overflow: hidden;
}
#pageloader #load{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  display: block;
  opacity: 0.6;
  background: #fff;
  padding: 3px;
  border-radius: 2px;
}
#pageloader #load img{
  opacity: 0.8;
}
#pageloader .content{
   width: 100%;
   margin-top: 82px;
   padding-bottom: 40px;
}
.main-container.move #pageloader{
   right: 20px;
}
#pageloader .row{
   margin-bottom: 40px;
}

/*-- Mask loader --*/
.mask{
	position: absolute;
	top: -7px;
	left: 398px;
	height: 100%;
	width: 100%;
	background: #25304e;
	z-index: 2000;
	text-align: center;
}
.maskcontainer { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 2000;
  opacity: 0.6;
}



/*-- Gallery Pages --*/
#gallery .col-md-12.reduce-margin{
 padding-left: 5px;
 padding-right: 5px;
}
#gallery #items{
   width: 100%;
}
#gallery #items .item{
   height: 180px;
   overflow: hidden;
   float: left;
   padding: 20px 10px 0px 10px;
   width: 100%;
   height: 250px;
   position: relative;
}
#gallery #items .item a{
   display: block;
   background: #000;
}
#gallery #items.gallery-two .item{
   width: 50%;
   height: 220px;
}
#gallery #items.gallery-three .item{
   width: 33.33%;
   height: 180px;
}
#gallery #items.gallery-four .item{
   width: 25%;
   height: 160px;
}
#gallery #items.gallery-five .item{
   width: 20%;
   height: 140px;
}
#gallery #items.gallery-six .item{
   width: 16.66%;
   height: 120px;
}
#gallery #items.mansonry .item{
   height: auto;
}
#gallery #items .item img{
   width: 100%;
   transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
}
#gallery #items .item>i,
#gallery #items .item>span{
   position: absolute;
   top: 50%;
   left: 50%;
   transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
   transform: translate(-50%,-50%) scale(2);
   -webkit-transform: translate(-50%,-50%) scale(2);
   -o-transform: translate(-50%,-50%) scale(2);
   -moz-transform: translate(-50%,-50%) scale(2);
   -ms-transform: translate(-50%,-50%) scale(2);
   opacity: 0;
   font-size: 16px;
   padding: 4px;
   color: #fff;
   display: block;
   margin-top: 10px;
}
#gallery #items .item:hover>i,
#gallery #items .item:hover>span{
   opacity: 1;
   transform: translate(-50%,-50%) scale(1);
   -webkit-transform: translate(-50%,-50%) scale(1);
   -o-transform: translate(-50%,-50%) scale(1);
   -moz-transform: translate(-50%,-50%) scale(1);
   -ms-transform: translate(-50%,-50%) scale(1);
}
#gallery #items .item span a{
   background: none;
   color: #fff;
   display: inline-block;
   width: 28px;
   text-align: center;
   font-size: 18px;
   padding: 5px 0;
   transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
   border-radius: 2px;
   border: none;
}
#gallery #items .item span a:hover{
   color: #25304e;
   background: rgba(255,255,255,0.6);
}
#gallery #items .item:hover img{
   opacity: 0.6;
}
#filters{
   margin-bottom: 10px;
   margin-left: 2px;
}
#filters button{
   background: #25304e;
   color: #f5f5f5;
   border: none;
   border-radius: 2px;
   padding: 7px;
}
#filters button:hover{
   opacity: 0.8;
}
div.pp_default .pp_expand{
   display: none !important;
}
#portfolio-s p{
   font-size: 15px;
   line-height: 24px;
}
.portfolio-details h4{
   margin-top: 30px;
}
.portfolio-details li{
   color: #666;
   line-height: 24px;
}
.portfolio-details li i{
   padding-right: 5px;
}

/*-- Blog Page --*/
.blog-posts a{
   color: #25304e;
}
.blog-posts .post-image{
   margin-bottom: 15px;
}
.blog-posts .post-date{
   color: #666;
}
.blog-posts h3{
   margin-bottom: 15px;
   line-height: 31px;
}
.blog-posts .post-content{
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: #e5e5e5 1px solid;
}
/*-- Blog Page > Post Single --*/
.blog-posts .post-single .post-content{
  border-bottom: none;
}
.blog-posts .post-single .post-meta{
   margin-bottom: 15px;
}
.blog-posts .post-single .post-block{
   padding: 20px 0;
   margin: 15px 0;
   border-bottom: #ddd 3px solid;
}
.blog-posts .post-single .post-block label{
   margin-bottom: 10px;
}
.blog-posts .post-single .post-author .img-thumbnail,
.blog-posts .post-single .post-comments .img-thumbnail{
   float: left;
   margin-right: 15px;x;
}
.blog-posts .post-single .post-comments .img-thumbnail img{
   width: 80px;
}
.blog-posts .post-single .post-comments li .comment{
   clear:both;
   padding-bottom: 30px;
   float: left;
   width: 100%;
}
.blog-posts .post-single .post-comments li .comment .comment-by{
   margin-bottom: 15px;
   display: block;
}
.blog-posts .post-single .post-comments li .comment .comment-by a{
   padding: 5px;
   background: #25304e;
   color: #fff;
   border-radius: 2px;
   text-decoration: none 
}
.blog-posts .post-single .post-comments li .comment .comment-by a:hover{
   opacity: 0.6;
}
.blog-posts .post-single .post-comments li li{
   padding-left: 40px;
}
.blog-posts .post-single .post-author .img-thumbnail img{
   width: 130px;
}
/*-- Blog Page > Post Meta --*/
.blog-posts .post-meta span{
   padding-right: 10px;
}
.blog-posts .post-meta span i{
   color: #666;
}
/*-- Blog Page > Blog Sidebar --*/
#journalpage aside .btn-lg, 
#journalpage aside .btn-group-lg>.btn {
   padding: 6px 12px; 
   line-height: 1.16;
   background: #25304e;
   border-color: #25304e;
   color: #f5f5f5;
}

/*-- footer --*/
footer{
  clear: both;
}
footer p{
  font-size: 11px;
  color: #555;
  padding-top: 1px;
}