/* 14. lower page */
.lower-page {
position: relative;
height: 100%;
min-height: inherit;
overflow: scroll;
margin-left: 0;
margin-right: 0;
background: none;
z-index: 15;
}

.lower-page-works {
position: relative;
height: 100%;
min-height: 700px;
overflow: scroll;
margin-left: 0;
margin-right: 0;
background: none;
}

@media only screen and (max-width: 768px) {
  .lower-page-works {
    height: 100%;
    min-height: inherit;
    }
}

/* 5. works */
/* 5.1. works col row  */
.col-item,
.row-item {
position: relative;
float: left;
width: 100%;
height: 100%;
overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .col-item {
    height: 100%;
    min-height: inherit;
  }
}

.col-item.n-2 {
width: 50%;
background: none;
}

@media only screen and (max-width: 768px) {
  .col-item.n-2 {
    width: 100%;
  }
}

.row-item.n-1 {
height: 50%;
/* margin-top: -1px; */
}

@media all and (min-width: 1920px) {
  .row-item.n-1 {
    height: 30%;
  }
}

@media only screen and (max-width: 1200px) {
  .row-item.n-1 {
    height: 30%;
  }
}

@media only screen and (max-width: 995px) {
  .row-item.n-1 {
    height: 50%;
  }
}

@media only screen and (max-width: 880px) {
  .row-item.n-1 {
	height: 50%;
  }
}

@media only screen and (max-width: 768px) {
  .row-item.n-1 {
    height: auto;
    min-height: inherit;
  }
}

.row-item.n-2 {
height: 50%;
/* margin-top: -1px; */
}

@media only screen and (max-width: 768px) {
.row-item.n-2 {
    height: auto;
    min-height: inherit;
  }
}

.row-item.n-3 {
height: 50%;
}

@media all and (min-width: 1920px) {
  .row-item.n-3 {
    height: 70%;
  }
}

@media only screen and (max-width: 1200px) {
  .row-item.n-3 {
    height: 70%;
  }
}

@media only screen and (max-width: 995px) {
  .row-item.n-3 {
    height: 50%;
  }
}

@media only screen and (max-width: 880px) {
  .row-item.n-3 {
    height: 50%;
  }
}

@media only screen and (max-width: 768px) {
  .row-item.n-3 {
    height: auto;
    min-height: inherit;
  }
}


.image-works {
position: relative;
z-index: 5!important;
}

.image-works>.hover-effect {
position: absolute;
background: #111;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity 0.35s ease-out;
   -moz-transition: opacity 0.35s ease-out;
    -ms-transition: opacity 0.35s ease-out;
	 -o-transition: opacity 0.35s ease-out;
        transition: opacity 0.35s ease-out;
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
top: 25px;
left: 25px;
bottom: 25px;
right: 25px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
-webkit-border-radius: 25px;
   -moz-border-radius: 25px;
    -ms-border-radius: 25px;
     -o-border-radius: 25px;
        border-radius: 25px;
z-index: 1;
}

.image-works:hover .hover-effect {
        opacity: 0.65;
   -moz-opacity: 0.65;
-webkit-opacity: 0.65;
filter: alpha(opacity=65);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
}


/* 5.8. works PhotoSwipe */
.item-folio__caption {
display: none;
visibility: hidden;
}

/* 5.7. works hover */
.icon-works {
position: absolute; 
width: 100%;
top: 50%;
text-align: center;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
z-index: 1;
}

.icon-works a {
position: relative;
display: inline-block;
vertical-align: middle;
text-decoration: none;
width: 50px;
height: 50px;
line-height: 50px;
margin: 0 auto;
font-size: 20px;
background: #fff;
border: 1px solid #fff;
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.icon-works a,
.icon-works a:hover,
.icon-works a:visited,
.icon-works a:active,
.icon-works a:focus {
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;	
-webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
     -o-transform: scale(0.75);
        transform: scale(0.75);
color: #111;
}

.icon-works a.iw-slide-left {
-webkit-transform: translate3d(-60px,0,0);
   -moz-transform: translate3d(-60px,0,0);
    -ms-transform: translate3d(-60px,0,0);
     -o-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0);
}

.icon-works a.iw-slide-right {
-webkit-transform: translate3d(60px,0,0);
   -moz-transform: translate3d(60px,0,0);
    -ms-transform: translate3d(60px,0,0);
     -o-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0);
}

.image-works:hover .icon-works a {
padding: 0;	
-webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
     -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
}

.icon-works a:hover {
background: #fff;
border: 1px solid #fff;
}

.image-works:hover .icon-works {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.icon-works a:before {
position: relative;
z-index: 1;
}

.icon-works a i {
position: relative;
z-index: 1;
}

.image-works {
position: relative;
z-index: 5!important;
}