﻿.liner-high{
width: 100px;
height: 5px;
float: right;
}
.liner-mid{
width: 30px;
height: 5px;
background: #222;
display: inline-block;
}
.liner-center{
width: 30px;
height: 5px;
display: inline-block;
text-align: center;
}
.liner-center {
background: #0585B9;
}
.feature-expansion p {
border-top: solid 10px #0585B9;
}
.preview-wrap {
background: #0585B9;
}
/*PORTFOLIO*/
#portfolio {
background-size: cover;
}
#portfolio .welcome-text{
color: #686351;
}
/*-- 1. General --*/
div#portfolio {
padding-top: 50px;
background: #333;
}

div#portfolio_title {
margin-bottom: 33px;
}

div#portfolio_title h2 {
color: #FFF;
}

.sortablePortfolio, #portfolioFilter {
list-style: none;
margin: 0px;
padding: 0px;
}

#portfolio-wrap {
padding-top: 0px;
}

/*-- 2. Filter --*/
div#filter {
padding-bottom: 30px;
}

div#filter_wrapper {
position: relative;
margin-bottom: 0px;
}

ul#portfolioFilter {
line-height: 18px;
position: relative;
}

ul#portfolioFilter li {
float: left;
line-height: 46px;
padding-left: 15px;
padding-right: 15px;
margin: 5px;
font-family: "MontserratRegular";
font-size: 12px;
letter-spacing: 1px;
line-height: 19px;
padding: 10px 25px;
border-radius:4px;
text-transform: uppercase;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}

ul#portfolioFilter li:hover {
background: #fff;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}

ul#portfolioFilter li.separator {
line-height: 49px;
padding: 0px;
color: #CCC;
font-size: 11px;
}
ul#portfolioFilter li {
color: #FFF;
border: solid 1px #FFF;
}
ul#portfolioFilter li {
color: #FFF;
}
ul#portfolioFilter li:hover {
color: #080808;
}

/*-- 3. Thumbs --*/
div#portfolio_thumbs {
position: relative;
z-index: 7;
}

div#portfolio_thumbs ul {
display: block;
}
div#portfolio_thumbs.columns-3 ul li {width: 33.333%;}
div#portfolio_thumbs.columns-2 ul li {width: 50%;}
@media(max-width:767px){
div#portfolio_thumbs.columns-3 ul li {width: 100%;}
div#portfolio_thumbs.columns-2 ul li {width: 100%;}
}
div#portfolio_thumbs ul li {
float: left;
width: 25%;
position: relative;
padding: 0px;
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
background: #FFF;
}
div#portfolio_thumbs ul li:hover {
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
}

div#portfolio_thumbs ul li img {
width: 100%;
height: auto;
display: block;
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
}
div#portfolio_thumbs ul {
background: #29ABE0;
}

.opactiyReduce{
opacity: 0.2 !important;
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
}

div#portfolio_thumbs ul li div.item_info {
width: 100%;
height: 100%;
min-height:200px;
max-height:200px;
padding: 25px;
}

div#portfolio_thumbs ul li div.item_info h3 {
color: #0585B9;
font-size: 14px;
letter-spacing: 2px;
line-height: 21px;
text-transform: uppercase;
}
div#portfolio_thumbs ul li div.item_info p >
span{
color: #272727;
font-size: 12px;
font-weight: 200;
line-height: 19px;
padding: 0;
}
.add-space-min{
margin-top: 20px;
margin-bottom: 20px;
}

/*-- 4. Item page --*/
#portfolio_item {
display: none;
width: 100%;
}

#item_container {
padding-bottom: 30px;
}

#item_content {
margin: 0 auto;
margin-top: 60px;
padding: 40px;
}

#text_content {
/*width: 680px;*/
line-height: 20px;
text-align: left;
font-size: 12px;
color: #666;
}

#text_content h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-family:"MontserratRegular";
font-size: 36px;
line-height: 43px;
margin-top: 15px;
margin-bottom: 15px;
color: #222;
}
#text_content h5{
margin-top: 20px;
font-family:"OpenSansRegular";
font-size: 24px;
line-height: 31px;
font-weight: normal;
color: #222;
}
#text_content p {
font-size: 14px;
line-height: 21px;
color: #666;
font-family:"OpenSansRegular";
font-weight: normal;
margin-bottom: 20px;
}
.spec-list{
list-style: none;
padding: 0;
margin-top: 30px;
padding-left: 20px;
}
.spec-list >
li{
padding: 10px;
background: #ccc;
margin-bottom: 2px;
}
/* Slider */
#item_slider {
/*    width: 680px;*/
margin: 0;
padding: 0;
}

#item_slider a:active {
outline: none;
}

.slides,  .flex-control-nav,  .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}

#item_slider .slides >
li {
display: none;
}

#item_slider .slides img {
max-width: 100%;
display: block;
}

#item_slider {
position: relative;
zoom: 1;
}

#item_slider .slides {
zoom: 1;
}

#item_slider .slides >
li {
position: relative;
}

#item_slider .flex-direction-nav li a {
width: 30px;
height: 30px;
line-height: 26px;
color: #FFF;
position: absolute;
top: 0px;
cursor: pointer;
text-indent: 1px;
font-size: 15px;
font-family:"OpenSansLight";
text-align: center;
}

#item_slider .flex-direction-nav li a:hover {
background: transparent;
}

#item_slider .flex-direction-nav li .next {
left: 31px;
}

#item_slider .flex-direction-nav li .prev {
left: 0px;
}


/* Video */
#item_video_wrapper {
}

#item_video {
height: 0;
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}

#item_video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}

/* Control buttons */
#control_buttons {
/*    width: 680px;*/
padding: 15px 8px 5px 8px;
margin-top: 10px;
}

#control_buttons a {
display: inline-block;
width: 45px;
height: 45px;
border-radius: 4px;
line-height: 38px;
margin-bottom: 10px;
margin-left: 5px;
border:solid 2px #fff;
background: transparent;
color: #fff;
font-size: 24px;
font-family:"OpenSansLight";
text-align: center;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#control_buttons a:hover {
display: inline-block;
width: 45px;
height: 45px;
border-radius: 4px;
line-height: 38px;
margin-bottom: 10px;
margin-left: 5px;
border:solid 2px #fff;
background: #fff;
color: #000;
font-size: 24px;
font-family:"OpenSansLight";
text-align: center;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.url-linker a{
margin-left: 0px;
margin-top: 10px;
}
.project-info-tag{
padding-top:0px;
margin-bottom: 10px;
padding-bottom: 20px;
}
.project-info-tag >
span{
letter-spacing: 0px;
font-family:"OpenSansLight";
font-size: 14px;
line-height: 21px;
text-transform: none;
padding: 7px;
}

#grid .mix{
opacity: 0;
display: none;
}
.project-deatil-image{
padding: 0 !important;
}
.det-overlay{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
}
.project-deatil-image:hover >
a >
img{
opacity: 0;
-webkit-transition: all .8s linear;
-moz-transition: all .8s linear;
-ms-transition: all .8s linear;
-o-transition: all .8s linear;
transition: all .8s linear;
}
.project-deatil-image:hover >
a >
.det-overlay{
opacity: 1;
-webkit-transition: all .8s linear;
-moz-transition: all .8s linear;
-ms-transition: all .8s linear;
-o-transition: all .8s linear;
transition: all .8s linear;
}
.project-features-wrap{
margin-top: 40px;
}
.project-spec-lines{
list-style: none;
padding-left: 0;
margin-left: 0;
}
.project-spec-lines li{
padding: 10px;
background:#eee;
margin-bottom: 5px;
font-size: 14px;
line-height: 21px;
font-family:"OpenSansRegular";
color: #444;
}
/*iPhone Landscape Mode and Mediium Smart Phones*/
@media screen and (max-width: 480px) {
ul#portfolioFilter{
text-align: center;
}
ul#portfolioFilter li{
margin-bottom: 10px;
float: none;
display: inline-block;
}
div#portfolio_thumbs ul li{
width: 50%;
}
.feature-block-top, .feature-block-bottom{
padding: 50px 20px;
}
}	
/*iPad Portrait Mode, iPad Mini and Small Tablets */
@media (max-width: 768px) {
ul#portfolioFilter{
text-align: center;
}
ul#portfolioFilter li{
margin-bottom: 10px;
float: none;
display: inline-block;
}
div#portfolio_thumbs ul li{
width: 50%;
}
.feature-block-top, .feature-block-bottom{
padding: 50px 20px;
}
}