.projects{
 overflow: auto;
 padding: 20px;
}

.projects > a{
 display: block;
 padding: 20px 0;
 text-decoration: none;
 color: #000;
}
.projects > a > div{
 padding: 0 20px;
}
.projects > a > div > img{
 display: block;
 width: 100%;
 max-width: 300px;
 margin: 0 auto;
}
.projects > a > h2{
 display: block;
 margin: 0;
 padding: 10px 0;
 font: 17pt 'Nassim';
 text-align: center;
}
.projects > a > span{
 display: block;
 font-size: 0;
 text-align: center;
}

.projects > a span i{
 display: inline-block;
 vertical-align: top;
 width: 16px;
 height: 20px;
}
.projects > a span i::before{
 display: block;
 font: 14pt 'Listicons';
 content: '\e81b';
 color:crimson
}

.projects > a span b{
 display: inline-block;
 vertical-align: top;
 height: 20px;
 font: 12pt 'Nassim';
 font-weight: 100;
 line-height: 20px;
}

.temp-notic{
 position: relative;
 display: inline-block !important;
 padding: 0 20px;
}
.temp-notic > em{
 display: table;
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 font: 14pt 'Nassim';
 text-align: center;
 vertical-align: middle;
}
.temp-notic img{
 width: 100%;
 border-radius: 3px;
}
.temp-notic > em > p{
 display: table-cell;
 margin: 0;
 padding: 0;
 vertical-align: middle;
 font: 12pt 'Nassim';
 color: #777
}



.projects-title{
 height: 80px;
 background: url(/statics/src/b1.jpg) center center;
 vertical-align: bottom;
}

.project-page{
 padding: 0 0 20px 0;
}
.project-page .page-title{
 height: 30px;
 padding: 0 20px 20px 20px !important;
}

.project-cover{
 position: relative;
 height: 300px;
 background-position: center center;
}
.project-cover::after{
 position: absolute;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.25);
 content: ' ';
 z-index: 1;
}
.project-cover > h1{
 position: absolute;
 margin: 0;
 padding: 0;
 font: 24pt 'Nassim';
 top: 40px;
 right: 40px;
 color: #fff;
 z-index: 2;
}

.project-details{
 display: block;
 font-size: 0;
 padding: 40px 20px 0 20px;
}
.project-details > div{
 display: inline-block;
 width: 50%;
 vertical-align: top;
}
.project-description{
 display: block;
 padding: 20px;
 margin: 0;
 font: 14pt 'Nassim';
 white-space: pre-wrap;
 text-align: justify;
}
.project-location{
 display: block;
 font-size: 0;
 padding: 0 20px;
}
.project-location i{
 display: inline-block;
 vertical-align: top;
 width: 16px;
 height: 20px;
}
.project-location i::before{
 display: block;
 font: 14pt 'Listicons';
 content: '\e81b';
 color:crimson
}


.project-location b{
 display: inline-block;
 vertical-align: top;
 height: 20px;
 font: 12pt 'Nassim';
 font-weight: 100;
 line-height: 20px;
 text-indent: 10px;
}


.project-specs{
 display: table;
 list-style: none;
 margin: 0;
 padding: 20px;
 color: #555
}
.project-specs > li{
 display: table-row;
 font-size: 0;
}
.project-specs > li > *{
 display: table-cell;
 font: 14pt 'Nassim';
}
.project-specs > li > i{
 white-space: nowrap;
}





.gallery-list{
 font-size: 0;
 text-align: center;
}
.gallery-list > i{
 display: block;
 padding: 20px 20px 5px 20px;
}
.gallery-list > i > img{
 display: block;
 width: 100%;
}
.gallery-list > div{
}
.gallery-list > div > span{
 display: inline-block;
 margin: 5px;
}
.gallery-list > div > span > img{
 display: block;
 height: 80px;
 border: 5px #555 solid;
 border-radius: 3px;
 transition: border-color 0.5s ease;
}
.gallery-list > div > span > img:hover{
 border-color: #fc0;
}
/*
  languages compatibility
  right to left
*/
.content-rtl .list > a{
 float: right;
}

.content-rtl .projects > a span{
 direction: rtl;
}
.content-rtl .projects > a span i{
 margin-left: 10px;
}

.content-rtl .project-details{
 direction: rtl;
}
.content-rtl .project-specs > li{
 direction: rtl;
}
.content-rtl .project-specs > li > i{
 padding-left: 20px;
}


/*
  languages compatibility
  left to right
*/
.content-ltr .list > a{
 float: left;
}

.content-ltr .projects > a span{
 direction: ltr;
}
.content-ltr .projects > a span i{
 margin-right: 10px;
}

.content-ltr .project-details{
 direction: ltr;
}
.content-ltr .project-specs > li{
 direction: ltr;
}
.content-ltr .project-specs > li > i{
 padding-right: 20px;
}


/*
  Responsivity
*/
@media all and (min-width: 1600px)
{
 .list > a{
  width: 20%;
 }
}

@media all and (max-width: 1600px)
{
 .list > a{
  width: 25%;
 }
}

@media all and (max-width: 1000px)
{
 .list > a{
  width: 33.3%;
 }
}

@media all and (max-width: 800px)
{
 .list > a{
  width: 50%;
 }

 .project-details > div{
  display: block;
  width: 100%;
 }
 .project-details > div +div{
  padding-top: 40px;
 }
}

@media all and (max-width: 500px)
{
 .list > a{
  width: 100%;
 }
}