.gs_portfolio_area { }
.gs_portfolio_area .container {
padding-left: 0;
padding-right: 0;
}
.gs_portfolio_area .container .row {
margin-left: -5px;
margin-right: -5px;
}
.gs_portfolio_area .col-xs-1, .gs_portfolio_area .col-sm-1, .gs_portfolio_area .col-md-1, .gs_portfolio_area .col-lg-1, .gs_portfolio_area .col-xs-2, .gs_portfolio_area .col-sm-2, .gs_portfolio_area .col-md-2, .gs_portfolio_area .col-lg-2, .gs_portfolio_area .col-xs-3, .gs_portfolio_area .col-sm-3, .gs_portfolio_area .col-md-3, .gs_portfolio_area .col-lg-3, .gs_portfolio_area .col-xs-4, .gs_portfolio_area .col-sm-4, .gs_portfolio_area .col-md-4, .gs_portfolio_area .col-lg-4, .gs_portfolio_area .col-xs-5, .gs_portfolio_area .col-sm-5, .gs_portfolio_area .col-md-5, .gs_portfolio_area .col-lg-5, .gs_portfolio_area .col-xs-6, .gs_portfolio_area .col-sm-6, .gs_portfolio_area .col-md-6, .gs_portfolio_area .col-lg-6, .gs_portfolio_area .col-xs-7, .gs_portfolio_area .col-sm-7, .gs_portfolio_area .col-md-7, .gs_portfolio_area .col-lg-7, .gs_portfolio_area .col-xs-8, .gs_portfolio_area .col-sm-8, .gs_portfolio_area .col-md-8, .gs_portfolio_area .col-lg-8, .gs_portfolio_area .col-xs-9, .gs_portfolio_area .col-sm-9, .gs_portfolio_area .col-md-9, .gs_portfolio_area .col-lg-9, .gs_portfolio_area .col-xs-10, .gs_portfolio_area .col-sm-10, .gs_portfolio_area .col-md-10, .gs_portfolio_area .col-lg-10, .gs_portfolio_area .col-xs-11, .gs_portfolio_area .col-sm-11, .gs_portfolio_area .col-md-11, .gs_portfolio_area .col-lg-11, .gs_portfolio_area .col-xs-12, .gs_portfolio_area .col-sm-12, .gs_portfolio_area .col-md-12, .gs_portfolio_area .col-lg-12{
padding-left: 7px;
padding-right: 7px;
}
.single-gsp {
margin: 7px 0;
}
#ms-container img{
width: 100%;
}
.grid-list{
margin-bottom: 10px
}
.gs_p_icons {
position: absolute;
top: 60%;
width: 100%;
left: 0;
}
iframe{
padding: 10px;
}
figure.effect-sadie .gs_p_icons,figure.effect-masonary .gs_p_icons,figure.effect-slider .gs_p_icons, figure.filter-effect-sadie .gs_p_icons {
opacity: 0;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie:hover .gs_p_icons,figure.effect-masonary:hover .gs_p_icons,figure.effect-slider:hover .gs_p_icons, figure.filter-effect-sadie:hover .gs_p_icons {
color: #fff;
transform: translate3d(0,-40%,0) translate3d(0,-20px,0);
opacity: 1;
} .gs_p_icons > a {
width: 42px;
display: inline-block;
height: 42px;
background: rgba(255, 255, 255, 0.18);
text-align: center;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
border: none !important;
text-decoration: none;
}
.gs_p_icons > a > i {
display: block;
line-height: 42px;
font-size: 18px;
color: #fff; }
.gs_p_icons > a:hover {
text-decoration: none;
background: rgba(255, 255, 255, 0.45);
}
.gs_p_icons > a:hover,
.gs_p_icons > a:visited {
color: transparent !important;
} .white-popup {
position: relative;
background: #FFF;
padding: 0;
width:auto;
max-width: 80%;
margin: 0 auto; 
}
.gs_p_popup img{
width: 100%;
padding: 10px;
}
.gs_p_popup_content {
padding-top: 30px;
padding-right: 30px;
}
.gs_p_popup_content h2 {
font-size: 28px;
font-weight: lighter;
margin-bottom: 20px;
margin-top: 0;
}
.gs_p_popup_content p {
margin-bottom: 12px;
line-height: 1.6;
}
.gsp_btn,
.gsp_btn:hover,
.gsp_btn:visited {
padding: 10px 16px;
border-radius: 3px;
margin-top: 7px;
display: inline-block;
color: #fff;
text-transform: uppercase;
margin-bottom: 25px;
text-decoration: none;
}
.gs_p_popup_content .gs_p_btn:hover{
background: transparent;
}
.gs-filter-cats {
padding: 0 !important; 
margin: 0 !important;
}
.gs-filter-cats li {
list-style-type: none;
display: inline-block;
margin: 0 10px 10px 0!important;
border: 1px solid #ccc;
border-radius: 3px;
padding: 1px 6px;
cursor: pointer;
}
.mix {
display: none;
margin-bottom: 5px;
}
.gs_portfolio_area a {
text-decoration: none;
border: none !important;
outline: none !important;
}
.prev-next-navigation {
padding: 50px 0;
}
.prev-next-navigation .previous {
float: left;
}
.prev-next-navigation .next {
float: right;
}
.prev-next-navigation .previous a,
.prev-next-navigation .next a {
text-transform: uppercase;
display: inline-block;
margin: 0 4px;
color: #333;
font-size: 12px;
border: 1px solid #333;
font-weight: 600;
padding: 5px 15px;
background: #fff;
-webkit-transition: all .45s ease;
-moz-transition: all .45s ease;
-ms-transition: all .45s ease;
-o-transition: all .45s ease;
transition: all .45s ease;
}
.prev-next-navigation .previous a:hover,
.prev-next-navigation .next a:hover {
text-decoration: none;
color: #fff;
background-color: #fa566f;
border: 1px solid #fa566f;
}  .gs_p_popup .container {
width: auto;
} .gs_p_portfolio .col-md-3 figure.effect-sadie p {
line-height: 1.2;
padding: 7px;
}
.gs_p_portfolio figure.effect-zoe h2,
.gs_p_portfolio figure.filter-effect-zoe h2 {
width: 65%;
text-align: left;
line-height: 1.4;
font-size: 18px;
color: #000;
} 
.gs-filter-cats li.filter {
-webkit-transition: all .30s ease;
-moz-transition: all .30s ease;
-ms-transition: all .30s ease;
-o-transition: all .30s ease;
transition: all .30s ease;
}
.gs-filter-cats li.filter:hover { 
background: rgba(25, 136, 190, 0.8);
border: 1px solid rgba(25, 136, 190, 0.8);
color: #fff;
}
.gs-filter-cats .active { 
background: rgba(25, 136, 190, 0.96);
border: 1px solid rgba(25, 136, 190, 0.96);
color: #fff;
}
.filter-selected-cats ul.gs-filter-cats { margin: 20px 5px !important; }
@media only screen and (min-width: 1280px) {
.gs_p_portfolio .col-md-3 figure.effect-zoe p.description { bottom: 4em; padding: 1em; }
.gs_p_portfolio .col-md-3 .effect-zoe a i { padding: 8px 5px; }
.gs_p_portfolio .col-md-3 figure.effect-julia figcaption h2 { font-size: 20px; line-height: 1.2; }
.gs_p_portfolio .col-md-3 figure.effect-julia p { font-size: 63%; line-height: 1.2; }
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption { padding: .5em; }
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption::before { top: -35px !important; height: 2.5em !important; }
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption h2 { font-size: 20px; line-height: 1.2; }
.gs_p_portfolio .col-md-3 figure.effect-kira:hover p { text-align: center; }
.gs_p_portfolio figure.effect-kira figcaption h2 { text-align: center; font-size: 20px; }
}
@media only screen and (min-width: 1024px) and (max-width: 1220px) {
.gs_p_portfolio .col-md-3 figure.effect-sadie p { font-size: 63%; }
.gs_p_portfolio .col-md-3 .gs_p_icons > a { width: 36px; height: 36px; }
.gs_p_portfolio .col-md-3 .gs_p_icons > a > i { line-height: 36px; }
.gs_p_portfolio .col-md-4 figure.effect-zoe p.description { padding: 2.3em 1em; }  
.gs_p_portfolio .col-md-4 .effect-zoe a i { padding: 8px 7px; }
.gs_p_portfolio .col-md-3 figure.effect-zoe p.description { display: none; }
.gs_p_portfolio .col-md-3 figure.effect-zoe figcaption { height: auto; }
.gs_p_portfolio .col-md-3 figure.effect-zoe h2 { width: 100%; }
.gs_p_portfolio .col-md-3 figure.effect-zoe .icon-links { float: left; margin: 10px 0 !important; }
.gs_p_portfolio .col-md-3 figure.effect-julia figcaption,
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption { padding: .5em; }
.gs_p_portfolio .col-md-3 figure.effect-julia figcaption h2,
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption h2 { font-size: 20px; line-height: 1.2; }
.gs_p_portfolio .col-md-3 figure.effect-julia p { font-size: 63%; line-height: 1.2; }
.gs_p_portfolio .col-md-4 figure.effect-julia figcaption,
.gs_p_portfolio .col-md-3 figure.effect-winston figcaption { padding: 1em; }
.gs_p_portfolio .col-md-3 figure.effect-winston figcaption p { padding: 0 1em 2% 0; }
.gs_p_portfolio .col-md-3 figure.effect-kira figcaption::before { top: -35px !important; height: 2.5em !important; }
.gs_p_portfolio figure.effect-kira figcaption h2,
.gs_p_portfolio .col-md-3 figure.effect-kira:hover p { text-align: center; }
.grid figure.effect-kira figcaption,
.grid figure.effect-winston figcaption { padding: 1em; }
figure.effect-kira figcaption::before { height: 2.5em; }
figure.effect-zoe p.icon-links a { font-size: 100%; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
.gs_p_portfolio .col-md-3 figure.effect-sadie p { font-size: 63%; }
.gs_p_portfolio .col-md-3 .gs_p_icons > a { width: 36px; height: 36px; }
.gs_p_portfolio .col-md-3 .gs_p_icons > a > i { line-height: 36px; }
figure.effect-zoe p.description { padding: 3em 1em; }
.grid figure.effect-kira figcaption,
.grid figure.effect-winston figcaption { padding: 1em; }
.grid figure h2 { font-size: 22px; padding: 0 1em; }
figure.effect-kira figcaption::before { height: 2.5em; top: -5px; }
figure.effect-zoe p.icon-links a { font-size: 100%; }
}  @media (min-width: 768px){
.gs_p_popup_content{
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 600px){
.gs_p_popup_content{
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 480px){
.gs_p_popup_content{
padding-left: 15px;
padding-right: 15px;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
.grid figure.effect-julia figcaption,
.grid figure.effect-kira figcaption,
.grid figure.effect-winston figcaption { padding: 1em; }
.grid figure h2 { font-size: 20px; padding: 0 1em; }
figure.effect-kira figcaption::before { height: 2.5em; top: -5px; }
figure.effect-zoe figcaption { padding: .5em; }
.gs_p_portfolio figure.effect-zoe h2 { font-size: 17px; padding: 0; }
figure.effect-zoe:hover p.description { padding: 1.7em .5em; }
figure.effect-zoe p.icon-links a { font-size: 88%; }
} 
@media only screen and (min-width: 480px) and (max-width: 599px) { 
.grid figure.effect-julia figcaption,
.grid figure.effect-kira figcaption,
.grid figure.effect-winston figcaption { padding: 1em; }
figure.effect-julia h2 { font-size: 18px; }
figure.effect-julia p { font-size: 63%; line-height: 1.4; }
.grid figure h2 { font-size: 17px; padding: 0; }
figure.effect-kira figcaption::before { height: 2em; top: -38px; }
figure.effect-kira p { padding: 1.5em 0.5em; font-weight: 400; }
figure.effect-winston a { margin: 0 5px; font-size: 90%; }
figure.effect-zoe figcaption { padding: .4em; height: 3.4em; }
.gs_p_portfolio figure.effect-zoe h2 { width: 100%; text-align: center; font-size: 17px; }
figure.effect-zoe p.icon-links a { float: none; font-size: 100%; }
figure.effect-zoe:hover p.description { padding: 10px 7px; font-size: 13px; letter-spacing: initial; }
}
@media only screen and (max-width: 479px) {
.gs_p_popup_content { padding-left: 15px; padding-right: 15px; }
.gs_p_portfolio figure.effect-sadie p { line-height: 1.4 }
.gs_p_portfolio .gs_p_icons > a { width: 36px; height: 36px; }
.gs_p_portfolio .gs_p_icons > a > i { line-height: 36px; }
figure.effect-zoe figcaption { height: auto; }
.gs_p_portfolio figure.effect-zoe h2 { width: 100%; }
.gs_p_portfolio figure.effect-zoe .icon-links{ margin: 10px 0 !important; }
.gs_p_portfolio .col-md-6 figure.effect-julia figcaption,
.gs_p_portfolio .col-md-3 figure.effect-julia figcaption,
.gs_p_portfolio .col-md-4 figure.effect-julia figcaption,
.gs_p_portfolio figure.effect-kira figcaption { padding: .5em; }
.gs_p_portfolio .col-md-6 figure.effect-julia figcaption h2,
.gs_p_portfolio .col-md-3 figure.effect-julia figcaption h2,
.gs_p_portfolio .col-md-4 figure.effect-julia figcaption h2 { font-size: 20px; line-height: 1.2; }
.gs_p_portfolio figure.effect-kira figcaption h2 { line-height: 1.2; text-align: center; }
.gs_p_portfolio .col-md-3 figure.effect-winston figcaption p { padding: 0 1em 2% 0; }
.gs_p_portfolio figure.effect-kira figcaption::before { top: -19px; height: 2.5em; }
figure.effect-kira:hover p { text-align: center; }
.col-xs-6 { width: 100% !important; }
figure.effect-winston a { font-size: 110%; }
figure.effect-zoe figcaption { padding: .4em; height: 3.7em; }
.gs_p_portfolio figure.effect-zoe h2 { width: 100%; text-align: center; font-size: 17px; }
figure.effect-zoe p.icon-links a { float: none; font-size: 100%; }
figure.effect-zoe:hover p.description { padding: 27px 7px; font-size: 15px; letter-spacing: initial; }
} .mfp-zoom-in .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} @media screen and (min-width: 200px) and (max-width: 768px) {
.gs-wrapper {
width: 90%;
}
.masonry {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
}
.gs-list-menu li:first-child {
margin-top: 0px;
}
}
@media screen and (min-width: 768px) and (max-width: 1290px) {
.gs-wrapper {
width: 95%;
}
.masonry {
column-gap: 3em;
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
}
} .gs-grid-hover-effect {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
border-radius: 0%;
visibility: hidden;
-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
.gs-grid-hover-effect-button {
box-sizing: border-box;
display: table;
width: 100%;
height: 100%;
}
.portfolio-fire-hover:hover .gs-grid-hover-effect {
visibility: visible;
background: rgba(0, 0, 0, 0.7);
}
.gs-grid-hover-effect .gs-grid-hover-effect-button-area {
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 0;
}
.gs-grid-hover-effect-button-area a {
display: inline-block;
padding: 12px;
background-color: rgba(255, 255, 255, 0.18);
width: 42px;
height: 42px;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
font-size: 14px;
}
.gs-grid-hover-effect-button-area a i { margin-right: 0 !important; color: #fff !important; }
.gs-grid-hover-effect-button-area a.first-anchor {
border-radius: 10px 0 0 10px;
border-left: none;
}
.hover-effect-link a.second-anchor{
border-radius: 0 0 0 0 !important;
}
.gs-grid-hover-effect-button-area a.third-anchor {
border-radius: 0 10px 10px 0;
border-right: none;
}
.gs-grid-hover-effect-button-area a:hover {
background-color: rgba(255, 255, 255, 0.45);
}
@media screen and (max-width: 1170px) {
.gs-grid-hover-effect-button-area a {
float: none;
border-radius: 10px;
margin: 2px;
}
.gs-grid-hover-effect-button-area a.first-anchor, .gs-grid-hover-effect-button-area a.second-anchor, .gs-grid-hover-effect-button-area a.third-anchor {
border-radius: 10px;
}
}