/*
* Archive page
*/

.wrapper-ssh-archive {
    padding:0;
    /*margin:2rem auto;
    width:90%;*/
    /*height:50vh;*/min-height:300px;

    

    /*background:rgb(83,154,185,0.85);*/
    background:rgb(255,255,255,0.1);

    background-image: url('../images/bg-wp-showcase.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container-ssh-archive {
    margin: auto;
    width:100%;

    position:relative;
}

.container-ssh-archive-content {
    width: calc(100% - 170px);

    padding-left:130px;
}

.wrapper-ssh-archive-header{
    padding-top:1rem;
    margin-bottom:1rem;
    height:20%;max-height:80px;

    
}

.wrapper-ssh-filter{
    padding:0.5rem 0.3rem;
    width:100%;
    height:40px;

    display:flex; align-items: center;

    border:1px solid rgb(0,0,0,0.1);
    background:rgb(200,200,200,0.1);
}

.wrapper-ssh-filter label {
    margin-left:0.3rem;
}

.wrapper-ssh-archive-content{
    /*height:80%;*/
}


.archive-header {
    font-size:4rem;
}

/*#element*/

.wrapper-showcase-projects-list{
    width:100%;
    overflow: hidden;

    display:flex;flex-wrap: wrap;
}

.wrapper-showcase-project {
    padding:0.3rem;
    margin-right:2%;margin-bottom:2%;
    width:22%;height:60vh;min-height:400px;

    border:1px solid rgb(209,209,209,0.99);
    background:rgb(240,240,240,1);
    
}

.wsp-header {
   
    width:100%; height:10%;min-height:2rem;
    display:flex;align-items: center;justify-content: space-between;

    font-size:1rem;
    line-height:1.1rem;
}

.wsp-header a {
    color:rgb(0,0,0,0.85);
    text-decoration:none; 

    /*background:rgb(2,78,85,0.5);*/
}

.wsp-header .wsp-header-left
{
    width:80%;height:100%;
}
.wsp-header .wsp-header-right{
    width:20%;height:100%;
}

.wsp-header .project-title {
    padding-left:0.3rem;
    width:100%;height:100%;

    display:flex;align-items: center;

    font-size:1.1rem;
    line-height:1.2rem;

    font-weight:500;

    color:rgb(0,0,0,1);
}

.icon-link {
    width:100%;height:100%;
    display:flex;align-items:center;justify-content: center;
}

.icon-link svg {
    width:1.5rem;height:auto;
    displaY:block;
}

.wsp-image {
    width:100%;height:50%;

    /*
    border-top:1px solid rgb(255,255,255,0.35);
    border-bottom:1px solid rgb(255,255,255,0.35);
    */
    /*box-shadow: 0px 0px 10px 1px #575757;*/
}

.wsp-image  .img-cover {
    width:100%;height:100%;
    background-size:cover;
    background-position: center;
}

.wsp-footer {
    width:100%;height:39.8%;
    display:flex; flex-direction: column; justify-content: space-between;
    flex-wrap:wrap;

   /* background: linear-gradient(180deg, rgba(2,78,85,0.5) 0%, rgba(255,255,255,0.2) 100%);*/
}

.wsp-footer .wsp-footer-row {
    /*padding:0 0.5rem;*/
    width:100%;
}

.wsp-footer .wsp-footer-row .project-utilities {
    margin-top:0.3rem;
    width:100%;

    display:flex; flex-wrap: wrap; align-items: center;
}

.wsp-footer .wsp-footer-row .project-utilities .project-tag {
    padding:0.2rem;
    margin:0 0.2rem;

    font-size:0.8rem;
    line-height:1rem;

    border:1px solid rgb(0,0,0,0.1);
    background:rgb(226,169,67,0.9);
}

.wsp-footer .wsp-footer-row .lq-link-button-1{
    margin:0 1rem 1rem 0;
}

.wsp-container-excerpt {
    /*min-height:170px; */
    font-size:0.8rem;
    line-height:1rem;
    color:rgb(0,0,0,0.75);
}

.wsp-container-excerpt p {
    padding:0 0.8rem;
}

.wsp-footer-actions {
    width:100%;

    display:flex;align-items: center;justify-content: flex-end;
}

/*
* Single page
*/


.ssh-wrapper-header {

    width:100%; /*eight:400px;*/
    position:relative;


    border-bottom:1px solid rgb(40,40,40,1);
    background:rgb(220,220,220,0.85);

    background-image: url('../images/bg-wp-showcase.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wrapper-ssh-header {
    width:100%;height:100%;

    display:flex;
}

.ssh-header-left {
    padding-top:1rem;
    padding-left:130px;
    height:70vh;min-height:850px;
    width:70%;
}

.ssh-header-right{
    width:40%;min-height:100%;

    display:flex;flex-direction: column;
    align-items: center;justify-content: center;
}

.single-showcase-project
{
    width:100%;
}

.single-showcase-project .ssh-header-main {
    margin-bottom:1rem;
    width:100%;
} 

.single-showcase-project .ssh-header-main .title{
    font-size:2rem;
    color:rgb(40,40,40,0.75);
}

.single-showcase-project .ssh-header-main .subtitle{
    font-size:1.6rem;
    color:rgb(40,40,40,0.75);
}

.single-showcase-project .ssh-header {
    padding-left:20px;
    width:calc(100% - 20px);

    display:flex;flex-wrap: wrap; 
}

.single-showcase-project .ssh-header .ssh-item {
    padding:0.3rem;
    margin-right:1rem;

    display:flex;flex-wrap: wrap; 
}

.single-showcase-project .ssh-header .ssh-item .ssh-title {
    width:100%;
    font-size:1.2rem;
    color:rgb(40,40,40,0.75);
}


.ssh-short-description {
    margin-top:2rem;
    height:100px;

    font-size:1.1rem;
    line-height:1.4rem;
    font-weight:300;
    color:rgb(40,40,40,0.85);
}



.single-showcase-project .ssh-header .ssh-item .ssh-content {
    width:100%;
    font-size:1.3rem;
    font-weight:600;
    color:rgb(40,40,40,1);
}

.single-showcase-project .ssh-header-image {
    margin-top:2rem;
    /*width:100%;height:100%;*/
    /*position:absolute;top:-5vw;right:5vw;*/

    display:flex;align-items: center;justify-content: center;

}

.single-showcase-project .img-horizontal img {
    width:80%;height:auto; max-width:45vw;
    display:block;

    border:1px solid rgb(40,40,40,1);
}

.single-showcase-project .img-vertical img {
    width:auto;height:80%;  max-height:70vh;
    display:block;

    border:1px solid rgb(40,40,40,1);
}

.single-project-content{
   /* min-height:400px;*/
}


.vertical-stripe-dark {
    width:80px;height:300px;
    position:absolute;top:0;left:20px;
    

    
    background:rgb(40,40,40,1);
}

.vertical-stripe-dark-horizontal {
    width:200px;height:80px;
    position:absolute;top:0;left:20px;
       
    background:rgb(40,40,40,1);
}

.vertical-stripe-dark .content {
    margin-top:50%;
    display:flex;align-items: center;justify-content: center;
    transform:rotate(90deg);

    font-size:1.3rem;
    line-height:1.2rem;
    color:rgb(255,255,255,1);
}

.wrapper-short-description {
    width:100%;height:200px;

    position:relative;z-index:-1;

    filter:blur(25px);
    background:rgb(40,40,40,0.8);
}

.container-short-description{


    font-size:1.2rem;
    line-height:1.2rem;
    color:rgb(255,255,255,0.85);
    
}

/*
* Masory grid
*/

.wrapper-mg {
    display: flex;
}
  
  .mg-col {
    display: flex;
    flex-direction: column;
  }

  .mg-col:nth-child(1){
    position:relative;top:-1vw;
  }

  .mg-col:nth-child(2){
    position:relative;top:1vw;
  }

  .mg-col:nth-child(4){
    position:relative;top:1.5vw;
  }
  
  .mg-item {
    width: 8vw; height: 8vw;
    
    display: flex;
    align-items: center;justify-content: center;
   
    border: 1px solid white;
    background-color: rgb(40, 40, 40);
  }
  
  .mg-item-image {
    background-size:cover;
    background-position:center;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
  }


  .mg-item-image:hover{
    cursor: pointer;
    filter: grayscale(0%);
  }

  .mg-item-icon img {
    display: block;
    width: 75%;
    height: auto;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.mg-item-icon:hover img {
    filter: grayscale(0%);
}

  .mg-item-text div{   
    width:100%;height:100%;
    display:flex;align-items: center;justify-content: center;

    font-size:1rem;
    line-height:1.2rem;

    color:rgb(150,150,150,0.85);
    text-align:center;

  }

  .mg-item-empty {
    background:transparent;
    border:1px solid transparent;
  }

  /* Hide "X" positions */
  .hidden {
    background: transparent;
    border: none;
    pointer-events: none;
  }

/*
* For embbed html content in iframe
*/

.ssh-demo-embed {
    width:100%;height:100%;
}

.ssh-demo-embed iframe {
    min-width:660px;
}



@media (max-width: 650px) {
    
    .ssh-demo-embed iframe {
        min-width:unset;
    }
}