ul, ol, dl { list-style-position: outside; margin-bottom: 25px; }
ul { margin: 0; padding: 0; }
  .main-content { z-index: 2; background-color: #fff; overflow: visible; position: relative; }
   

section { padding: 130px 0; overflow: hidden; }
 
.blog-post-image img, .portfolio-image img { width: 100%; }
.grid { list-style: none; }
.grid-sizer { padding: 0 !important; margin: 0 !important; }

/* gutter size */
.grid.gutter-very-small li { padding: 3px 3px; }
.grid.gutter-small li { padding:5px 5px; }
.grid.gutter-medium li { padding:7px 7px; }
.grid.gutter-large li { padding:10px 10px; }
.grid.gutter-extra-large li { padding:15px; }
.grid.gutter-double-extra-large li { padding:20px; }
.grid.gutter-triple-extra-large li { padding:30px; }

/* grid 6 column */
.grid.grid-6col li { width: 16.67%; list-style: none; }
.grid.grid-6col li.grid-item-double { width: 33.33%; }

/* grid 5 column */
.grid.grid-5col li { width: 20%; list-style: none; }
.grid.grid-5col li.grid-item-double { width: 40%; }

/* grid 4 column */
.grid.grid-4col li { width: 25%; list-style: none; }
.grid.grid-4col li.grid-item-double { width: 50%; }

/* grid 3 column */
.grid.grid-3col li { width: 33.33%; float: left; list-style: none; }
.grid.grid-3col li.grid-item-double { width: 66.67%; }

/* grid 2 column */
.grid.grid-2col li { width: 50%; list-style: none; }
.grid.grid-2col li.grid-item-double { width: 100%; }

/* grid 1 column */
.grid.grid-1col li { width: 100%;  list-style: none; }

/* grid filter */
.grid-filter li { display: inline-block; float: none; padding: 0 20px; border: 0; position: relative; }
.grid-filter li:first-child { padding-left: 0; }
.grid-filter li:last-child { padding-right: 0; }
.grid-filter li a { border: 0; border-bottom: 1px solid; border-color: transparent; color:#828282; padding-bottom: 2px; }
.grid-filter > li.active > a, .grid-filter > li.active > a:focus, .grid-filter > li.active > a:hover, .grid-filter > li > a:hover { border: 0; color: inherit; border-bottom: 1px solid; color: #232323 }

/* ===================================
    22. Portfolio
====================================== */

.portfolio-box .portfolio-image { position: relative; overflow: hidden; }
.portfolio-box .portfolio-hover { position: absolute; width:100%; height:100%; left: 0; top: 0; opacity: 0; }
.portfolio-box:hover .portfolio-hover { opacity: 1; }
.portfolio-box .portfolio-hover .portfolio-icon { line-height: 50px; display: inline-block; vertical-align: middle; text-align: center; margin: 0 5px; }
.portfolio-box *, .portfolio-box:hover * { transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.portfolio-box .move-top-bottom { opacity: 0; transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transition-property: transform, opacity; -moz-transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -ms-transition-property: transform, opacity; }
.portfolio-box .move-bottom-top { opacity: 0; transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transition-property: transform, opacity; -moz-transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -ms-transition-property: transform, opacity; }
.portfolio-box:hover .move-top-bottom, .portfolio-box:hover .move-bottom-top { opacity: 1; transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); }
.portfolio-box .move-left-right { opacity: 0; transform: translateX(-15px); -moz-transform: translateX(-15px); -webkit-transform: translateX(-15px); -ms-transform: translateX(-15px); transition-property: transform, opacity; -moz-transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -ms-transition-property: transform, opacity; }
.portfolio-box .move-right-left { opacity: 0; transform: translateX(15px); -moz-transform: translateX(15px); -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transition-property: transform, opacity; -moz-transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -ms-transition-property: transform, opacity; }
.portfolio-box:hover .move-left-right, .portfolio-box:hover .move-right-left { opacity: 1; transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); }
.portfolio-classic .portfolio-box:hover .portfolio-image img, .portfolio-overlay .portfolio-box:hover .portfolio-image img { transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); opacity: 0.15; }
.portfolio-box .move-bottom-top-self {overflow: hidden}
.portfolio-box .move-bottom-top-self span { opacity: 0; display: block; will-change: transform; -moz-transform: translateY(200%); -ms-transform: translateY(200%); -webkit-transform: translateY(200%); transform: translateY(200%); -moz-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); -o-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); -webkit-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85);}
.portfolio-box:hover .move-bottom-top-self span {opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.portfolio-box .move-top-bottom-self {overflow: hidden}
.portfolio-box .move-top-bottom-self span { opacity: 0; display: block; will-change: transform; -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); -webkit-transform: translateY(-200%); transform: translateY(-200%); -moz-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); -o-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); -webkit-transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85); transition: all .5s cubic-bezier(0.37, 0.31, 0.2, 0.85);}
.portfolio-box:hover .move-top-bottom-self span {opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.portfolio-box .scale {opacity: 0; -moz-transform: scale3d(0.8, 0.8, 1); -o-transform: scale3d(0.8, 0.8, 1); -ms-transform: scale3d(0.8, 0.8, 1); -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1);}
.portfolio-box:hover .scale {opacity: 1; -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* portfolio classic */
.portfolio-classic .portfolio-box .portfolio-image > a { position: relative; height: 100%; z-index: 1; }
.portfolio-classic .portfolio-icon a { width: 40px; height: 40px; display: inline-block; vertical-align: middle; line-height: 40px; text-align: center; margin: 0 3px; position: relative; z-index: 3;}
.portfolio-classic .portfolio-box {overflow: hidden; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;}
.portfolio-classic .portfolio-box:hover {transform: translateY(-5px); -moz-transform: translateY(-5px); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); }
.portfolio-classic .portfolio-box:hover .portfolio-image img { transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); }
.portfolio-classic .portfolio-icon a:hover { box-shadow: 0 0 25px rgba(0,0,0,.3);}
.portfolio-classic .portfolio-box .portfolio-icon a { opacity: 0; transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); -ms-transform: translateY(15px);}
.portfolio-classic .portfolio-box:hover .portfolio-icon a {opacity: 1; transition-delay: .1s;  transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); }
.portfolio-classic .portfolio-box:hover .portfolio-icon a:last-child {transition-delay: .2s;}

/* portfolio bordered */
.portfolio-bordered .portfolio-box .portfolio-hover { opacity: 0; }
.portfolio-bordered .portfolio-box:hover .portfolio-hover { left: 20px; opacity: 1; top: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.portfolio-bordered .portfolio-box:hover .portfolio-image img { opacity: .5; -webkit-filter: blur(5px); filter: blur(5px); transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); }

/* portfolio boxed */
.portfolio-boxed .portfolio-box .portfolio-hover { opacity: 0; left: 20px; bottom: 20px; width: calc(100% - 40px); height:auto; top: inherit; transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -ms-transform: translateY(100%);  }
.portfolio-boxed .portfolio-box:hover .portfolio-hover { box-shadow: 0 0 15px rgba(0,0,0,.20); transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); opacity: 1;  }
.portfolio-boxed .portfolio-box .portfolio-hover:hover i {transform: translateX(5px); -moz-transform: translateX(5px); -webkit-transform: translateX(5px); -ms-transform: translateX(5px);}
.portfolio-boxed .portfolio-box:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 3s cubic-bezier(.165,.84,.44,1); -moz-transition: -moz-transform 3s cubic-bezier(.165,.84,.44,1); transition: transform 3s cubic-bezier(.165,.84,.44,1); }

/* portfolio switch image */
.portfolio-switch-image .portfolio-image .portfolio-switch-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -moz-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
.portfolio-switch-image .portfolio-box:hover .portfolio-switch-image { opacity: 1; -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
.portfolio-switch-image .portfolio-box:hover .portfolio-image{ -moz-transform: translate3d(0, -5px, 0); -o-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0);  }
.portfolio-switch-image .portfolio-box:hover .portfolio-caption {transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px);}

/* portfolio scattered */
.portfolio-scattered .portfolio-image { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
.portfolio-scattered .portfolio-box:hover .portfolio-image { -webkit-clip-path: inset(5% 5% 5% 5%); clip-path: inset(5% 5% 5% 5%); }
.portfolio-scattered.row-cols-lg-2 .col:nth-child(4n+0) .portfolio-box, .portfolio-scattered.row-cols-lg-2 .col:nth-child(4n+1) .portfolio-box { padding: 15% 0; }
.portfolio-scattered.row-cols-lg-2 .col:nth-child(4n+2) .portfolio-box, .portfolio-scattered.row-cols-lg-2 .col:nth-child(4n+3) .portfolio-box { padding: 0 15%; }
.portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+0) .portfolio-box, .portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+1) .portfolio-box, .portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+3) .portfolio-box, .portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+5) .portfolio-box { padding: 15% 0; }
.portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+2) .portfolio-box, .portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+4) .portfolio-box, .portfolio-scattered.row-cols-lg-3 .col:nth-child(6n+6) .portfolio-box { padding: 0 15%; }
.pagination-style-01 .page-item .page-link.portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+0) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+1) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+3) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+6) .portfolio-box{ padding: 25% 0; }
.portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+2) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+4) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+5) .portfolio-box, .portfolio-scattered.row-cols-xl-4 .col:nth-child(8n+7) .portfolio-box { padding: 0 15%; }

/* portfolio overlay */
.portfolio-overlay .portfolio-box .portfolio-image img { opacity: 1;}
.col-12.filter-content {margin: 0 8px 0 15px;}