body{
    background:#252629;
}

/* --------- Preloader ------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

#progress {
	background:#444;
	top:0;
	z-index:1555;
    width:1px;
    position:fixed;
}

#loader-wrapper{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:3000;
    background: #222222;
}

#loader{
    display:block;
    position:relative;
    left:50%;
    top:50%;
    width:480px;
    height:480px;
    margin: -240px 0 0 -240px;
    border: 1px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    z-index:3000;
    
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;

}

.loader-logo{
    width:312px;
    height:164px;
    z-index:9999;
    position:absolute;
    top:50%;
    left:50%;
    margin: -82px 0 0 -156px;
    background: url(../img/loader-logo.png) no-repeat center;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    
    -webkit-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/* include this only once */
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #222222;
    z-index: 2000;
}
 
.loaded #loader {
    opacity: 0;
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all 6s ease-out; 
            transition: all 6s ease-out;
}

.loaded #loader-wrapper{
 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
 
        -webkit-transition: all 0.3s 1s ease-out; 
                transition: all 0.3s 1s ease-out;
}

.no-js #loader-wrapper {
    display: none;
}
.no-js h1 {
    color: #222222;
}

/* --------- Slider ---------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

#sliderwrap{
   overflow:hidden;
}

.texture{
    width:100%;
    height:100%;
    background: url(../img/texture2.png) repeat;
    position:absolute;
    top:0;
    left:0;
    z-index:600;    
}

#slider {
    overflow:hidden;
	position:relative;
	margin:0 auto;/*make the image slider center-aligned */
    
}

.projectSlider{
    margin:0 auto;
    margin-left:-1px!important;
    position:relative;
}

#slider img {
	position:absolute;
	display:none;
	z-index:1;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
}

.thumbsholder{
overflow:hidden;
width:100%;
height:157px;
margin:0px;
padding:0px;
margin-top:-4px;
}

/*thumbnails*/
#thumbs {position:relative;list-style:none;padding:0;margin:0;overflow:hidden; width:5000px; max-height:152px;}
#thumbs li {float:left;display:block;font-size:0;border:1px solid #fff; border-left:0px;}
#thumbs img {border:1px solid #999;width:260px;height:150px; cursor:pointer;}

/*-----------navigation buttons----------------*/

.navPrev{
    position:absolute;
    height:150px;
    width:70px;
    left:160px;
    z-index:100;
    margin-top:1px;
    background:rgba(24, 25, 27, 0.7) url(../img/navright.png) center center no-repeat ;
      -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    cursor:pointer;
    opacity: 0;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.navNext{
    position:absolute;
    height:150px;
    width:70px;
    right:0px;
    z-index:100;
    margin-top:1px;
    background:rgba(24, 25, 27, 0.7) url(../img/navright.png) center center no-repeat ;
    cursor:pointer;
    opacity: 0;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.navNext:hover{
    opacity: 1;
    
}

.navPrev:hover{
    opacity: 1;
}

a.navPrev, a.navPlay, a.navPause, a.navNext 
{
   user-select: none;
}
/* --------- Others ------- */
#slider img
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

/* --------- Share Buttons ------- */
ul.share-buttons{
  list-style: none;
  padding: 0;
  position:absolute;
  z-index:999;
  right:17px;
  bottom:157px;
}

ul.share-buttons li{
    display:inline-block; 
    background:rgba(24,25,27,0.6);
    padding:10px;
    border:1px solid rgba(24,25,27,0.0);
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

ul.share-buttons li:hover{border:1px solid #fff;}

ul.share-buttons li:hover:nth-child(1) {background:rgba(59,89,152,0.9);}
ul.share-buttons li:hover:nth-child(2) {background:rgba(0,170,241,0.9);}
ul.share-buttons li:hover:nth-child(3) {background:rgba(0,131,190,0.9);}
ul.share-buttons li:hover:nth-child(4) {background:rgba(202,33,39,0.9);}

/* ------ Side Mobile Panel -- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.mobile-panel-menu{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:0%;
    margin-left:-50px;
    background:#18191b;
    z-index:1500;
    opacity:1;
    display:none;
}

.mobile-panel-menu-header{
    width:103px;
    height:80px; 
    position:absolute;
    background:#18191b;
    right:-153px;
    top:20px;
    
}

.mobile-panel-x-button{
    width:103px;
    height:80px; 
    float:right;
    margin-right:-10px;
    color:#fff;
}

.mobile-panel-x-button:hover{
    cursor:pointer;
}

.mobile-panel-x-button img{
    margin-top:13px;
}

.mobile-navigation{
    margin-top:120px;
    list-style:none;
    font-size:60px;
    text-align:center;
    color:#fff;
    margin-left:-3000px;
    padding:0px;
}

.mobile-navigation li:hover{
    background:#fff;
    color:#18191b;
}

.mobile-navigation a{
    color:#666;
    text-decoration:none;
}

.mobile-navigation a:hover{
    color:#18191b;
    text-decoration:none;
}

.mobile-panel-menu-header:hover{
    background:#252629;
    cursor:pointer;
}



.mobile-panel-menu-header img{
    margin-top:13px;
}




/* ------ Side Panel --------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */


.border-hack{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:25px;
    background:#18191b;
    z-index:1550;
}
.panel-menu{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:350px;
    background:#18191b;
    z-index:1500;
    padding:20px;
    padding-right:30px;
    margin-left:-190px;
}

.panel-switcher{
    list-style:none;
    padding:0px;
    font-size:14px;
    width:61px;
    margin-left:221px;
    margin-bottom:30px;
}


.panel-switcher li{
    float:left;
    margin-left:7px;
    text-align:center;
}

.panel-switcher li:first-child{
    margin-left:0px;
}

.panel-menu-header{
    width:103px;
    height:54px;
    margin-left:200px;  
    position:relative;
}

.panel-menu-header img{
    position:absolute;
    left:0;
}

.panel-logo{
    opacity:0;
}


.panel-menu .navigation{
    padding:0px;
    list-style:none;
    margin-top:70px;
}

.panel-menu .navigation li{
    border-bottom:1px solid #343537;
    padding:10px;
    text-align:center;
}

.navigation a{
    color:#343537;
    font-size:17px;
    text-transform:uppercase;
}

.active {
    color:#fff;
    text-decoration: none;
    font-weight:bold;
}

/* ------ Page Styles -------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.container-fluid{
    padding-left:150px;
}

#logo{
    width:128px;
    height:128px;
    background:url(../img/slider-logo.png) no-repeat center;
    position:absolute;
    bottom:2%;
    left:50%;
    margin-left:-64px;
    z-index:600;
    opacity:0.6;
}

/* ------ About Page --------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.about {
    padding:30px;
    padding-left:80px;
    background:url(../img/axiom-pattern.png) repeat center top;
    background-attachment: fixed;
    box-sizing: border-box; 
}

.aboutcols{
    height:100%;
    overflow:hidden;
    position:relative;
}

.about .col-md-4{
    border:1px solid #fff;
    padding:60px 90px;
    width:30%;
    margin:1.4%;
    text-align:center;
    
}


.about h2{
    font-size:90px;
    color:#666;
    margin-bottom:30px;
    text-align:center;
}

.line{
    width:100px;
    height:1px;
    background:#fff;
    margin:0px auto;
    margin-top:25px;
    margin-bottom:25px;
}

.about h3{
    font-size:40px;
    color:#515154;
    text-align:center;
    color:#fff;
}

.about p{
    color:#666;
    font-size:18px;
    margin-bottom:20px;
}



/* -- Projects Gallery Page -- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.projects{
    border-top:1px solid #666;
    overflow: hidden;
    padding-bottom:50px;
}

.projects .col-md-10{
    position:relative;
}

/* ------ Project Header ---------- */
/* --------------------------- */

.year20{
    width:88px;
    height:196px;
    background: url("../img/20.png");
    margin-left:10px;
    margin-top:80px;
}

.weadjective{
    font-size:130px;
    transform: rotate(90deg);
	transform-origin: left top 0;
    margin-left:135px;
    margin-top:20px;
    color:#515154;
}

.wetitle{
    font-size:60px;
    min-width:190px;
    transform: rotate(90deg);
	transform-origin: left top 0;
    margin-left:145px;
    margin-top:-176px;
    color:#18191b;
}

/* ------ Slick Slider ---------- */
/* ------------------------------ */

.projects-holder{
   max-height:580px;
}

.project{
   border:5px solid #252629;
}


.inactive-img{
    filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(70%);
    -moz-filter:    grayscale(70%);
    -ms-filter:     grayscale(70%);
    -o-filter:      grayscale(70%);
    filter: gray; 
}


#project-details{
    width:600px;
    overflow-y:hidden;
    
}

/* ------ Contact Page ------ */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.contact{
    height:800px;
    border-top:1px solid #666;
    padding-top:30px;
}

.contact h2 {
position:relative;
text-align:center;
font-size:90px;
color:#515154;
margin-bottom:0px;
margin-top:0px;
}

.contact h2 span {
    display:inline-block;
    padding:0 20px;
    background:#252629;
}
.contact h2:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    left:0px;
    right:0px;
    top:50%;
    height:1px;
    background:#666;
}

.contact p{
    text-align:center;
    font-size:27px;
    line-height:32px;
    margin-bottom:20px;
    margin-top:30px;
    color:#666;
}

.contact .col-md-7{
    padding-right:0px;
    padding-left:0px;
    margin-left:0px;
    padding-top:30px;
    position:relative;
}

.contactform{
    margin-top:20;
    margin-bottom:30px;
    
}

.form-control{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */
    background:#18191b;
    border:0px solid #666;
    color:#fff;
}

.input-group-addon{
    opacity:0;
}

.col-md-5{
    padding:0px;
}

.col-md-5 ul{
 list-style:none;
 padding:0px;
 margin:0px;
 margin-top:30px;
}

.col-md-5 ul li{
    width:100%%;
    padding:16px;
    margin-top:7px;
    background:#18191b;
    font-size:20px;
}

.col-md-5 ul li:first-child{
    margin-top:0px;
}

.contactdetails {
    border-top:1px solid #666;
    border-bottom:1px solid #666;
}

.contactdetails .contactmap{
    height:450px;
    border-right:1px solid #666;
    margin-left:-22px;
    margin-right:20px;
    padding-bottom:30px;
}

.contactdetails ul{
    margin-left:-20px;
    margin-top:0px;
}

.contactdetails ul li{
    border-bottom:1px solid #666;
    padding:38px;
    color:#666;
    background:none;
}

.contactdetails li:last-child{
    border-bottom:0px;   
}

.feature.map {
  height:100%;
}
 .feature.map  iframe {
    height:100%;
    width:94%;
    margin-left:22px;
    border:0;

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.6666 0.6666 0.6666 0 0 0.6666 0.6666 0.6666 0 0 0.6666 0.6666 0.6666 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
	  -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
  }

.contactsocial{
    margin-bottom:100px;
}

.contactsocial p{
    font-size:40px;
}

.contactsocial ul{
    width:600px;
    margin:0 auto;
    margin-top:40px;
}

.contactsocial ul li{
    float:left;
    width:100px;
    height:100px;
    background:#fff;
    border-radius:100px;
    margin-left:20px;
}


/* ------ Single Project Page --------- */
/* --------------------------- */
/* --------------------------- */
/* --------------------------- */

.projectpage {
    padding:30px;
    padding-left:60px;
}

.projectpage h2{
    font-size:90px;
    color:#515154;
    margin-bottom:30px;
}

.projectpage p{
    color:#515154;
    font-size:27px;
    line-height:32px;
    margin-bottom:20px;
}

.projectpage .btn{
    border:1px solid #515154;
    background:#ccc;
    font-size:30px;
    margin-top:30px;
}

.projectpage .between{
    font-size:30px;
    vertical-align:text-top;
    margin:10px;
    color:#999;
}

@media screen and (max-width:1700px) {

    .aboutcols .col-md-4{opacity:1;padding:60px 30px;}

}

@media screen and (max-width:1250px) {
    .about{margin-left:-40px;padding:40;}
    .about .col-md-4{opacity:1;width:100%;padding:60px 30px;margin:0px;margin-top:20px;}

}



@media screen and (max-width:1025px) {

    .border-hack{display:none}
    .panel-menu{display:none}
    .container-fluid{padding-left:0px;}
    .about .col-md-4{opacity:1;float:none; width:100%;}
    .mobile-panel-menu{display:block;}

}





@media screen and (max-width: 600px) {

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}

}