﻿.projects-top-row{
    background-color:#bcb19a;
}

.projects-top-row .projects-head-row{
    margin:90px 0;
}

.projects-top-row .projects-head-row .head{
    color:#a0220a;
    font-size: 36px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 500;
    margin: 0;
    color: #be2a30;
}

.projects-top-row .projects-head-row .head2 {
    display: block;
    font-weight: 100;
     font-size: 32px;
}



.projects-top-row .projects-head-row .desc {
    margin-top: 30px;
    font-weight: 100;
    font-size: 20px;
}


.projects-filter {
    background-color: #151716;
    position:relative;
    z-index:10
}

.projects-filter ul{
   list-style:none;
   padding:15px 0;
   margin:0;
   transition:all 0.5s;
   display:flex;
   flex-wrap:wrap;

}
.projects-filter.scrolled ul{

   padding:4px 0;
  
}


.projects-filter ul li{
   display:inline-block;
   margin-right:45px;
}

.projects-filter ul li .head{
 color:#f1f1ee;
 font-weight:500;
 padding:5px 0;
 margin:0;
 cursor:pointer;
 font-size:18px;
 white-space:nowrap;
}

.projects-filter ul li .head:hover{
 color:#be2a30;

}

.projects-filter ul li.active .head{
 color:#be2a30;

}


.projects-con{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    margin:45px 0 90px 0;

       position:relative;
    z-index:9
}

.projects-con .project-item .img{
     width:100%;
     height:calc(25vw - 35px);

         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"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .5s;
    transition: all .5s;
    overflow:hidden;
}

.projects-con .project-item:hover .img{
        filter: none;
        -webkit-filter: grayscale(0%);
}
.projects-con .project-item .img img{
     width:100%;
     height:100%;
     object-fit:cover;
     transition: all .5s;
}
.projects-con .project-item:hover .img img{
     transform:scale(1.05)
}

.projects-con .project-item .head{
margin:10px 0;
font-size:20px;
font-weight:500;
     transition: all .3s;
}
.projects-con .project-item:hover .head{
color:#a0220a;
}



.projects-con .project-item .opt-con{
display:flex;
}

.projects-con .project-item .opt-con .opt{
padding:0 20px;
border-left:1px solid #151716;
font-size:14px;
}

.projects-con .project-item .opt-con .opt:first-of-type{
padding-left:0;
border-left:0
}

@media(max-width:1199px){
    .projects-filter ul {

}

        .projects-filter ul li:last-child {
       margin-right: 30px;
}
    .projects-filter ul li:last-child {
       margin-right: 0;
}
}
@media(max-width:991px){
    .projects-con {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin: 30px 0 90px 0;

}
    .projects-con .project-item .img {
    height: calc(50vw - 30px);

}
}

@media(max-width:768px){


.projects-top-row .projects-head-row{
    margin:45px 0;
}

.projects-top-row .projects-head-row .head{
    font-size: 32px;
    letter-spacing: 1px;

}

.projects-top-row .projects-head-row .head2 {

     font-size: 28px;
}



.projects-top-row .projects-head-row .desc {
    margin-top: 20px;
    font-size: 16px;
}


.projects-filter ul{
   padding:15px 0;

}
.projects-filter.scrolled ul{

   padding:4px 0;
  
}


.projects-filter ul li{
   margin-right:20px;
}

.projects-filter ul li .head{
 font-size:14px;
 padding:3px 0;
}



.projects-con{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin:15px 0 45px 0;

}

.projects-con .project-item .img{

     height:calc(50vw - 15px);
       filter: none;
        -webkit-filter: grayscale(0%);
}


.projects-con .project-item .head{
margin:7px 0;
font-size:16px;

}

.projects-con .project-item .opt-con .opt{
padding:0 15px;
font-size:10px;

}



}






/*______PROJECT_____________*/

.project-row{
    display:flex;
   flex-direction:row-reverse
}
.project-row .img-col{
    display:flex;
    flex:1 0 0;
    max-width:50%;
    min-height:calc(100vh - 266px);
    position:relative;
}
.project-row .img-col img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0;
}


.project-row .txt-col{
    display:flex;
    flex:1 0 0;
        max-width:50%;
        flex-direction:column;
        justify-content:space-between;
}


.project-row .txt-col .h-container{
  float:left;
}

.project-row .txt-col .pr-head{
       font-size: 36px;
    font-weight: 500;
    padding: 0;
    margin: 0;
}.project-row .txt-col .short-desc{
     font-size: 28px;
    font-weight: 200;
    padding: 0;
    margin: 30px 0;
}

.project-row .txt-col .desc{
     font-size: 18px;
    font-weight: 100;
    padding: 0;
   margin: 30px 0;
}



.project-row .txt-col .pr-options{
  margin:0;
}
.project-row .txt-col .pr-options .pr-option{
  margin-bottom:10px;
  align-items:center;
  display:flex;

}
.project-row .txt-col .pr-options .pr-option .title{
  font-size:16px;
  font-weight:300;
  color:#999;
  order:1;
  white-space:nowrap;
}
.project-row .pr-options .pr-option:after{
  content:'';
  flex-grow:1;
  order:2;
  height:1px;
  background-color:rgba(21,23,22,0.2);
  min-width:30px;
  margin:0 15px;
}

.project-row .txt-col .pr-options .value{
  font-size:16px;
   font-weight:300;
  order:3;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}


.project-row .txt-col .pr-options .value .val a{
    text-decoration:underline;
}
.project-row .txt-col .pr-options .value .val+.val:before {
    content: ",";
    padding: 0 3px;
    color: rgb(21,23,22);
}




    .project-row .txt-col .pr-stones {
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 30px;
    }


.project-row .txt-col .pr-stones .ttl {
  font-size:16px;
   font-weight:300;
}

.project-row .txt-col .pr-stones .pr-images {
display:flex;
flex-wrap:wrap;
}

.project-row .txt-col .pr-stones .pr-images a{
margin:15px 15px 0 0;
width:75px;
height:75px;
}

.project-row .txt-col .pr-stones .pr-images a img{
width:100%;
height:100%;
object-fit:cover;
}







.project-gallery-row{
    margin:45px 0;
}
.pr-gallery .img{

    width:calc(25% - 22.5px);
    overflow:hidden;
}
    .pr-gallery .img img {
        width: 100%;
        transition:all 1s;
    }


      .pr-gallery .img:hover img {
       transform:scale(1.06)
    }


    
.lg-backdrop {
    background-color: rgb(21,23,22);

}

.lg-icon {

    font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lg-toolbar .lg-icon {
    font-size:36px;
}
.lg-actions .lg-next {
    right: 0
}

.lg-actions .lg-prev {
    left: 0
}

.lg-actions .lg-next, .lg-actions .lg-prev {
    background-color: rgba(21,23,22,0.5);
    border-radius: 0;
    font-size:24px;
}

.lg-toolbar .lg-close:after {
    content: "\ea08";
}


.lg-actions .lg-next:before{
      content: "\e904";
}
.lg-actions .lg-prev:after {
    content: "\e903";
}













.pr-contact-row{
    background-color:rgb(21,23,22);
    padding:90px 0;
    color:#f1f1ee;
}


.pr-contact-row .pc-head-row{
   text-align:center;
}
.pr-contact-row .pc-head-row .pc-head-con{
   width:100%
}

.pr-contact-row .pc-head-row .pc-head-con .head{
   font-size:24px;
   font-weight:400;
   margin:0;
   margin-bottom:30px;
}

.pr-contact-row .pc-head-row .pc-head-con .desc{
   font-size:20px;
   font-weight:100;
   margin:30px 0;
   text-align:center;
 
}

@media(max-width:991px) {

    .pr-gallery .img{

    width:calc(33.333333333333333333% - 20px);
}
}
@media(max-width:767px){
    


    
.project-row{
   flex-wrap:wrap;
}
.project-row .img-col{
    min-width:100%;
    max-width:100%;
    min-height:66vw;
    order:1;
}



.project-row .txt-col{
        max-width:100%;
        min-width:100%;
        flex-direction:column;
        justify-content:space-between;
        order:2;
}


.project-row .txt-col .pr-head{
    margin: 15px 0;
       font-size: 28px;

}.project-row .txt-col .short-desc{
     font-size: 20px;
    margin: 15px 0;
}

.project-row .txt-col .desc{
     font-size: 14px;
   margin: 15px 0;
}

.project-row .txt-col .pr-options .pr-option {
                margin-bottom: 7px;
            }

.project-row .txt-col .pr-options .pr-option .title {
                    font-size: 12px;
                }



.project-row .txt-col .pr-options .value {
                font-size: 12px;
            }

.project-row .txt-col .pr-options .value .val a {
                   
                }




    .project-row .txt-col .pr-stones {
        margin-top: 15px;
        margin-bottom: 15px;
    }


.project-row .txt-col .pr-stones .ttl {
  font-size:12px;
}


.project-row .txt-col .pr-stones .pr-images a{
margin:10px 10px 0 0;
width:60px;
height:60px;
}




.project-gallery-row{
    margin:30px 0;
}
.pr-gallery .img{

    width:calc(50% - 5px);
}
    





      .lg-toolbar .lg-icon {
        font-size: 32px;
    }

    .lg-actions .lg-next, .lg-actions .lg-prev {
        font-size: 20px;
    }



    .pr-contact-row {
      
        padding: 60px 0;

    }

                .pr-contact-row .pc-head-row .pc-head-con .head {
                    font-size: 20px;
                    margin-bottom: 20px;
                }

                .pr-contact-row .pc-head-row .pc-head-con .desc {
                    font-size: 16px;
                    margin: 20px 0;
                }
}