AlkantarClanX12
Current Path : /home/dilseshaadi/public_html/wp-content/themes/wedding-planner/css/ |
Current File : /home/dilseshaadi/public_html/wp-content/themes/wedding-planner/css/portfolio.css |
.wpb_wrapper.isotope.column-2>.ozy_portfolio{width:50%;} .wpb_wrapper.isotope.column-3>.ozy_portfolio{width:33.333%;} .wpb_wrapper.isotope.column-4>.ozy_portfolio{width:25%;} .wpb_wrapper.isotope>.ozy_portfolio { margin:0 !important; padding:0 !important; float:left; clear:none !important; border-right:20px solid transparent; border-bottom:20px solid transparent; height:auto; overflow:hidden; } .wpb_wrapper.isotope>.ozy_portfolio>img { max-height:100%; max-width:100%; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail { position:relative; margin:0 !important; -webkit-transition: all .4s; transition: all .4s; } .wpb_wrapper.isotope>.ozy_portfolio:hover>.featured-thumbnail { background-color:rgba(0,0,0,0.6); } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption { position:absolute; width:100%; top:50%; transform:translateY(-50%); /*height:100%;*/ padding:25px 30px 30px 30px; display:none; text-align:center; -webkit-transition: all .4s; transition: all .4s; z-index:1; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>.view-more { opacity:0; font-size:110%; font-style:italic; -webkit-transition: all 1.2s; transition: all 1.2s; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>.view-more:after { content:''; position:absolute; width:1px; height:0; bottom:-115px; left:50%; background-color:currentColor; transform:translateX(-50%); -webkit-transition: all .4s; transition: all .4s; -webkit-backface-visibility: hidden; /*for sharper border*/ -webkit-transform: translateZ(0) scale(1.0, 1.0); } .wpb_wrapper.isotope>.ozy_portfolio:hover>.featured-thumbnail>.caption>.view-more:after { height:130px; } .wpb_wrapper.isotope>.ozy_portfolio:hover>.featured-thumbnail>.caption>.view-more { opacity:1; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>img { opacity:0 !important; } .wpb_wrapper.isotope>.ozy_portfolio>.zs-img { position:absolute; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>.heading{ line-height:1.2em!important; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>.heading, .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>.heading>a { text-decoration:none !important; margin:0 !important } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail>.caption>p.tag { display:inline-block; padding:5px 20px; margin-bottom:10px !important; background-color:rgba(0,0,0,.5); color:#fff; letter-spacing:2px; font-weight:500; font-size:10px; text-transform:uppercase; } .wpb_wrapper.isotope>.ozy_portfolio>.featured-thumbnail:hover>.caption{display: inherit; opacity:1;} /*page layout*/ body.page-template-page-portfolio #main>.container { padding-left:0!important; padding-right:0!important; } body.page-template-page-portfolio #main>.container>#content { max-width: 100% !important; width: 100% !important; padding: 0 20px 40px 40px; } /*filter bar*/ #portfolio-filter{ display:table; list-style:none; margin:0 auto 30px auto !important; padding:0 20px 0 0; } #portfolio-filter.component-model.filter-align-left { display:inline-block; margin:0 0 30px 0; } #portfolio-filter>li.s{ display:table-cell; width:1px; background-color:transparent !important; padding:0 !important; } #portfolio-filter>li { display:inline-block; margin:16px 12px; line-height:1em; } #portfolio-filter.component-model>li {display:inline-block;} #portfolio-filter>li.active{ border-bottom:2px solid yellow; padding-bottom:2px; } #portfolio-filter>li>a { text-decoration:none; font-weight:700; font-size:12px; color:#fff; } #portfolio-filter>li>a:hover, #portfolio-filter>li.active>a {opacity:.6} /*component*/ .ozy-portfolio-listing{ position:relative; margin-bottom:35px; /*margin-left:-20px;*/ } .wpb_wrapper.custom-gutter.isotope.ozy-portfolio-listing{width:calc(100% + 20px);} .wpb_wrapper.custom-gutter.isotope.ozy-portfolio-listing>div {margin-bottom:20px !important;} .wpb_wrapper.custom-gutter.isotope.column-2>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-2.ozy-portfolio-listing>.ozy_portfolio {width:calc(50% - 20px);} .wpb_wrapper.custom-gutter.isotope.column-3>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-3.ozy-portfolio-listing>.ozy_portfolio {width:calc(33.333% - 20px);} .wpb_wrapper.custom-gutter.isotope.column-4>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-4.ozy-portfolio-listing>.ozy_portfolio {width:calc(25% - 20px);} .wpb_wrapper.custom-gutter.isotope.ozy-portfolio-listing .gutter-sizer { width:20px; } /*.ozy-portfolio-listing>div>*/ .wpb_wrapper.isotope.ozy-portfolio-listing>.ozy_portfolio{border:none !important;} /*details page*/ .facts-bar { border:1px solid #dedede; border-radius:4px; display:inline-block; padding-bottom:10px; } .facts-bar .heading { border-bottom:1px solid #dedede; padding:10px 30px; } .facts-bar ul {padding:0 30px;} .facts-bar ul li{ list-style:none; float:left; width:33.333%; line-height:30px; font-size:12px; } .facts-bar ul li i {padding-right:5px;} body.single-ozy_portfolio .post-content h4 { display: -webkit-flex; display: -ms-flex; display: -moz-flex; display:flex; border-bottom:1px solid #dedede; padding-top:20px; padding-bottom:10px; margin-bottom:20px; position:relative; } body.single-ozy_portfolio .post-content h4:first-child { padding-top:0 !important; } body.single-ozy_portfolio .post-content h4:before { position:absolute; display:inline-block; bottom:-1px; width:100px; height:1px; background-color:red; content:' '; } body.single-ozy_portfolio .post .post-content { margin-top:30px !important; } @media only screen and (max-width: 1024px) { #portfolio-filter>li { margin:4px 0; } } @media only screen and (max-width: 820px) { #portfolio-filter{ padding:0; margin-top: 30px; } #portfolio-filter>li{ width:100%; float:left; } .wpb_wrapper.isotope.column-2>.ozy_portfolio, .wpb_wrapper.isotope.column-3>.ozy_portfolio{width:50%} .wpb_wrapper.custom-gutter.isotope.column-2>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-3>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-3.ozy-portfolio-listing>.ozy_portfolio, .wpb_wrapper.custom-gutter.isotope.column-4>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-4.ozy-portfolio-listing>.ozy_portfolio {width:calc(50% - 20px);} .facts-bar ul li{width:50%;} } @media only screen and (max-width: 479px) { .wpb_wrapper.isotope.column-4>.ozy_portfolio, .wpb_wrapper.isotope.column-3>.ozy_portfolio, .wpb_wrapper.isotope.column-2>.ozy_portfolio { width:100%; border-right:none; } .wpb_wrapper.custom-gutter.isotope.column-2>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-3>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-3.ozy-portfolio-listing>.ozy_portfolio, .wpb_wrapper.custom-gutter.isotope.column-4>.grid-sizer, .wpb_wrapper.custom-gutter.isotope.column-4.ozy-portfolio-listing>.ozy_portfolio {width:calc(100% - 20px);} .facts-bar ul li{width:100%;} body.page-template-page-portfolio #main>.container>#content { padding: 0 20px 40px 20px; } } /* Load More Button */ .button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top:20px; } /* ----------------------------------------- :: Button Styles -------------------------------------- */ .button-container .button { position: relative; font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; text-transform: uppercase; letter-spacing: 4px; white-space: nowrap; background-color: transparent; border: 0; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; color: currentColor; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0; padding: 0.875em 1.428571429em; letter-spacing: 0.3em; } .button-container .button::after { content: ''; width: 80%; left: 50%; height: 1px; bottom: 0; -webkit-transform: translatex(-50%); transform: translatex(-50%); -webkit-transition: width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; display: block; position: absolute; background: currentColor; } .button-container .button span { display: block; position: absolute; -webkit-transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); width: 100%; top: 0; left: 0; } .button-container .button span::before,.button-container .button span::after { content: ''; display: block; position: absolute; background: currentColor; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9), -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9); } .button-container .button span:first-child {height: 100%;} .button-container .button span:first-child::before,.button-container .button span:first-child::after { width: 1px; height: 100%; bottom: 0; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; } .button-container .button span:first-child::before {left: 0;} .button-container .button span:first-child::after {right: 0;} .button-container .button span:last-child { width: 100%; height: 1px; } .button-container .button span:last-child::before, .button-container .button span:last-child::after { height: 1px; width: 100%; bottom: 0; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; } .button-container .button span:last-child::before { left: 0; -webkit-transform-origin: bottom left; transform-origin: bottom left; } .button-container .button span:last-child::after { right: 0; -webkit-transform-origin: bottom right; transform-origin: bottom right; } .button-container .button:hover { opacity: 1; outline: 0; text-decoration: none; -webkit-transition: color 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: color 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; /* Positioning */ } .button-container .button:hover::after { width: 100%; background: currentColor; -webkit-transition: width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: width 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; } .button-container .button:hover span:first-child::before, .button-container .button:hover span:first-child::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); background: currentColor; -webkit-transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.2s; } .button-container .button:hover span:last-child::before, .button-container .button:hover span:last-child::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); background: currentColor; -webkit-transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s; transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s; transition: transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s, background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s, -webkit-transform 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0.4s; }